CSS HEX Color Generator

The css hex color generator turns a picked colour into the canonical six-digit upper-case hex string, with its rgb(), rgba(), hsl() and oklch() equivalents on the rows below.

What is CSS HEX Color Generator?

Hex is what design tokens, style guides and review diffs are written in, and the css hex color generator exists to produce it without a transcription step: set the colour once and copy the string. The page opens on a single colour field with its swatch, and below it a panel of five rows — hex, rgb, rgba, hsl and oklch — that all move together. The hex row is the headline: six digits, upper case, no shorthand and no alpha, which is the spelling a token file can be diffed against.

• hex — the uppercase hex value, e.g. #3B82F6, which is the row this page is named for.
• rgb — decimal channels, rgb(59, 130, 246).
• rgba — the four-argument form with alpha fixed at 1, because the field here has no alpha control.
• hsl — hue in degrees with two decimals on each channel, hsl(217.22, 91.22%, 59.8%).
• oklch — perceptual lightness, chroma and hue for modern CSS.

Nothing on the page is arithmetic you have to trust by eye. The picker writes the value and the conversions come from the same parser and formatters the rest of the domain uses, which is why the hex row is the six-digit expansion rather than an echo of what you typed. Paste a three-digit shortcut or a named colour into the field and it normalises to that six-digit base before any row is rendered, so the same colour cannot be written two ways across two files. Because the five rows are built from one parsed value, they describe one colour; the difference between them is notation alone.

Treat the first row as the contract: hex for tokens means the same six upper-case digits in the token file, in the spec and in the review diff, and the four other rows exist as context rather than as output. When a palette is transcribed into code, the shortest reliable route is to copy each value through this page in turn rather than to retype the set from a screenshot, because a retyped value is a new value that merely looks close.

• No shorthand and no alpha in the hex row: three-digit input is expanded, and an 8-digit value is normalised to six, so an alpha never survives into the string.
• The rgba row always reads 1, and the alpha slider lives on another page.
• No colour names in the output: the panel stops at oklch, so a named colour is not among the results.
• Nothing is stored: the page opens on its default blue every visit, in one uppercase hex value.

Use it the way a token file uses hex — as the one spelling a system agrees on. Keep it open while a palette is transcribed into code and the values arrive canonical instead of by hand, which is how a case convention survives a second editor. Where the destination wants a ladder rather than a single value, generate the shades with the shade tools and copy each rung through here, since a derived rung that was copied cannot drift the way a rung typed from memory can. When a colour arrives from elsewhere and has to be checked before it is trusted, send it through the validator; when the whole notation set plus the packed integer is needed, the format converter prints more rows from the same colour.

How to use CSS HEX Color Generator

1. Set the colour with the picker field, or paste a value and let the field normalise it.
2. Read the canonical upper-case hex from the first row of the panel.
3. Copy the hex string into a token file, a spec or a stylesheet.
4. Use the rgb, hsl or oklch rows only if a destination explicitly asks for that notation.

When to use CSS HEX Color Generator vs related tools

Use this when hex is the contract — tokens, specs and hand-off documents. The RGB generator and the HSL generator are the same panel aimed at their own notations, the format converter covers hwb, lab, lch and the packed integer as well, and the palette CSS exporter writes a whole palette out as variables rather than one value at a time.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about CSS HEX Color Generator