Developer tools
Colour Converter: HEX, RGB, HSL
Convert any colour between HEX, RGB, HSL, HSB and CMYK, with a live preview and contrast check.
HEX, RGB, HSL or a name
Black text
White text
- Contrast with black
- Contrast with white
- HEX
- RGB
- HSL
- HSB / HSV
- CMYK
What it is for
The same colour is written differently depending on where it is going: HEX in CSS and design tools, RGB in code and image editors, HSL when you want to nudge lightness or saturation without changing the hue, HSB in Figma and Photoshop pickers, and CMYK for print. Paste a colour in any of these formats, or a CSS colour name, and this converter shows all of the others at once, with a preview swatch and the contrast ratio against black and white text so you can see straight away whether the colour is readable.
How to use it
- Type a colour in any format: #e94b7c, e94b7c, rgb(233, 75, 124), hsl(341, 78%, 60%) or a name such as tomato. Or click the swatch to open the colour picker.
- Every other format is calculated as you type. Click Copy next to the one you need.
- The contrast ratios at the bottom tell you whether black or white text is readable on this colour. 4.5 or higher passes WCAG AA for normal text.
Questions
- Why are there two values for HSL and HSB?
- They are different models. Both start with hue, but HSL measures lightness from black through the pure colour to white, while HSB (also called HSV) measures brightness from black to the pure colour. Design tools mostly use HSB; CSS uses HSL.
- Why does the CMYK look different in print?
- The conversion here is the simple mathematical one. Real printing depends on the ink, paper and colour profile, so a designer or printer will adjust the values. Treat the result as a starting point.
- Does it support transparency?
- Yes. An 8-digit HEX such as #e94b7c80, rgba() or hsla() input keeps the alpha value and shows it in each format that can carry it.
- What is a good contrast ratio?
- WCAG asks for at least 4.5:1 for normal text and 3:1 for large text or interface elements. 7:1 meets the stricter AAA level. The tool shows the ratio for black and for white text on your colour.