Live preview Toggles
OKLCH Heat Toggle
Off and on colours sit at the same OKLCH lightness, so only the hue appears to move.
#oklch CSS effects
11 free, pure-CSS effects match the "oklch" tag. Each is copy-ready and needs no library or build step.
Live preview Tooltips
OKLCH Tone Tooltip
Bubble, arrow and trigger colours are all mixed from one OKLCH hue in OKLAB.
Live preview Badges
OKLCH Tone Scale Badges
Six badges built from one hue by walking OKLCH lightness in even steps.
Live preview Backgrounds
OKLCH Dawn
A dawn sky mixed in OKLCH, so the hue ramp keeps even lightness with no grey band.
Live preview Buttons
OKLCH Pulse Button
Hover and active shades are derived from one base colour with color-mix in OKLAB.
Live preview Checkboxes
OKLCH Mint Checkbox
Hover, checked and focus shades are all mixed from one OKLCH base in OKLAB space.
Live preview Checkboxes
OKLCH Ramp Checkbox
Rest, hover, checked and ring shades are one OKLCH hue mixed at four steps.
Live preview Forms
OKLCH Field States
Rest, hover and focus shades of one field are all mixed from a single OKLCH accent.
Live preview Hover
OKLCH Lift Tile
One OKLCH base colour feeds the surface, border and shadow through color-mix.
Live preview Loaders
OKLCH Spectrum Loader
Every segment is one OKLCH hue step, so the ring stays perceptually even in brightness.
Live preview Navigation
OKLCH Menu Bar
Bar, hover and active layers are three color-mix steps off a single OKLCH accent.