diff --git a/frontend/src/components/charts/backtest-folds-chart.tsx b/frontend/src/components/charts/backtest-folds-chart.tsx
index ec0b082b..bc2e0ffa 100644
--- a/frontend/src/components/charts/backtest-folds-chart.tsx
+++ b/frontend/src/components/charts/backtest-folds-chart.tsx
@@ -24,11 +24,13 @@ interface BacktestFoldsChartProps {
   className?: string
 }
 
+// The --chart-N vars are complete oklch() colours (Tailwind 4 / shadcn v4);
+// reference them directly — wrapping in hsl() produces invalid CSS (black).
 const metricColors: Record<string, string> = {
-  mae: 'hsl(var(--chart-1))',
-  smape: 'hsl(var(--chart-2))',
-  wape: 'hsl(var(--chart-3))',
-  bias: 'hsl(var(--chart-4))',
+  mae: 'var(--chart-1)',
+  smape: 'var(--chart-2)',
+  wape: 'var(--chart-3)',
+  bias: 'var(--chart-4)',
 }
 
 const metricLabels: Record<string, string> = {
diff --git a/frontend/src/components/charts/time-series-chart.tsx b/frontend/src/components/charts/time-series-chart.tsx
index 7d3dfdfc..22b132ca 100644
--- a/frontend/src/components/charts/time-series-chart.tsx
+++ b/frontend/src/components/charts/time-series-chart.tsx
@@ -39,14 +39,16 @@ export function TimeSeriesChart({
   height = 300,
   className,
 }: TimeSeriesChartProps) {
+  // The --chart-N vars are complete oklch() colours (Tailwind 4 / shadcn v4);
+  // reference them directly — wrapping in hsl() produces invalid CSS (black).
   const chartConfig: ChartConfig = {
     [actualKey]: {
       label: 'Actual',
-      color: 'hsl(var(--chart-1))',
+      color: 'var(--chart-1)',
     },
     [predictedKey]: {
       label: 'Predicted',
-      color: 'hsl(var(--chart-2))',
+      color: 'var(--chart-2)',
     },
   }