diff --git a/src/uix/eidos/components/color-picker/color-picker.css b/src/uix/eidos/components/color-picker/color-picker.css
index 76e436adc..eb922d442 100644
--- a/src/uix/eidos/components/color-picker/color-picker.css
+++ b/src/uix/eidos/components/color-picker/color-picker.css
@@ -297,22 +297,39 @@
  * so the slider's track shows the gradient, with a transparency checker
  * behind it (via the wrapper's own ::before, z-index -1) for alpha. */
 
-[data-color-picker-channel-slider] {
+/* Note on stacking: in the soma, the same `<div>` carries both
+   `[data-slider]` (from SliderProvider.props) and
+   `[data-color-picker-channel-slider]` (from our mergeProps). So both
+   pseudo-elements live on the SAME element:
+     ::before — owned by the slider recipe; it's the track strip.
+     ::after  — used here for the transparency checker behind the track.
+   We override the slider's `::before` background to paint the channel
+   gradient (rainbow for hue, white→solid for sat/bright, transparent→
+   solid for alpha) and put the checker on `::after` with z-index -1 so
+   it shows through wherever the gradient is transparent (alpha case). */
+
+[data-color-picker-channel-slider][data-slider] {
 	position: relative;
 	inline-size: 100%;
 	isolation: isolate;
 }
 
-/* Transparency checker sits BEHIND the slider track for the alpha channel
-   (where the gradient ramps to transparent). For non-alpha channels the
-   gradient is opaque, so the checker stays hidden. */
-[data-color-picker-channel-slider]::before {
+/* The slider's track (::before) — paint with the channel gradient. */
+[data-color-picker-channel-slider][data-slider]::before {
+	background: var(--cp-channel-gradient, var(--slider-track-bg)) !important;
+	border: var(--border-width) solid var(--color-border-subtle);
+	box-sizing: border-box;
+}
+
+/* Transparency checker BEHIND the track. Same strip geometry as the
+   slider's ::before so the cells align with the gradient. */
+[data-color-picker-channel-slider][data-slider]::after {
 	content: '';
 	position: absolute;
-	z-index: 0;
+	z-index: -1;
 	inset-inline: 0;
 	inset-block-start: 50%;
-	block-size: var(--slider-track-size-md);
+	block-size: var(--_slider-track-size, var(--slider-track-size-md));
 	transform: translateY(-50%);
 	border-radius: var(--slider-track-radius);
 	background-image: var(--cp-checker);
@@ -325,15 +342,10 @@
 	pointer-events: none;
 }
 
-/* The slider's own track (::before of [data-slider]) gets the channel
-   gradient. Slider.Range is hidden because color sliders show the full
-   channel range as a single gradient, not a "left-of-thumb" fill. */
-[data-color-picker-channel-slider] [data-slider]::before {
-	background: var(--cp-channel-gradient, var(--slider-track-bg));
-}
-
-[data-color-picker-channel-slider] [data-slider-range] {
-	background: transparent;
+/* Slider.Range fill is irrelevant for color sliders — the full gradient
+   speaks for itself. */
+[data-color-picker-channel-slider][data-slider] [data-slider-range] {
+	background: transparent !important;
 }
 
 /* Reinforce thumb visibility against any colour: bright ring + dark shadow.
diff --git a/web/routes/uix/components/color-picker/+page.svelte b/web/routes/uix/components/color-picker/+page.svelte
index bd022ecaf..47e190197 100644
--- a/web/routes/uix/components/color-picker/+page.svelte
+++ b/web/routes/uix/components/color-picker/+page.svelte
@@ -245,11 +245,29 @@
 					<ColorPicker.Portal>
 						<ColorPicker.Content>
 							<ColorPicker.Area />
-							<ColorPicker.ChannelSlider channel="hue" />
+
+							<!-- Channel sliders with explicit row labels so users
+							     know what each gradient drives. -->
+							<div class="cp-slider-row">
+								<span class="cp-slider-label">Hue</span>
+								<ColorPicker.ChannelSlider channel="hue" />
+							</div>
 							{#if enableAlpha}
-								<ColorPicker.ChannelSlider channel="alpha" />
+								<div class="cp-slider-row">
+									<span class="cp-slider-label">Alpha</span>
+									<ColorPicker.ChannelSlider channel="alpha" />
+								</div>
 							{/if}
 
+							<!-- Live preview + segmented channel input on one row. -->
+							<div class="cp-preview-row">
+								<ColorPicker.ValueSwatch />
+								<div class="cp-preview-text">
+									<ColorPicker.ValueText />
+									<span class="cp-preview-format">{format.toUpperCase()}</span>
+								</div>
+							</div>
+
 							<ColorPicker.ChannelInput>
 								{#snippet children({ segments }: ChannelInputSnippetProps)}
 									{#each segments as { part, value }, i (`${part}-${i}`)}
@@ -259,6 +277,7 @@
 								{/snippet}
 							</ColorPicker.ChannelInput>
 
+							<div class="cp-section-label">Preset colors</div>
 							<ColorPicker.SwatchGroup aria-label="Preset colors">
 								{#each presets as preset}
 									<ColorPicker.SwatchTrigger color={preset}>
@@ -268,8 +287,9 @@
 								{/each}
 							</ColorPicker.SwatchGroup>
 
-							<div style="display: flex; gap: var(--uix-space-2); align-items: center; justify-content: flex-end;">
-								<ColorPicker.EyeDropper />
+							<div class="cp-eyedropper-row">
+								<ColorPicker.EyeDropper aria-label="Pick color from screen" />
+								<span class="cp-eyedropper-label">Pick from screen</span>
 							</div>
 
 							{#if showFooter && (showClear || showCancel || showClose)}
@@ -656,3 +676,61 @@
 		</section>
 	{/if}
 </div>
+
+<style>
+	.cp-slider-row {
+		display: flex;
+		align-items: center;
+		gap: var(--uix-space-2, 0.5rem);
+	}
+	.cp-slider-label {
+		flex: 0 0 3.25rem;
+		font-size: 11px;
+		font-weight: 500;
+		color: var(--uix-text-faint);
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
+	.cp-preview-row {
+		display: flex;
+		align-items: center;
+		gap: var(--uix-space-3, 0.75rem);
+		padding: var(--uix-space-2, 0.5rem);
+		border-radius: var(--uix-radius-sm);
+		background: var(--uix-surface-sunken);
+	}
+	.cp-preview-row :global([data-color-picker-value-swatch]) {
+		inline-size: 2rem;
+		block-size: 2rem;
+	}
+	.cp-preview-text {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		min-inline-size: 0;
+	}
+	.cp-preview-format {
+		font-size: 10px;
+		color: var(--uix-text-faint);
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+	}
+	.cp-section-label {
+		font-size: 11px;
+		font-weight: 500;
+		color: var(--uix-text-faint);
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		margin-block-start: var(--uix-space-1, 0.25rem);
+	}
+	.cp-eyedropper-row {
+		display: flex;
+		align-items: center;
+		gap: var(--uix-space-2, 0.5rem);
+		justify-content: flex-end;
+	}
+	.cp-eyedropper-label {
+		font-size: 12px;
+		color: var(--uix-text-faint);
+	}
+</style>