Should I use HEX or HSL channels in the variables?

Channel-only HSL (--brand-50: 220 80% 95%) lets you build alpha variants with `hsl(var(--brand-50) / 0.5)` — much more flexible than --brand-50: #ff0000 which forces a separate alpha variable.

Can it generate dark-mode counterparts?

Yes — tick the dark-mode toggle and the tool emits a second [data-theme='dark'] block with inverted-lightness variants. Pair with prefers-color-scheme or a class-based switcher.

What naming scheme is best?

Pick semantic names (--text-primary, --bg-elevated) when possible. --color-50/100/.../900 ramps are good for primitive layers but mix in semantic aliases on top.

css variables · :root · design tokens · live

Generate CSS variables from a palette

Q: Is anything sent to a server?

No — runs entirely in your browser.

Paste <code>name color</code> pairs and get a <code>:root</code> block of CSS custom properties. Configurable prefix.

CSS Variable Generator

Vars

tokens

Prefix

--prefix

Output

126 chars

css

Status

ready

live

input · color

Name and color (one per line)

Format: name #hex — one per line. Color can be any CSS color value.

output · preview

Live swatches

--c-primary

#3b82f6

--c-accent

#f59e0b

--c-background

#ffffff

--c-text

#111827

--c-muted

#6b7280

:root {
  --c-primary: #3b82f6;
  --c-accent: #f59e0b;
  --c-background: #ffffff;
  --c-text: #111827;
  --c-muted: #6b7280;
}

Quick Start

How to convert a palette to CSS variables

List your name color pairs, pick a prefix, copy the :root declaration.

01
List name + color
One per line: token name followed by HEX/RGB/HSL/OKLCH.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
inputOKLCHCSS Color 4perceptuallive
pairs · colorlist · sRGB
```
primary #3b82f6
```
loaded · normalisedOKLCH · ready
02
Pick a prefix
Common: c-, color-, brand-. Empty for none.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
prefixhex · rgb · hslP3gamut-mappedlive
prefix · optionsc- · live
```
--c-primary
```
options applied · livelive
03
Preview swatches
Each row shows the variable name and a live swatch.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
previewWCAG 2.2APCAAA · AAAcontrast
vars · convertedlive · ready
```
5 vars
```
converted · liveWCAG-aware
04
Copy :root
Paste directly into your global stylesheet.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
shipclipboardCSS varspalette JSONblob
ok · copiedready · done
```
:root { … }
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to generate CSS variables

Design systems, theming, dark mode.

Design system seeding

Bootstrap a CSS variables file from a Figma palette. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Light + dark themes

Generate two :root blocks; switch via data-theme. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Brand-specific overrides

Per-tenant prefixes for multi-brand sites. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Migration

Move inline HEX into one canonical variables block. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Quick prototyping

Start a new project with a clean variable set. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Cross-tool

Drop into PostCSS, Tailwind v4, or styled-components. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

What color formats are accepted?

Any valid CSS color — HEX, rgb(), hsl(), oklch(), named colors, even keywords like currentColor.

Can I generate two :root blocks?

Run the tool twice with different inputs / prefixes.

Does it sort alphabetically?

No — order matches your input. Sort manually if you prefer.

Can I use kebab-case names?

Yes — names are inserted verbatim after the prefix.

Is anything sent to a server?

No — parsing runs entirely in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!