diff --git a/frontend/src/apexcharts.js b/frontend/src/apexcharts.js
index a779af7a..4721dc22 100644
--- a/frontend/src/apexcharts.js
+++ b/frontend/src/apexcharts.js
@@ -131,7 +131,7 @@ const sqlpage_chart = (() => {
     if (data.ymax == null) data.ymax = undefined;
 
     const palette = [
-      ...data.colors.filter((c) => c).map((c) => colorNames[c]),
+      ...data.colors.map(named_color).filter((c) => c !== undefined),
       ...tblrColors.map(([_, dark, light]) => (isDarkTheme ? dark : light)),
       ...tblrColors.map(([_, dark, light]) => (isDarkTheme ? light : dark)),
     ];
diff --git a/tests/end-to-end/fixtures/chart/test.ts b/tests/end-to-end/fixtures/chart/test.ts
index b2cdcba2..fad452e6 100644
--- a/tests/end-to-end/fixtures/chart/test.ts
+++ b/tests/end-to-end/fixtures/chart/test.ts
@@ -487,6 +487,16 @@ test("keeps the color of the series when a row names a color SQLPage does not kn
   expect(fills(unknown)).toEqual(fills(plain));
 });
 
+test("keeps the default palette when the chart names a color SQLPage does not know", async ({
+  page,
+}) => {
+  const plain = await renderChart(page, "uncolored-bar");
+  const unknown = await renderChart(page, "unknown-chart-color");
+
+  expect(unknown.failures).toEqual([]);
+  expect(fills(unknown)).toEqual(fills(plain));
+});
+
 test("renders series named after built-in JavaScript properties", async ({
   page,
 }) => {
diff --git a/tests/end-to-end/fixtures/chart/unknown-chart-color.sql b/tests/end-to-end/fixtures/chart/unknown-chart-color.sql
new file mode 100644
index 00000000..ab0bd63e
--- /dev/null
+++ b/tests/end-to-end/fixtures/chart/unknown-chart-color.sql
@@ -0,0 +1,2 @@
+SELECT 'chart' AS component, 'test-chart' AS id, 'Chart test fixture' AS title, 'bar' AS type, 'chartreuse' AS color, 4 AS marker;
+WITH points(series, x, y) AS (VALUES ('A', 'Q1', 1), ('A', 'Q2', 2)) SELECT * FROM points;