Color Space Morph
Two CSS strips side by side compare sRGB and OKLCH interpolation on the same colors — the gradient midpoint reveals everything.
You'll get access to the interactive demo with a free account.
This effect is part of Effect.Labs — 811 vanilla effects, some free, some premium. Backgrounds has 50 effects, including 6 free. Explore the category →
3 usage examples
How it works
The effect relies entirely on CSS Color Level 4: each strip is a background: linear-gradient(90deg in <color-space>, …). The in srgb or in oklch keyword tells the browser which space to use for intermediate colors — same start and end colors, radically different paths.
The sRGB strip interpolates R, G, B components linearly in the non-linear sRGB space. Traveling from orange (H ≈ 30°) to blue-violet (H ≈ 260°), the intermediate RGB values accumulate a parasitic green component — the midpoint shifts toward a brown-gray the eye reads as 'muddy'.
The OKLCH strip works in Lightness-Chroma-Hue coordinates. Perceptual lightness stays constant along the gradient and the hue pivots directly from 30° to 260° — intermediate colors remain vivid and saturated, never crossing a gray zone.
On hover, a :hover rule activates a second color pair (green → pink, H 120° → H 330°) and expands each strip from 40 px to 50 px with a transition: 1s. No JavaScript is involved: the effect is 100% CSS, zero dependencies.
Accessibility
- prefers-reduced-motion not implemented: the effect contains no
@media (prefers-reduced-motion: reduce)rule. The 1 s hover transition plays for all users. Add@media (prefers-reduced-motion: reduce) { .colorspace-strip { transition: none; } }if your context requires it. - Interaction is hover-only: no
:focusstate triggers the comparison. Keyboard and mobile touch users see the default state only. - The
sRGBandOKLCHlabels are white text on a colored gradient. Thetext-shadowaids readability, but contrast varies by gradient position and does not guarantee WCAG AA across all tones. - The
.colorspace-containercarries noroleoraria-label. For a documentation page, addrole="img" aria-label="sRGB vs OKLCH gradient comparison". - Being 100% CSS, the effect works without JavaScript and creates no keyboard trap.
Browser compatibility
Requires the in <color-space> syntax from CSS Color Level 4 in gradients, available since 2023 in all modern engines.
In older browsers that ignore <code>in oklch</code>, both strips render with sRGB interpolation and look identical — the comparison is lost, but the page stays functional with no errors.
The code
HTML structure to paste into your page (CSS + JS available with a premium account):
<div class="chroma-demo colorspace-container">
<div class="colorspace-strip colorspace-srgb">
<span class="cs-label">sRGB</span>
</div>
<div class="colorspace-strip colorspace-oklch">
<span class="cs-label">OKLCH</span>
</div>
<span class="colorspace-note">hover: same colors, different paths</span>
</div>Full HTML + CSS + JS, copy-paste ready — with hundreds of premium effects.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| .colorspace-srgb { background } | oklch(.65 .28 30) → oklch(.6 .25 260) | Start and end colors of the sRGB strip (orange → blue-violet). Use the same values in the OKLCH strip — only the in srgb / in oklch keyword changes. |
| .colorspace-container:hover strip background | oklch(.7 .3 120) → oklch(.55 .28 330) | Second color pair revealed on hover (green → pink). Pick a pair that maximizes the visible gap between the two modes. |
| .colorspace-strip { height } | 40px | Height of each strip. 24 px for a compact widget, 60–80 px for a hero showcase or educational demo. |
| hover strip height | 50px | Strip height on hover. Match the default height to remove the zoom, or increase to accentuate the reveal. |
| .colorspace-strip { transition } | 1s | Hover transition duration. 0.3 s = snappy, 2 s = cinematic. Use transition: none for motion-reduced environments. |
| .colorspace-container { gap } | 12px | Vertical gap between strips. 4–24 px depending on desired density. |
| .colorspace-container { background } | #0f0f1a | Container background. Adapt to your page palette (transparent, brand color, etc.). |
| .colorspace-strip { width } | 90% | Strip width relative to the container. 100% for edge-to-edge, 70% for a centered airy look. |
FAQ
linear-gradient rules with different interpolation spaces and a :hover pseudo-class. No scripts, no libraries, no frameworks required. Copy the HTML and CSS — it's ready immediately.in <color-space> gradient syntax is available since Chrome 111, Firefox 113, and Safari 16.2 (2023).
