Color Converter
HEX RGB HSL conversion
HEX RGB HSL conversion Runs locally in your browser
#2563eb
rgb(37, 99, 235)
hsl(221, 83%, 53%)
About the
The Color Converter translates a single colour between HEX, RGB, HSL and HSV, and shows the WCAG contrast ratio against black and white so you can see immediately whether text in that colour is readable. HEX and RGB are the formats you copy between tools, but HSL is the one that is actually useful for design work: it separates hue from lightness, so you can produce a tint or a shade that keeps the same hue instead of drifting towards grey the way naive RGB maths does. Eight-digit hex and rgba values carry an alpha channel, and the converter handles those as well.
Where people use the
- Turning a brand hex value into the rgb syntax a design tool expects.
- Producing a consistent set of shades from one brand hue using HSL.
- Checking whether a link colour is readable on a dark background.
- Matching a colour picked from a screenshot to the nearest hex value.
How to use the
- 1
Enter the colour in any format
Paste a hex value such as 2f6fed, or an rgb or hsl function, or use the picker. The other formats update as you type.
- 2
Read all the representations at once
Hex, RGB, HSL and HSV are shown together with the alpha channel separated out.
- 3
Check the contrast ratios
Ratios against black and white tell you whether the colour is usable as a text colour or a background. Body text needs 4.5 to 1, large text and interface borders need 3 to 1.
- 4
Copy the form your code needs
Each field has its own copy button, so you get exactly the syntax your stylesheet expects rather than reformatting by hand.
Tips and best practices
- Adjust lightness in HSL rather than adding white or black in RGB; the hue stays intact.
- Test contrast at the smallest size the text will actually be used at, not at heading size.
- Keep a documented palette of five or six values instead of inventing a new one per component.
Frequently asked questions
How is a hex colour converted to RGB?
Each pair of hex digits is one channel, read as base 16. In 2f6fed, 2f is 47 red, 6f is 111 green and ed is 237 blue. Three-digit shorthand like f0a doubles each digit, so it becomes ff00aa.
Why is HSL lightness not the same as perceived brightness?
Because the eye is far more sensitive to green than to blue. Pure blue and pure yellow can share a lightness value while yellow appears much brighter. That is why contrast has to be measured with a luminance formula rather than judged from the HSL number.
What does the fourth pair of digits in a hex colour mean?
Alpha, from 00 fully transparent to ff fully opaque. Eight-digit hex is supported in all current browsers and is the hex equivalent of rgba.
Is the CMYK conversion accurate for print?
No, and no browser tool can be. CMYK depends on the ink, the paper and the printer profile. Use this value as a starting point and convert through your print supplier's ICC profile for anything that matters.
How do I pick readable text for a coloured background?
Compare the contrast ratio between the text colour and the background. If neither black nor white reaches 4.5 to 1, the background is too saturated for body text and needs to be darkened or lightened before it is used behind copy.
Why does the same hex look different on two screens?
Because displays differ in gamut, calibration and brightness. A wide-gamut screen shows saturated colours that a standard sRGB panel cannot reproduce. Work in sRGB unless you have a specific reason not to.