CSS Colour Converter

How the CSS Colour Converter works

CSS colour converter: syntax by syntax

CSS now has nine ways to write a colour, and stylesheets accumulate a mix of them: hex from the design tool, rgba() from an old framework, hsl() from a theme, oklch() from a modern palette generator. This converter reads all of them and writes any of them, so a codebase can be moved to one consistent syntax or a single value can be checked in the space you are thinking in.

What it reads. Three-, four-, six- and eight-digit hex with or without the hash; rgb() and rgba() in both the comma-separated legacy form and the space-separated modern form, with channels as numbers or percentages; hsl() and hsla(); hwb(); lab() and lch(); oklab() and oklch(); all 148 named colours; and transparent. Hue accepts deg, rad, grad and turn. Alpha is read from the eighth hex digit, a fourth legacy argument or a / value suffix, and is carried through to every output format. A trailing semicolon is ignored, and a leading property name such as color: is dropped, so you can paste straight from a stylesheet.

The spaces. Hex, RGB, HSL and HWB are all views of the same sRGB colour, so converting between them is lossless. Lab and LCH are the CIE spaces, which CSS defines relative to a D50 white point; this converter applies the same chromatic adaptation the specification does, so its numbers match what a browser computes. Oklab and OKLCH are the newer perceptual spaces that most modern palette work uses, because equal steps in lightness or chroma look equal to the eye. Converting into any of these from sRGB is exact; converting out of them can land outside the sRGB gamut, in which case the channels are clipped to the nearest representable value.

Output formatting. The modern space-separated syntax is used for every function, with alpha after a slash, because that is what CSS Color 4 specifies and every current browser accepts. RGB (legacy) is there for tools and older codebases that still want commas and rgba(). Numbers are rounded to sensible precision: whole values for RGB, one decimal for HSL and HWB, and four decimals for the small Oklab axes where rounding matters.

Bulk use. Because one line in gives one line out, you can paste a whole block of custom properties' values, convert them, and paste the result back in the same order. Lines that cannot be read are returned as a CSS comment so the line count stays aligned.

Related tools