diff --git a/packages/core/src/editor/Block.css b/packages/core/src/editor/Block.css
index fca4e504ad..2c96511a2f 100644
--- a/packages/core/src/editor/Block.css
+++ b/packages/core/src/editor/Block.css
@@ -583,92 +583,110 @@ NESTED BLOCKS
 
 /* TEXT COLORS */
 [data-style-type="textColor"][data-value="gray"],
+[data-text-color="gray"],
 .bn-block:has(> .bn-block-content[data-text-color="gray"]) {
   color: #9b9a97;
 }
 
 [data-style-type="textColor"][data-value="brown"],
+[data-text-color="brown"],
 .bn-block:has(> .bn-block-content[data-text-color="brown"]) {
   color: #64473a;
 }
 
 [data-style-type="textColor"][data-value="red"],
+[data-text-color="red"],
 .bn-block:has(> .bn-block-content[data-text-color="red"]) {
   color: #e03e3e;
 }
 
 [data-style-type="textColor"][data-value="orange"],
+[data-text-color="orange"],
 .bn-block:has(> .bn-block-content[data-text-color="orange"]) {
   color: #d9730d;
 }
 
 [data-style-type="textColor"][data-value="yellow"],
+[data-text-color="yellow"],
 .bn-block:has(> .bn-block-content[data-text-color="yellow"]) {
   color: #dfab01;
 }
 
 [data-style-type="textColor"][data-value="green"],
+[data-text-color="green"],
 .bn-block:has(> .bn-block-content[data-text-color="green"]) {
   color: #4d6461;
 }
 
 [data-style-type="textColor"][data-value="blue"],
+[data-text-color="blue"],
 .bn-block:has(> .bn-block-content[data-text-color="blue"]) {
   color: #0b6e99;
 }
 
 [data-style-type="textColor"][data-value="purple"],
+[data-text-color="purple"],
 .bn-block:has(> .bn-block-content[data-text-color="purple"]) {
   color: #6940a5;
 }
 
 [data-style-type="textColor"][data-value="pink"],
+[data-text-color="pink"],
 .bn-block:has(> .bn-block-content[data-text-color="pink"]) {
   color: #ad1a72;
 }
 
 /* BACKGROUND COLORS */
 [data-style-type="backgroundColor"][data-value="gray"],
+[data-background-color="gray"],
 .bn-block:has(> .bn-block-content[data-background-color="gray"]) {
   background-color: #ebeced;
 }
 
 [data-style-type="backgroundColor"][data-value="brown"],
+[data-background-color="brown"],
 .bn-block:has(> .bn-block-content[data-background-color="brown"]) {
   background-color: #e9e5e3;
 }
 
 [data-style-type="backgroundColor"][data-value="red"],
+[data-background-color="red"],
 .bn-block:has(> .bn-block-content[data-background-color="red"]) {
   background-color: #fbe4e4;
 }
 
 [data-style-type="backgroundColor"][data-value="orange"],
+[data-background-color="orange"],
 .bn-block:has(> .bn-block-content[data-background-color="orange"]) {
   background-color: #f6e9d9;
 }
 
 [data-style-type="backgroundColor"][data-value="yellow"],
+[data-background-color="yellow"],
 .bn-block:has(> .bn-block-content[data-background-color="yellow"]) {
   background-color: #fbf3db;
 }
 
 [data-style-type="backgroundColor"][data-value="green"],
+[data-background-color="green"],
 .bn-block:has(> .bn-block-content[data-background-color="green"]) {
   background-color: #ddedea;
 }
 
 [data-style-type="backgroundColor"][data-value="blue"],
+[data-background-color="blue"],
 .bn-block:has(> .bn-block-content[data-background-color="blue"]) {
   background-color: #ddebf1;
 }
 
 [data-style-type="backgroundColor"][data-value="purple"],
+[data-background-color="purple"],
 .bn-block:has(> .bn-block-content[data-background-color="purple"]) {
   background-color: #eae4f2;
 }
 
 [data-style-type="backgroundColor"][data-value="pink"],
+[data-background-color="pink"],
 .bn-block:has(> .bn-block-content[data-background-color="pink"]) {
   background-color: #f4dfeb;
 }
diff --git a/packages/react/src/editor/styles.css b/packages/react/src/editor/styles.css
index 48166fe96f..1c496bbc69 100644
--- a/packages/react/src/editor/styles.css
+++ b/packages/react/src/editor/styles.css
@@ -141,109 +141,109 @@
 
 /* Highlight color styling */
 [data-style-type="textColor"][data-value="gray"],
-.bn-color-icon[data-text-color="gray"],
+[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"],
+[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"],
+[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"],
+[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"],
+[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"],
+[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"],
+[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"],
+[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"],
+[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"],
+[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"],
+[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"],
+[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"],
+[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"],
+[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"],
+[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"],
+[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"],
+[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"],
+[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/tables/tables.test.ts b/tests/src/end-to-end/tables/tables.test.ts
index caed60b14a..1fdf707382 100644
--- a/tests/src/end-to-end/tables/tables.test.ts
+++ b/tests/src/end-to-end/tables/tables.test.ts
@@ -1,15 +1,16 @@
 import { expect } from "@playwright/test";
 import { test } from "../../setup/setupScript.js";
-import { BASE_URL, TABLE_SELECTOR } from "../../utils/const.js";
+import {
+  ADVANCED_TABLES_URL,
+  BASE_URL,
+  TABLE_SELECTOR,
+} from "../../utils/const.js";
 import { compareDocToSnapshot, focusOnEditor } from "../../utils/editor.js";
 import { executeSlashCommand } from "../../utils/slashmenu.js";
 
-test.beforeEach(async ({ page }) => {
-  await page.goto(BASE_URL);
-});
-
 test.describe("Check Table interactions", () => {
   test("Should be able to type in cell", async ({ page }) => {
+    await page.goto(BASE_URL);
     await focusOnEditor(page);
     await executeSlashCommand(page, "table");
     await page.keyboard.type("Table Cell");
@@ -17,6 +18,7 @@ test.describe("Check Table interactions", () => {
     await compareDocToSnapshot(page, "cellTyping.json");
   });
   test("Tab should cycle cells", async ({ page }) => {
+    await page.goto(BASE_URL);
     await focusOnEditor(page);
     await executeSlashCommand(page, "table");
     // Cycle to sixth (last) cell.
@@ -33,6 +35,7 @@ test.describe("Check Table interactions", () => {
     await compareDocToSnapshot(page, "tabCells.json");
   });
   test("Arrow keys should move cells", async ({ page }) => {
+    await page.goto(BASE_URL);
     await focusOnEditor(page);
     await executeSlashCommand(page, "table");
     // Move down to second (last) cell in column and third (last) cell in row.
@@ -51,6 +54,7 @@ test.describe("Check Table interactions", () => {
     await compareDocToSnapshot(page, "arrowKeyCells.json");
   });
   test("Enter should move to cell below", async ({ page }) => {
+    await page.goto(BASE_URL);
     await focusOnEditor(page);
     await executeSlashCommand(page, "table");
     await page.keyboard.type("Top");
@@ -60,6 +64,7 @@ test.describe("Check Table interactions", () => {
     await compareDocToSnapshot(page, "enterMovesToCellBelow.json");
   });
   test("Shift+Enter should create a new line within cell", async ({ page }) => {
+    await page.goto(BASE_URL);
     await focusOnEditor(page);
     await executeSlashCommand(page, "table");
     await page.keyboard.type("Line 1");
@@ -83,6 +88,7 @@ test.describe("Check Table interactions", () => {
       "Playwright doesn't correctly simulate drag events in Firefox.",
     );
 
+    await page.goto(BASE_URL);
     await focusOnEditor(page);
     await executeSlashCommand(page, "table");
 
@@ -184,4 +190,11 @@ test.describe("Check Table interactions", () => {
     // Expected: only R2 moved. Buggy (#2691): R3 follows along.
     expect(order).toEqual(["R1", "R3", "R4", "R5", "R2"]);
   });
+  // Regression test for table cell colors.
+  test("Should render table cell colors", async ({ page }) => {
+    await page.goto(ADVANCED_TABLES_URL, { waitUntil: "networkidle" });
+    await page.waitForSelector(TABLE_SELECTOR);
+
+    expect(await page.screenshot()).toMatchSnapshot("tableCellColors.png");
+  });
 });
diff --git a/tests/src/end-to-end/tables/tables.test.ts-snapshots/tableCellColors-chromium-linux.png b/tests/src/end-to-end/tables/tables.test.ts-snapshots/tableCellColors-chromium-linux.png
new file mode 100644
index 0000000000..a5246eddfa
Binary files /dev/null and b/tests/src/end-to-end/tables/tables.test.ts-snapshots/tableCellColors-chromium-linux.png differ
diff --git a/tests/src/end-to-end/tables/tables.test.ts-snapshots/tableCellColors-firefox-linux.png b/tests/src/end-to-end/tables/tables.test.ts-snapshots/tableCellColors-firefox-linux.png
new file mode 100644
index 0000000000..0cc9859310
Binary files /dev/null and b/tests/src/end-to-end/tables/tables.test.ts-snapshots/tableCellColors-firefox-linux.png differ
diff --git a/tests/src/end-to-end/tables/tables.test.ts-snapshots/tableCellColors-webkit-linux.png b/tests/src/end-to-end/tables/tables.test.ts-snapshots/tableCellColors-webkit-linux.png
new file mode 100644
index 0000000000..02dafa1759
Binary files /dev/null and b/tests/src/end-to-end/tables/tables.test.ts-snapshots/tableCellColors-webkit-linux.png differ
diff --git a/tests/src/utils/const.ts b/tests/src/utils/const.ts
index 6220709aa7..22fb87d7fd 100644
--- a/tests/src/utils/const.ts
+++ b/tests/src/utils/const.ts
@@ -59,6 +59,10 @@ export const NO_TRAILING_BLOCK_URL = !process.env.RUN_IN_DOCKER
   ? `http://localhost:${PORT}/basic/no-trailing-block?hideMenu`
   : `http://host.docker.internal:${PORT}/basic/no-trailing-block?hideMenu`;
 
+export const ADVANCED_TABLES_URL = !process.env.RUN_IN_DOCKER
+  ? `http://localhost:${PORT}/ui-components/advanced-tables?hideMenu`
+  : `http://host.docker.internal:${PORT}/ui-components/advanced-tables?hideMenu`;
+
 export const PASTE_ZONE_SELECTOR = "#pasteZone";
 
 export const EDITOR_SELECTOR = `.bn-editor`;