Skip to content

Design tokens · :root

CSS variables generator

Turn one anchor HEX into a Material-style numeric ramp (50–950). Pick the old-school sRGB mix if you want predictable “screen-space” steps, or flip to OKLCH when you care more about even lightness jumps — then export plain HEX, raw oklch(), or HEX with an OKLCH comment for humans reading the file later.

Scale ramp
CSS value format

Why this exporter exists

Spreadsheets of HEX are where design systems go to die. This tool turns one anchor into a numeric ramp of CSS custom properties you can paste into :root, with optional OKLCH-aware math when you care about even lightness more than legacy RGB mixing.

How to use it

  1. Choose sRGB mix vs OKLCH ramp — mix is predictable in reviews; OKLCH reduces muddy yellows on lifts.
  2. Pick HEX output, raw oklch(), or dual-line HEX + comment for mixed fleets.
  3. Set a prefix (brand, surface) so grep across repos stays sane.
  4. Copy the block, merge into your global stylesheet, then spot-check text colors with the contrast checker.

Skip straight export when…

You already publish tokens from Style Dictionary or Tokens Studio — treat this as a spike, not the source of truth pipeline.

Why two ramp modes exist

sRGB mixes match a decade of blog tutorials and many legacy Figma styles. OKLCH mode holds hue steadier while moving lightness, then walks chroma down when sRGB cannot represent the target — fewer surprises on hover rails, still not a substitute for a human colorist.

Handoff tips

  • The “HEX + comment” export helps teams migrating: modern browsers read OKLCH, older pipelines keep HEX.
  • Match Android output from the colors.xml generator so mobile does not fork.

Related tools

Tailwind, Android, contrast, and reading on tokens.

Tokens in plain CSS Blog: how teams ship :root without a build tool maze. Tailwind snippet Same ramp as theme.extend.colors for v3-style configs. Contrast checker Validate body and headline text on each ramp step.

Notes & FAQ

What if our scale uses names instead of numbers?

The 50–950 keys mirror common design language. Rename in your design doc or with find-and-replace in the export; the math does not depend on the label string.

How is the scale built?

sRGB mix blends your anchor toward white or black in RGB — quick, familiar, slightly uneven perceptually. OKLCH moves lightness/chroma in OKLCH while holding hue, then reduces chroma when the color would clip out of sRGB. Neither replaces user testing; pair with the contrast checker.

Where do I paste the block?

Top of a global stylesheet inside :root { ... }, or inside a scoped selector if you use shadow DOM or CSS modules with care. Some teams split light/dark files — duplicate and adjust if that is your pattern.

Will OKLCH work in my target browsers?

Baseline is moving, but if you must support very old engines, keep HEX mode or the dual-line export. Always test in your minimum supported Safari/Chrome matrix.

Can I rename weights?

The numbers mirror common design-language scales (500 as anchor). Rename in your design docs if your system uses words instead — the CSS is just a starting point.