HSL to HEX Converter
Convert HSL to HEX and back, with the maths written out.
Color Format Converter
One colour, every notation — HEX, RGB, HSL, HWB, LAB, LCH and OKLCH.
The colour
#f80, rgb(255 136 0), hsl(32 100% 50%), oklch(75% 0.18 55) or a CSS colour name.
Every format
The notations appear here
Quick Tool Overview
The Color Format Converter takes a colour in any notation and produces every other one at once — HEX, RGB, HSL, HWB, HSV, CMYK, LAB, LCH and OKLCH — with a swatch, the nearest CSS colour name, and a warning wherever a conversion is approximate.
- What it does
- Converts one colour into every notation at once
- You give it
- A colour in any format
- You get back
- Nine notations, each with a copy button
- Best for
- Design handoffs and moving colours between tools
About the Color Format Converter
Type a colour in any notation and every other notation appears at once. That is the whole tool: no direction to choose, no second field to fill in, because a colour does not have a direction — it has representations, and you usually want more than one of them.
Everything CSS understands is here. The familiar three — HEX, RGB and HSL — alongside HWB, which describes a colour as a hue plus how much white and black are mixed into it, and the perceptual spaces LAB, LCH and OKLCH that CSS Color 4 added. CMYK is included for print work, and HSV for the design tools that use it.
Where a colour cannot be shown exactly — an OKLCH value outside the sRGB gamut, or a CMYK conversion, which has no single correct answer without a colour profile — the tool says so rather than quietly rounding. Gamut mapping follows the CSS Color 4 method: hold lightness and hue, reduce chroma until the colour fits.
Key features of the Color Format Converter
No direction to choose
A colour has representations, not a direction, so every notation is produced together rather than one pair at a time.
The modern spaces included
LAB, LCH and OKLCH alongside the familiar three, because CSS Color 4 made all of them usable in a stylesheet.
Honest about limits
Out-of-gamut OKLCH and profile-dependent CMYK are flagged rather than quietly rounded into something wrong.
CSS Color 4 gamut mapping
When a colour will not fit in sRGB, lightness and hue are held and chroma reduced — not the channels clipped, which shifts the hue.
Nearest colour name
Matched with CIEDE2000, so it is the name a person would choose rather than the arithmetically closest one.
How to use the Color Format Converter
-
1
Enter a colour
Any notation at all: #f80, rgb(255 136 0), hsl(32 100% 50%), oklch(75% 0.18 55) or a CSS name.
-
2
Read every format
All notations are produced together, with a swatch and the nearest CSS colour name.
-
3
Copy what you need
Every value has its own copy button, so nothing has to be selected by hand.
-
4
Watch for the warnings
Out-of-gamut and print-only conversions are flagged rather than silently approximated.
Frequently asked questions
HEX for fixed brand values, because it is compact and universally understood. HSL or OKLCH when you need to derive variants, because changing one number gives you a lighter or more muted version. OKLCH is the better of the two for that, since its lightness is perceptually even.
Both are perceptual spaces, but CIELAB dates from 1976 and has a well-known blue problem: interpolating through blue turns purple. OKLab was designed in 2020 to fix exactly that, and is the better choice for gradients and colour scales.
CMYK is a description of ink on paper, and how much ink produces a colour depends on the press, the paper and the profile. The figures here use the standard naive conversion, which is fine for a rough idea and wrong for a print job.
LAB, LCH and OKLCH can describe colours more saturated than any sRGB screen can show. When you enter one, the closest displayable colour is used and the tool tells you, rather than clipping silently and giving you the wrong hue.
Reviews of the Color Format Converter
What people who use the Color Format Converter think of it. Reviews come from visitors and are posted as written.
No ratings yet
Yours would be the first.
- 5 0 reviews rated 5 stars
- 4 0 reviews rated 4 stars
- 3 0 reviews rated 3 stars
- 2 0 reviews rated 2 stars
- 1 0 reviews rated 1 star
0 reviews
Newest first
No reviews yet
Be the first to rate the Color Format Converter. It takes half a minute and no account.
Write the first reviewMore color tools
HWB Color Converter
Convert to and from HWB, the hue-whiteness-blackness notation.
Color to CSS Variables
Turn a palette into CSS custom properties, Tailwind tokens or Sass.
Monochromatic Palette Generator
Build a whole palette from one hue, and nothing else.
LCH Color Converter
Convert LCH to HEX and RGB — LAB in polar form, as CSS uses it.
HEX to Color Name
Find the closest named colour to any HEX code.
OKLCH Color Picker
Pick colours in OKLCH, the space modern CSS is built on.
APCA Contrast Checker
Score a colour pair with APCA, the contrast model behind WCAG 3.