Color transition
Smoothly transition between oklch colors on hover — perceptually uniform and vibrant.
Quick implementation
.color-swatch {
background-color: oklch(0.55 0.15 265);
transition: background-color 0.5s ease;
}
.color-swatch:hover,
.color-swatch:focus-visible {
background-color: oklch(0.70 0.20 145);
}
/* Text color transition */
.color-link {
color: oklch(0.72 0.19 265);
transition: color 0.3s ease;
}
.color-link:hover,
.color-link:focus-visible {
color: oklch(0.80 0.16 85);
}
@media (prefers-reduced-motion: reduce) {
.color-swatch,
.color-link {
transition-duration: 0.01s;
}
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building interactive color-themed UI.
Goal: Smoothly transition background-color and/or color between two oklch values on hover, producing a perceptually uniform shift.
Technical constraints:
- Use oklch() for all color values — no hex or rgba().
- Transition background-color and/or color with ease timing, 0.3–0.5s duration.
- oklch interpolation avoids the muddy greys that rgb interpolation causes between complementary hues.
- Include :focus-visible so keyboard users see the transition too.
- Keep both oklch lightness values in the 0.4–0.8 range for WCAG contrast on dark backgrounds.
Framework variant (pick one):
A) Vanilla HTML + CSS only.
B) React component — accept fromColor and toColor props (oklch strings), render a <button> or <div>.
Edge cases to handle:
- Respect prefers-reduced-motion: reduce duration to near-instant.
- If the browser doesn't support oklch, provide a fallback with a @supports block.
- Ensure sufficient contrast ratio (4.5:1 minimum) for any text over the transitioning background.
Return CSS only.Why this matters in 2026
Browsers now interpolate oklch() natively in transitions, which means color shifts travel through perceptually uniform space instead of the sRGB gamut. The practical result: a transition from blue to orange no longer dips through murky grey midpoints. This makes hover effects, theme toggles, and data-visualization animations look dramatically more polished without any JavaScript color math.
The logic
Declare a starting background-color in oklch() and add transition: background-color 0.5s ease. On :hover or :focus-visible, set the target oklch() value. The browser interpolates lightness, chroma, and hue independently — lightness stays constant so the color never looks washed out, and the hue rotates through the shorter arc by default. For explicit control over the hue path you can add in oklch longer hue to a color-mix() or gradient, but plain transitions already use the shorter arc.
Accessibility & performance
Color transitions are paint-only — no layout recalculation required. Always pair colour changes with a non-colour cue (underline, border, icon shift) so the interaction is visible to users with color-vision deficiency. Wrap the transition in a prefers-reduced-motion check so the shift is near-instant for users who opt out of animation.