CSS Color Converter
Convert a single colour between every CSS format, or paste a whole stylesheet and convert all of its colours in one go. The converter understands hex with alpha, rgb() and hsl() in both the old comma syntax and the modern space syntax, hwb(), oklab(), oklch() and all 148 named colours, and leaves selectors, comments and image URLs untouched.
- Runs in your browser
- No sign-up
- Free to use
Convert one colour
| HEX | ||
|---|---|---|
| RGB | ||
| HSL | ||
| HWB | ||
| OKLCH | ||
| OKLab | ||
| Name |
Convert every colour in a stylesheet
How to use CSS Color Converter
- Type or pick a colour to see it in every format.
- Or paste CSS into the stylesheet editor.
- Choose the target format and syntax options.
- Copy or download the converted CSS.
CSS Color Converter features
All CSS formats
HEX, RGB, HSL, HWB, OKLab, OKLCH and named colours.
Whole stylesheets
Converts every colour value in declarations and custom properties.
Safe matching
Ignores selectors like #fade, class names like .red-box, comments and url().
Alpha
Transparency is kept in every format, including 8-digit hex.
Syntax choice
Modern space syntax or legacy rgba()/hsla() with commas.
Contrast
WCAG contrast ratio with white and black text.
When to use CSS Color Converter
- Moving a design system to OKLCH for perceptually even palettes.
- Converting design tool hex values to rgb() with alpha.
- Making colour notation consistent across a codebase.
- Checking whether text on a colour will be readable.
CSS Color Converter FAQ
What is OKLCH?
A colour space with lightness, chroma (colourfulness) and hue that matches how people perceive colour. Changing only the lightness keeps the hue stable, which makes it ideal for generating tints, shades and accessible palettes. All current browsers support it.
Will the converted colours look different?
No. Every format describes the same sRGB colour; values are rounded slightly (hue to two decimals, percentages to one), which is invisible.
Why did some named colours become hex?
Only 148 colours have CSS names. When you convert to names, colours without an exact name are written as hex.
Does it change my selectors?
No. Only values after a property colon are converted. ID selectors like #fade, class names, custom property names, comments, strings and url() paths are left alone.
What about currentColor and var()?
They are not fixed colours and are kept as they are.
Is my CSS uploaded?
No. Everything runs in your browser.
Colour formats in CSS
CSS has grown from hex codes and a few keywords into a set of colour functions for different jobs. Hex is compact and universal, rgb() maps directly to screen channels, hsl() and hwb() are easier to adjust by hand, and the newer oklab() and oklch() describe colour the way people see it.
Modern CSS writes functions with spaces and an optional slash for alpha, such as rgb(79 70 229 / 50%), while older code uses commas and separate rgba() and hsla() functions. Both work in today’s browsers; the converter reads either and writes the one you choose.
OKLCH is increasingly used for design systems because equal steps in lightness look equal. Blue and yellow at the same OKLCH lightness appear equally bright, which is not true in HSL, so palettes built in OKLCH have more predictable contrast. Converting existing colours is the first step.
The stylesheet converter finds colour values only where colours can appear: in declarations after a property name. It skips comments, strings and url() paths and ignores words that only look like colour names, such as a grid area named red. Each colour is converted in place, so formatting and comments stay exactly as they were.
For a single colour the tool also shows the WCAG contrast ratio with white and black text. Normal text needs at least 4.5:1 for AA conformance and large text 3:1, so you can see immediately which text colour works on a background.