Turn Hex Colors Into CSS Variables
Put one name and hex value on each line, choose a prefix and save the CSS file. The default palette becomes variables such as --brand-ink and --brand-accent, plus paired --brand-ink-text values chosen by measured contrast; the JSON and CSV views preserve the same canonical names and numbers for other systems.
CSS custom properties
One colour variable and one suggested text-colour variable per token, inside a :root block.
Structured palette JSON
Names, canonical hex and RGB values, relative luminance, suggested black or white text and its contrast ratio.
Every palette colour
| ink | #1f2937 | 31, 41, 55 | 0.02 | #ffffff | 14.68 |
| paper | #f8fafc | 248, 250, 252 | 0.95 | #000000 | 20.07 |
| accent | #ea980e | 234, 152, 14 | 0.4 | #000000 | 9 |
| success | #16803a | 22, 128, 58 | 0.16 | #ffffff | 5.02 |
Results are provided as-is, with no warranty of accuracy. The method and its sources are published below so you can check the working.
Three-digit hex values are expanded before export, so every CSS and JSON entry has one canonical six-digit spelling.
Names become lower-case kebab-case tokens, and collisions receive numeric suffixes rather than silently overwriting an earlier colour.
The text-colour companion is a measured choice between black and white, not a guess based on the average RGB channel.
How it works
How it is done
- Parse one name plus an opaque three- or six-digit hex colour per non-empty line, expanding shorthand to canonical lower-case six-digit RGB.
- Normalise names and the prefix to lower-case ASCII kebab-case, adding -2, -3 and later suffixes rather than overwriting duplicate tokens.
- Linearise each encoded sRGB channel, combine relative luminance with the WCAG weights and compare the resulting contrast against black and white.
- Export one colour and suggested-text custom property per token in CSS and the same values, channels, luminance and ratio as structured JSON.
What it assumes
- Every entered colour is opaque. Alpha colours are refused because their displayed contrast depends on an unstated surface underneath.
- The reported text choice compares only #000000 and #ffffff; it does not search every possible foreground colour.
- A higher measured ratio does not by itself make a complete component accessible; type size, weight, states, focus, non-text cues and actual rendered colours still matter.
- Hex values are interpreted as sRGB and no ICC profile or wide-gamut colour space is attached to the exported tokens.
Common questions
What happens to spaces in colour names?
Spaces and punctuation collapse to hyphens, accents are removed where possible, and leading or trailing separators disappear before the CSS variable is written.
Why does each colour have a second text variable?
That companion stores whichever of black or white produces the higher WCAG contrast ratio against the swatch, making the safer pairing reusable.
Sources
The full method, worked example and every assumption behind this figure are on Colour Palette File Maker.