diff --git a/src/components/targets/__tests__/range-bar.test.tsx b/src/components/targets/__tests__/range-bar.test.tsx
index dcd317315..ac03547b7 100644
--- a/src/components/targets/__tests__/range-bar.test.tsx
+++ b/src/components/targets/__tests__/range-bar.test.tsx
@@ -20,7 +20,7 @@ function render(props: Parameters<typeof RangeBar>[0]) {
 }
 
 describe("<RangeBar>", () => {
-  it("renders the bar slot + green/yellow/red zones", () => {
+  it("renders the bar slot + green/orange/red zones with Dracula tokens", () => {
     const html = render({
       value: 72,
       min: 60,
@@ -28,8 +28,14 @@ describe("<RangeBar>", () => {
       unit: "bpm",
     });
     expect(html).toContain('data-slot="target-range-bar"');
-    expect(html).toContain("bg-green-500/20");
-    expect(html).toContain("bg-yellow-500/12");
+    expect(html).toContain("bg-dracula-green/20");
+    expect(html).toContain("bg-dracula-orange/15");
+    expect(html).toContain("bg-dracula-red/10");
+    // Pin the absence of the legacy raw Tailwind palette so the swap
+    // doesn't silently regress on future merges.
+    expect(html).not.toContain("bg-green-500/20");
+    expect(html).not.toContain("bg-yellow-500/12");
+    expect(html).not.toContain("bg-red-500/8");
   });
 
   it("paints the marker with the green token when the value is in range", () => {
diff --git a/src/components/targets/range-bar.tsx b/src/components/targets/range-bar.tsx
index 56bf4842a..2adc4f62b 100644
--- a/src/components/targets/range-bar.tsx
+++ b/src/components/targets/range-bar.tsx
@@ -99,26 +99,30 @@ export function RangeBar({
   return (
     <div className="space-y-1.5" data-slot="target-range-bar">
       <div className="bg-muted/50 relative h-3 w-full overflow-hidden rounded-full">
-        {/* Red background (full bar) */}
-        <div className="absolute inset-0 rounded-full bg-red-500/8" />
-        {/* Yellow zones */}
+        {/* Red background (full bar) — Dracula `--dracula-red` so the
+            chart palette stays aligned with PR-badge, alerts, and the
+            marker dot itself. Raw Tailwind palettes drift from the
+            theme over time and never get dark-mode tuned. */}
+        <div className="bg-dracula-red/10 absolute inset-0 rounded-full" />
+        {/* Orange (caution) side zones — `--dracula-orange` matches the
+            marker's out-of-band tint. */}
         <div
-          className="absolute top-0 h-full bg-yellow-500/12"
+          className="bg-dracula-orange/15 absolute top-0 h-full"
           style={{
             left: `${yellowLeftStart}%`,
             width: `${greenStart - yellowLeftStart}%`,
           }}
         />
         <div
-          className="absolute top-0 h-full bg-yellow-500/12"
+          className="bg-dracula-orange/15 absolute top-0 h-full"
           style={{
             left: `${greenEnd}%`,
             width: `${yellowRightEnd - greenEnd}%`,
           }}
         />
-        {/* Green zone */}
+        {/* In-band green zone — `--dracula-green`. */}
         <div
-          className="absolute top-0 h-full bg-green-500/20"
+          className="bg-dracula-green/20 absolute top-0 h-full"
           style={{
             left: `${greenStart}%`,
             width: `${greenEnd - greenStart}%`,