CSS Color Formatter

The css color formatter writes one picked colour as five ready-to-paste strings — upper-case hex, rgb(), rgba(), hsl() and oklch() — so whichever css notation a stylesheet needs is one copy away.

What is CSS Color Formatter?

The css color formatter is the wide page in the notation cluster: rather than producing a single format, it produces five at once. One colour field sits above a panel of five rows — hex, rgb, rgba, hsl and oklch — and every row shows its value in monospace with a copy button beside it. The panel updates as the field changes, so the strings are never stale, and because all five are built from one parsed value they cannot disagree with each other.

• hex — six digits, upper case, the form tokens and diffs are written in.
• rgb — decimal channels with a space after each comma, as a person would type them.
• rgba — the four-argument form with the alpha fixed at 1, because the field has no alpha control.
• hsl — hue in degrees with saturation and lightness as percentages.
• oklch — perceptual lightness, chroma and hue, printed as native CSS.

The implementation is deliberately thin, because there is nothing to decide. The five strings come from the same conversion the rest of this domain uses, and the field itself normalises what you type: a three-digit shortcut, a named colour or a pasted rgb() value is parsed and reduced to one six-digit base before any row is rendered. That is why the panel is trustworthy for a handoff document — it cannot print a value it did not parse, and it cannot print five notations of five different colours.

The page exists for the moment someone needs to format a color as css rather than to convert a colour between systems: five css color values, one source value, and no decisions left to make. When a hand-off document, a README and a stylesheet comment all quote from the same panel, the code that ships and the note that describes it stay in step, and a reviewer comparing the two is comparing two spellings of one colour rather than two colours.

Its limits are the limits of a formatting page.

• No alpha control anywhere, so translucent values are out of scope and the rgba row always reads 1.
• Bare values, not declarations: the panel hands over the string and leaves the property name to you.
• No preprocessor or component syntax. SCSS and LESS variable blocks and CSS-in-JS objects belong to the output family rather than to this page.
• Alpha in an input is discarded rather than shown, because the field normalises to six-digit hex before the rows are built.

Reach for this page when a note, comment or README has to quote the same colour in more than one css notation, and reach for a single-notation generator when only one format matters and four of the five rows would be noise. Where the destination needs hwb, lab, lch or a packed integer as well, the format converter covers more ground; where a value already exists and needs checking rather than formatting, the validator is the right gate. The reason to keep this page open during a build is narrower but real: it makes the copy in the document and the value in the stylesheet the same string, which is the failure this family of tools exists to prevent. Five strings from one source colour is a small promise, but it is the promise that stops a token and its documentation from drifting apart.

How to use CSS Color Formatter

1. Pick the colour with the field at the top of the page.
2. Scan the five rows — hex, rgb, rgba, hsl and oklch all update together.
3. Copy the notation your stylesheet or document needs with that row's button.
4. Paste the value and write the property name yourself; the panel returns strings, not declarations.

When to use CSS Color Formatter vs related tools

Use this when a document or comment needs the same colour in more than one css notation. The HEX generator, the RGB generator and the HSL generator are the same panel narrowed to a single expected format, and the format converter adds hwb, lab, lch and the packed integer when the destination needs them.

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 Color Formatter