Color converter
Converts between HEX, RGB, HSL and CSS colour names — useful when editing a design or tuning a theme.
Convert color between the different formats (hex, rgb, hsl and css name)
Steps and notes
What is Color converter?
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.
- Type a value in any format, or use the colour picker
- The other formats update automatically
- Copy the one you need
- 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.
Frequently asked questions
- 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.
Category: Converter
Color tools workflow
Image Color Picker → Color converter → Color Contrast Checker — Pass or Fail WCAG AA and AAA