diff --git a/app/components/GameTimeline.module.css b/app/components/GameTimeline.module.css
index 30e626b44..9d63bcf59 100644
--- a/app/components/GameTimeline.module.css
+++ b/app/components/GameTimeline.module.css
@@ -101,11 +101,11 @@
 
 .readoutStatusLabel {
 	&.statusLabelDead {
-		color: var(--color-error);
+		color: var(--color-chart-splatted);
 	}
 
 	&.statusLabelSpecial {
-		color: var(--color-info);
+		color: var(--color-chart-special);
 	}
 }
 
diff --git a/app/components/ObjectiveTimeline.tsx b/app/components/ObjectiveTimeline.tsx
index c30cf858b..935ed90be 100644
--- a/app/components/ObjectiveTimeline.tsx
+++ b/app/components/ObjectiveTimeline.tsx
@@ -138,8 +138,8 @@ export function ObjectiveTimeline({
 					y: lastScore === null ? null : lastScore + (penalties[i] ?? 0),
 				};
 			}),
-			borderColor: `${teamColors[side]}8c`,
-			backgroundColor: `${teamColors[side]}38`,
+			borderColor: withAlpha(teamColors[side], 0.55),
+			backgroundColor: withAlpha(teamColors[side], 0.22),
 			borderWidth: 1,
 			pointRadius: 0,
 			pointHoverRadius: 0,
@@ -268,6 +268,11 @@ function gridColor(
 	return value === 0 ? colors.borderHigh : colors.border;
 }
 
+/** `oklch(64% 0.16 10)` → `oklch(64% 0.16 10 / 0.55)` */
+function withAlpha(oklchColor: string, alpha: number) {
+	return oklchColor.replace(/\)$/, ` / ${alpha})`);
+}
+
 /** the match timer's M:SS (215 → "3:35") */
 function formatClock(seconds: number): string {
 	const minutes = Math.floor(seconds / 60);
diff --git a/app/components/PlayerStatusTimeline.module.css b/app/components/PlayerStatusTimeline.module.css
index 789a7ab95..2e0404f62 100644
--- a/app/components/PlayerStatusTimeline.module.css
+++ b/app/components/PlayerStatusTimeline.module.css
@@ -29,11 +29,11 @@
 }
 
 .legendSwatchDead {
-	background-color: var(--color-error);
+	background-color: var(--color-chart-splatted);
 }
 
 .legendSwatchSpecial {
-	background-color: var(--color-info);
+	background-color: var(--color-chart-special);
 }
 
 .team {
@@ -80,13 +80,11 @@
 }
 
 .spanDead {
-	background-color: var(--color-error);
-	opacity: 0.75;
+	background-color: var(--color-chart-splatted);
 }
 
 .spanSpecial {
-	background-color: var(--color-info);
-	opacity: 0.75;
+	background-color: var(--color-chart-special);
 }
 
 .unknownWeapon {
diff --git a/app/features/components-showcase/routes/components.colors.tsx b/app/features/components-showcase/routes/components.colors.tsx
index 282efca09..fecffbc22 100644
--- a/app/features/components-showcase/routes/components.colors.tsx
+++ b/app/features/components-showcase/routes/components.colors.tsx
@@ -353,6 +353,10 @@ const REFERENCE = [
 		tokens: ["--color-chart-alpha", "--color-chart-bravo"],
 		use: "The two sides in charts and timelines",
 	},
+	{
+		tokens: ["--color-chart-splatted", "--color-chart-special"],
+		use: "Player states in timelines, kept apart from the side colors",
+	},
 ] as const;
 
 export default function ComponentsColorsPage() {
diff --git a/app/styles/vars.css b/app/styles/vars.css
index 14df2d430..dcad8d30b 100644
--- a/app/styles/vars.css
+++ b/app/styles/vars.css
@@ -160,8 +160,10 @@ html.dark [data-custom-theme],
 	--color-error: oklch(65% 0.25 10);
 	--color-error-high: oklch(87% 0.07 10);
 
-	--color-chart-alpha: #da5b76;
-	--color-chart-bravo: #6572e4;
+	--color-chart-alpha: oklch(64% 0.16 10);
+	--color-chart-bravo: oklch(60% 0.17 275);
+	--color-chart-splatted: oklch(66% 0.03 var(--_base-h));
+	--color-chart-special: oklch(80% 0.14 84);
 
 	/* inlined instead of var() because data URIs can't read custom properties: keep in sync with --color-text-high */
 	--field-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(122, 139, 183)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@@ -226,8 +228,10 @@ html.light [data-custom-theme],
 	--color-error: oklch(65.223% 0.22164 5.216);
 	--color-error-high: oklch(41.268% 0.15511 8.446);
 
-	--color-chart-alpha: #b82851;
-	--color-chart-bravo: #4246c2;
+	--color-chart-alpha: oklch(52% 0.18 10);
+	--color-chart-bravo: oklch(47% 0.19 275);
+	--color-chart-splatted: oklch(50% 0.03 var(--_base-h));
+	--color-chart-special: oklch(67% 0.14 72);
 
 	/* inlined instead of var() because data URIs can't read custom properties: keep in sync with --color-text-high */
 	--field-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(72, 87, 124)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");