We're live on Product Hunt!Support us
ColorArchive

A curated color library with 5,000+ algorithmically generated colors. Browse, search, save favorites, and export palette tokens — no account required.

CollectionsFamiliesNotesGuidesFree ResourcesConvertColorblindAboutSupportUpdates
Ready for static export
Privacy·Terms·Refunds·Cookies·Commerce Disclosure
colorarchive.org · © 2026 ColorArchive
Skip to content
ColorArchive
ProLog in
ArchiveAll ColorsCollections
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.

Featured collection
Candy Pop

Coral, lemon, mint, lavender, and sky — saturated accents for social, D2C, and campaign work.

Open collectionAll collections
Open next
Color MixerSignal Bright collectionDesign Token Generator
Practical next step

Move from the guide into a concrete palette lane

Guides explain the use case. Collections prove the taste. Pro handles the export and implementation layer.

Upgrade to ProMore guides
Related guides
Motion Design
Color in Motion Design: Timing, Transitions, and Temporal Color Narratives
Motion design introduces a dimension that static design never has to manage: color changing over time. Effective color transition design requires an understanding of timing semantics, saturation trajectories, and how color can carry narrative weight across an animation or sequence.
Advanced Color
Color in Motion Design: Temporal Color and Animation Principles
Static color theory doesn't cover color in motion. Easing, interpolation, frame rate, and temporal contrast change how color works — here's the framework for designing color that moves.
Pastel Branding Guide
Pastel Color Palette for Branding That Feels Modern, Not Childish
How to use pastel colors in brand work without drifting into baby-shower territory — including how to anchor soft hues with structure, contrast, and intentional pairings.