Why do hex and hsl describe the same colour differently?

They are different coordinate systems over the same perceived colour. Hex is a compact byte triple for the screen; HSL re-expresses those bytes as hue, saturation and lightness, which is how people actually reason about a colour. Neither is more correct — pick the one your consumer expects.

Which format should I use in CSS?

Any of them: modern CSS accepts hex, rgb(), hsl(), lch() and the rest. hsl() and lch() are easier to derive variants from (shift the hue or lightness), while hex is the shortest and the most portable across old tooling.

Does the tool support alpha transparency?

The formats shown are the colour itself. Where a channel is not part of a given format — CMYK and the named colours have no alpha — the transparency is simply not representable there, so carry alpha in the rgba() or hsla() form.

Which formats does it actually output?

Seven plus a picker: hex, rgb, hsl, hwb, lch, cmyk and a CSS colour name. CMYK, HWB and LCH come from Colord plugins, so they are computed conversions rather than lookups.

The colour name looks wrong for my colour — why?

It is reporting the closest named CSS colour, not an exact match. Most colours have no CSS name at all, so the name is a hint about what a colour resembles, never a specification. Use hex when the value has to be right.

Color converter — Guide

Convert color between the different formats (hex, rgb, hsl and css name)

What it is and when to use it

Convert one colour into every format you may need it in — hex, rgb, hsl, hwb, lch, cmyk and the nearest CSS colour name — from a single picker, so a design token that arrives as #ff6600 can leave as an hsl() triple or as a print-oriented CMYK quadruple. Conversions run in the browser through Colord; nothing is sent anywhere. Useful exactly where colour formats collide: a brand spec in hex, a CSS custom property in hsl, a Figma export in lch, a print sheet in cmyk.

Converts between HEX, RGB, HSL and CSS colour names — useful when editing a design or tuning a theme.

How to use it

Type a value in any format, or use the colour picker
The other formats update automatically
Copy the one you need

A worked example

Fill in a sample colour

#ff6600

Copy this into the tool, or open Color converter

Things that trip people up

CMYK and LCH are computed conversions, not values measured from a print proof — check a real profile before sending work to print.
The colour name is the nearest CSS keyword, which can be visibly off from your actual colour.

Questions people ask

Why do hex and hsl describe the same colour differently?: They are different coordinate systems over the same perceived colour. Hex is a compact byte triple for the screen; HSL re-expresses those bytes as hue, saturation and lightness, which is how people actually reason about a colour. Neither is more correct — pick the one your consumer expects.
Which format should I use in CSS?: Any of them: modern CSS accepts hex, rgb(), hsl(), lch() and the rest. hsl() and lch() are easier to derive variants from (shift the hue or lightness), while hex is the shortest and the most portable across old tooling.
Does the tool support alpha transparency?: The formats shown are the colour itself. Where a channel is not part of a given format — CMYK and the named colours have no alpha — the transparency is simply not representable there, so carry alpha in the rgba() or hsla() form.
Which formats does it actually output?: Seven plus a picker: hex, rgb, hsl, hwb, lch, cmyk and a CSS colour name. CMYK, HWB and LCH come from Colord plugins, so they are computed conversions rather than lookups.
The colour name looks wrong for my colour — why?: It is reporting the closest named CSS colour, not an exact match. Most colours have no CSS name at all, so the name is a hint about what a colour resembles, never a specification. Use hex when the value has to be right.

Next steps

Open the Color converter tool

Spotted something wrong on this page? Tell us via Contact Us