How to use the color converter
- Type a color into the top box in any CSS format (
#F8612A,rgb(248, 97, 42),hsl(16, 94%, 57%)or a name such astomato), or click the swatch to open your device's color picker. - Or edit the R, G, B or H, S, L boxes directly. All the others update to match, and the table lists every format with a Copy button.
- Use the shade strip to step through lighter and darker versions of the same hue, and the contrast panel to see whether the color is readable as text on white, on black, or on a color you choose.
The conversion runs in your browser, so you can try as many colors as you like without anything being uploaded.
HEX, RGB and HSL explained
| Format | How it is written | What it describes |
|---|---|---|
| HEX | #F8612A | Red, green and blue amounts as three pairs of hexadecimal digits, 00 to FF |
| RGB | rgb(248, 97, 42) | The same three amounts as numbers from 0 to 255 |
| HSL | hsl(16, 94%, 57%) | Hue (angle on the color wheel, 0–360), saturation (color intensity) and lightness |
| CMYK | cmyk(0%, 61%, 83%, 3%) | Ink amounts for print. The conversion here is a simple estimate |
HEX and RGB are two ways to write the same thing: F8 in hexadecimal is 248, 61 is 97 and 2A is 42. HSL describes the same color in a way that is easier to adjust by hand. Keep the hue and saturation, and change the lightness to get lighter or darker versions. Rotate the hue to find related colors. That is why many designers build palettes in HSL even when the final code is HEX.
A three-digit HEX like #F60 is shorthand: each digit is doubled, so it means #FF6600.
Worked example
Take the orange #F8612A:
- To RGB: F8 = 15 × 16 + 8 = 248, 61 = 6 × 16 + 1 = 97, 2A = 2 × 16 + 10 = 42, giving rgb(248, 97, 42).
- To HSL: the largest channel is red (248) and the smallest is blue (42), so lightness = (248 + 42) ÷ 2 ÷ 255 = 56.9%. Saturation is 94% and hue is 16°, a red-orange. That gives hsl(16, 94%, 57%).
- Contrast: as text on white it scores 3.12:1, which fails the 4.5:1 requirement for normal text, and on black it scores 6.73:1, which passes AA. A darker shade of the same hue,
#B5410E, reaches 5.63:1 on white.
Contrast and accessibility
The contrast ratio compares the brightness of two colors, from 1:1 (identical) to 21:1 (black on white). The Web Content Accessibility Guidelines set minimums so that text can be read by people with low vision:
| Level | Normal text | Large text (24px, or 19px bold) |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
The ratio uses the relative luminance of each color: the red, green and blue channels are first converted from their screen values to linear light, then combined as 0.2126 R + 0.7152 G + 0.0722 B, reflecting that our eyes are most sensitive to green. The ratio is (lighter + 0.05) ÷ (darker + 0.05). Pure colors can be misleading: bright yellow looks vivid but has low contrast on white, while the same hue darkened to olive passes easily.
Contrast is not only for text. Buttons, form borders and icons that carry meaning need at least 3:1 against their surroundings, and color alone should never be the only way to tell two things apart.
Accuracy and limits
HEX, RGB and HSL conversions are exact apart from rounding to whole numbers, so converting HSL to RGB and back can move a value by one step. The CMYK figures are a mathematical estimate and will not match a printer's color profile, so use proofs for print work. Colors shown depend on your screen's calibration and color profile. Alpha (transparency) in 4- or 8-digit HEX values is ignored. Named colors are looked up by your browser, so any CSS color name works.
Frequently asked questions
How do I convert HEX to RGB?
Split the six digits into three pairs and convert each from hexadecimal to a number from 0 to 255. For #F8612A, F8 is 248, 61 is 97 and 2A is 42, so the color is rgb(248, 97, 42).
What does HSL stand for?
Hue, saturation and lightness. Hue is the position on the color wheel in degrees, saturation is how intense the color is, and lightness is how close it is to white or black.
What contrast ratio do I need for readable text?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA raises these to 7:1 and 4.5:1. Black on white is 21:1.
Why does my printed color look different?
Screens mix light (RGB) and printers mix ink (CMYK), and their ranges of colors differ. Print jobs need a color profile and a proof, not just a formula.
Can I type a color name like “tomato”?
Yes. Any standard CSS color name works in the top box, and the tool shows its HEX, RGB and HSL values.