diff --git a/web/src/lib/components/ui/RangeSelector.svelte b/web/src/lib/components/ui/RangeSelector.svelte
index c07b97e38..83268d302 100644
--- a/web/src/lib/components/ui/RangeSelector.svelte
+++ b/web/src/lib/components/ui/RangeSelector.svelte
@@ -122,8 +122,8 @@
 
 	let palette = $derived(
 		muted && !interacting
-			? "--range-accent: var(--color-foreground-placeholder); --range-fill: var(--color-background-subtle)"
-			: "--range-accent: var(--color-background-info-emphasis); --range-fill: var(--color-background-info-subtle)"
+			? "--range-accent: var(--color-foreground-placeholder); --range-fill: var(--color-background-inset); --range-mid: var(--color-background-muted)"
+			: "--range-accent: var(--color-background-info-emphasis); --range-fill: var(--color-background-info-subtle); --range-mid: var(--color-background-info-subtle-hover)"
 	);
 
 	let list: HTMLDivElement;
@@ -256,7 +256,7 @@
 		{#if !muted}
 			{@render bandBox(
 				selectedRange,
-				"bg-background-inset rounded border border-border-default"
+				"bg-background-subtle rounded border border-border-default"
 			)}
 		{/if}
 		{@render pill(displayRange)}
diff --git a/web/src/lib/components/ui/RangeSelectorRow.svelte b/web/src/lib/components/ui/RangeSelectorRow.svelte
index 69e078235..60df9f095 100644
--- a/web/src/lib/components/ui/RangeSelectorRow.svelte
+++ b/web/src/lib/components/ui/RangeSelectorRow.svelte
@@ -22,7 +22,10 @@
 		<GraphCell
 			band={displayed}
 			fill={displayed !== "middle"}
-			style="--graph-line: var(--range-accent); --graph-fill: var(--range-fill)"
+			style="--graph-line: var(--range-accent); --graph-fill: var(--range-mid); --graph-dot: {displayed ===
+			'middle'
+				? 'var(--range-mid)'
+				: 'var(--range-accent)'}"
 			class="absolute inset-y-0 left-0"
 		/>
 	</div>