diff --git a/packages/react/src/editor/styles.css b/packages/react/src/editor/styles.css
index cd3e056998..48166fe96f 100644
--- a/packages/react/src/editor/styles.css
+++ b/packages/react/src/editor/styles.css
@@ -141,91 +141,109 @@
 
 /* Highlight color styling */
 [data-style-type="textColor"][data-value="gray"],
+.bn-color-icon[data-text-color="gray"],
 .bn-block:has(> .bn-block-content[data-text-color="gray"]) {
   color: var(--bn-colors-highlights-gray-text);
 }
 
 [data-style-type="textColor"][data-value="brown"],
+.bn-color-icon[data-text-color="brown"],
 .bn-block:has(> .bn-block-content[data-text-color="brown"]) {
   color: var(--bn-colors-highlights-brown-text);
 }
 
 [data-style-type="textColor"][data-value="red"],
+.bn-color-icon[data-text-color="red"],
 .bn-block:has(> .bn-block-content[data-text-color="red"]) {
   color: var(--bn-colors-highlights-red-text);
 }
 
 [data-style-type="textColor"][data-value="orange"],
+.bn-color-icon[data-text-color="orange"],
 .bn-block:has(> .bn-block-content[data-text-color="orange"]) {
   color: var(--bn-colors-highlights-orange-text);
 }
 
 [data-style-type="textColor"][data-value="yellow"],
+.bn-color-icon[data-text-color="yellow"],
 .bn-block:has(> .bn-block-content[data-text-color="yellow"]) {
   color: var(--bn-colors-highlights-yellow-text);
 }
 
 [data-style-type="textColor"][data-value="green"],
+.bn-color-icon[data-text-color="green"],
 .bn-block:has(> .bn-block-content[data-text-color="green"]) {
   color: var(--bn-colors-highlights-green-text);
 }
 
 [data-style-type="textColor"][data-value="blue"],
+.bn-color-icon[data-text-color="blue"],
 .bn-block:has(> .bn-block-content[data-text-color="blue"]) {
   color: var(--bn-colors-highlights-blue-text);
 }
 
 [data-style-type="textColor"][data-value="purple"],
+.bn-color-icon[data-text-color="purple"],
 .bn-block:has(> .bn-block-content[data-text-color="purple"]) {
   color: var(--bn-colors-highlights-purple-text);
 }
 
 [data-style-type="textColor"][data-value="pink"],
+.bn-color-icon[data-text-color="pink"],
 .bn-block:has(> .bn-block-content[data-text-color="pink"]) {
   color: var(--bn-colors-highlights-pink-text);
 }
 
 [data-style-type="backgroundColor"][data-value="gray"],
+.bn-color-icon[data-background-color="gray"],
 .bn-block:has(> .bn-block-content[data-background-color="gray"]) {
   background-color: var(--bn-colors-highlights-gray-background);
 }
 
 [data-style-type="backgroundColor"][data-value="brown"],
+.bn-color-icon[data-background-color="brown"],
 .bn-block:has(> .bn-block-content[data-background-color="brown"]) {
   background-color: var(--bn-colors-highlights-brown-background);
 }
 
 [data-style-type="backgroundColor"][data-value="red"],
+.bn-color-icon[data-background-color="red"],
 .bn-block:has(> .bn-block-content[data-background-color="red"]) {
   background-color: var(--bn-colors-highlights-red-background);
 }
 
 [data-style-type="backgroundColor"][data-value="orange"],
+.bn-color-icon[data-background-color="orange"],
 .bn-block:has(> .bn-block-content[data-background-color="orange"]) {
   background-color: var(--bn-colors-highlights-orange-background);
 }
 
 [data-style-type="backgroundColor"][data-value="yellow"],
+.bn-color-icon[data-background-color="yellow"],
 .bn-block:has(> .bn-block-content[data-background-color="yellow"]) {
   background-color: var(--bn-colors-highlights-yellow-background);
 }
 
 [data-style-type="backgroundColor"][data-value="green"],
+.bn-color-icon[data-background-color="green"],
 .bn-block:has(> .bn-block-content[data-background-color="green"]) {
   background-color: var(--bn-colors-highlights-green-background);
 }
 
 [data-style-type="backgroundColor"][data-value="blue"],
+.bn-color-icon[data-background-color="blue"],
 .bn-block:has(> .bn-block-content[data-background-color="blue"]) {
   background-color: var(--bn-colors-highlights-blue-background);
 }
 
 [data-style-type="backgroundColor"][data-value="purple"],
+.bn-color-icon[data-background-color="purple"],
 .bn-block:has(> .bn-block-content[data-background-color="purple"]) {
   background-color: var(--bn-colors-highlights-purple-background);
 }
 
 [data-style-type="backgroundColor"][data-value="pink"],
+.bn-color-icon[data-background-color="pink"],
 .bn-block:has(> .bn-block-content[data-background-color="pink"]) {
   background-color: var(--bn-colors-highlights-pink-background);
 }
diff --git a/tests/src/end-to-end/colors/colors.test.ts b/tests/src/end-to-end/colors/colors.test.ts
index 760ab63bc7..e17335e94c 100644
--- a/tests/src/end-to-end/colors/colors.test.ts
+++ b/tests/src/end-to-end/colors/colors.test.ts
@@ -6,6 +6,7 @@ import {
   COLORS_BUTTON_SELECTOR,
   DRAG_HANDLE_MENU_SELECTOR,
   DRAG_HANDLE_SELECTOR,
+  H_ONE_BLOCK_SELECTOR,
   H_TWO_BLOCK_SELECTOR,
   TABLE_SELECTOR,
   TEXT_COLOR_SELECTOR,
@@ -19,6 +20,42 @@ test.beforeEach(async ({ page }) => {
 });
 
 test.describe("Check Background & Text Color Functionality", () => {
+  test("Should be able to open the color picker from the formatting toolbar", async ({
+    page,
+  }) => {
+    await focusOnEditor(page);
+
+    await insertHeading(page, 1);
+    await page.keyboard.press("Shift+ArrowLeft");
+
+    await page.locator(COLORS_BUTTON_SELECTOR).click();
+
+    // Waits for the color picker dropdown to open & its animation to finish.
+    await page.waitForSelector(TEXT_COLOR_SELECTOR("red"));
+    await page.waitForTimeout(500);
+
+    expect(await page.screenshot()).toMatchSnapshot(
+      "colorPickerFormattingToolbar.png",
+    );
+  });
+  test("Should be able to open the color picker from the side menu", async ({
+    page,
+  }) => {
+    await focusOnEditor(page);
+
+    await insertHeading(page, 1);
+
+    await page.hover(H_ONE_BLOCK_SELECTOR);
+    await page.click(DRAG_HANDLE_SELECTOR);
+    await page.waitForSelector(DRAG_HANDLE_MENU_SELECTOR);
+    await page.hover("text=Colors");
+
+    // Waits for the color picker submenu to open & its animation to finish.
+    await page.waitForSelector(TEXT_COLOR_SELECTOR("red"));
+    await page.waitForTimeout(500);
+
+    expect(await page.screenshot()).toMatchSnapshot("colorPickerSideMenu.png");
+  });
   test("Should be able to apply a text color mark", async ({ page }) => {
     await focusOnEditor(page);
 
diff --git a/tests/src/end-to-end/colors/colors.test.ts-snapshots/colorPickerFormattingToolbar-chromium-linux.png b/tests/src/end-to-end/colors/colors.test.ts-snapshots/colorPickerFormattingToolbar-chromium-linux.png
new file mode 100644
index 0000000000..0980bbb118
Binary files /dev/null and b/tests/src/end-to-end/colors/colors.test.ts-snapshots/colorPickerFormattingToolbar-chromium-linux.png differ
diff --git a/tests/src/end-to-end/colors/colors.test.ts-snapshots/colorPickerFormattingToolbar-firefox-linux.png b/tests/src/end-to-end/colors/colors.test.ts-snapshots/colorPickerFormattingToolbar-firefox-linux.png
new file mode 100644
index 0000000000..3e3dd7a215
Binary files /dev/null and b/tests/src/end-to-end/colors/colors.test.ts-snapshots/colorPickerFormattingToolbar-firefox-linux.png differ
diff --git a/tests/src/end-to-end/colors/colors.test.ts-snapshots/colorPickerFormattingToolbar-webkit-linux.png b/tests/src/end-to-end/colors/colors.test.ts-snapshots/colorPickerFormattingToolbar-webkit-linux.png
new file mode 100644
index 0000000000..d121ac96ee
Binary files /dev/null and b/tests/src/end-to-end/colors/colors.test.ts-snapshots/colorPickerFormattingToolbar-webkit-linux.png differ
diff --git a/tests/src/end-to-end/colors/colors.test.ts-snapshots/colorPickerSideMenu-chromium-linux.png b/tests/src/end-to-end/colors/colors.test.ts-snapshots/colorPickerSideMenu-chromium-linux.png
new file mode 100644
index 0000000000..8ec6298280
Binary files /dev/null and b/tests/src/end-to-end/colors/colors.test.ts-snapshots/colorPickerSideMenu-chromium-linux.png differ
diff --git a/tests/src/end-to-end/colors/colors.test.ts-snapshots/colorPickerSideMenu-firefox-linux.png b/tests/src/end-to-end/colors/colors.test.ts-snapshots/colorPickerSideMenu-firefox-linux.png
new file mode 100644
index 0000000000..e86d5c65ea
Binary files /dev/null and b/tests/src/end-to-end/colors/colors.test.ts-snapshots/colorPickerSideMenu-firefox-linux.png differ
diff --git a/tests/src/end-to-end/colors/colors.test.ts-snapshots/colorPickerSideMenu-webkit-linux.png b/tests/src/end-to-end/colors/colors.test.ts-snapshots/colorPickerSideMenu-webkit-linux.png
new file mode 100644
index 0000000000..b4b2f05a87
Binary files /dev/null and b/tests/src/end-to-end/colors/colors.test.ts-snapshots/colorPickerSideMenu-webkit-linux.png differ