Motion Design

Search intent: color animation css transition oklch hover states loading skeleton screen design

Color in Motion: Designing Transitions, Hover States, and Loading Colors That Work

Motion changes how color is perceived. This guide covers the perceptual phenomena unique to animated color — chromatic flicker, saturation amplification through transition, and why OKLCH is the correct interpolation space for color animation. Practical rules for hover states, skeleton screens, and brand reveal animations.

Motion DesignCSSOKLCHAnimation

Key points

CSS interpolates transitions and gradients in sRGB by default, which creates visible brightness dips (muddy gray intermediates) when transitioning between saturated hues. Use `transition: color 200ms` with OKLCH interpolation via CSS Color Level 4: `background: oklch(from var(--color-a) l c h / 1)` combined with `color-mix(in oklch, color-a, color-b)` for correct perceptual interpolation.

Saturation amplification through transition: the visual system compares transition endpoints in rapid succession, making the higher-saturation state appear more saturated than it does as a static color. Use this deliberately — low saturation entry state + high saturation exit state amplifies perceived vibrancy at key reveal moments.

WCAG 2.1 SC 2.3.1 sets a 3 Hz flicker threshold for large areas. Saturated red-green alternation is the highest-risk combination and should be avoided in any animated element. High-contrast hue alternation above 4 Hz — even for non-red-green pairs — can create uncomfortable flicker for photosensitive users.

Perceptually consistent hover states across all hues

Standard practice (adjust hex or HSL lightness by a fixed amount) produces inconsistent perceived hover contrast across hues because HSL lightness is not perceptually uniform. A +10 HSL lightness step reads as very large for blue but very small for yellow. Solution: design hover states in OKLCH. Step L (perceptual lightness) by +8 for light-mode hover, -8 for dark-mode hover. Chroma (C) and hue (H) stay constant. This produces visually equal contrast steps regardless of starting hue. Implement with: `oklch(calc(l + 0.08) c h)` where l, c, h are the OKLCH values of the base color.

Skeleton screen color rules for product designers

Skeleton pulse animation between two states: (1) Base skeleton color: 6-10 OKLCH lightness units below the background surface. Too close and it disappears; too far and it distracts. (2) Pulse highlight color: 3-5 OKLCH lightness units above the base skeleton color — a gentle shimmer, not a flash. (3) Both skeleton states should carry the same slight chroma as the background surface. A warm-white background should produce warm-tinted skeleton colors, not pure gray. (4) Animation: ease-in-out, 1.4-1.8s period, looping. Faster reads as anxious; slower reads as broken. (5) On dark surfaces, the skeleton pulse direction reverses: the base skeleton is lighter than the background by 6-10 OKLCH units, and the pulse darkens toward the background value.

Practical next step

Move from the guide into a concrete palette lane

Guides explain the use case. Collections prove the taste. Packs handle the export and implementation layer.

Browse packs More guides

Related guides

Data Visualization

Color in Data Visualization: Sequential, Categorical, and Diverging Palettes Explained

Data visualization color follows a different set of rules from brand or UI color — the palette must encode information accurately, survive colorblindness, and remain legible at small scales and in print. This guide covers the three palette types every data designer needs, how to build each, and the most common mistakes that make charts misleading.

Color Management

Wide Gamut and HDR Color for Designers: P3, OKLCH, and When It Actually Matters

HDR displays and wide-gamut color spaces are now standard on the devices your users have — but most design workflows still produce only sRGB output. This guide explains when the gap between sRGB and wide gamut is visible and consequential, how to progressively enhance your color palette for P3 displays, and what tools in CSS and Figma make wide-gamut color practical today.

Tailwind Guide

Tailwind Color Tokens Without Losing the Design System in Handoff

A guide to structuring Tailwind color tokens so the system stays aligned with CSS variables, JSON exports, and design files instead of fragmenting during implementation.