How to convert a colour
- Type or paste a colour into any box. The tool accepts
#rgb,#rgba,#rrggbband#rrggbbaa;rgb()andrgba()with commas or spaces;hsl(),hsla()andhsv(). - Or use the picker, and the opacity slider for transparency.
- Copy the format you need. The CSS box lists the modern and the classic syntax.
- Click a tint or shade to make it the current colour, for example to build hover states or a palette.
Everything is calculated in your browser.
HEX, RGB, HSL and HSV explained
| Format | Example | What the numbers mean |
|---|---|---|
| HEX | #3442e8 | Red, green and blue as two hex digits each (00–ff). #34e is short for #3344ee. A fourth pair is opacity. |
| RGB | rgb(52, 66, 232) | The same three channels in decimal, 0–255. |
| HSL | hsl(235, 80%, 56%) | Hue (0–360° around the colour wheel), saturation and lightness. 50% lightness is the pure colour; 100% is white. |
| HSV / HSB | hsv(235, 78%, 91%) | Hue, saturation and value (brightness). Used in design apps' colour pickers. Not a CSS format. |
Worked example: #3442e8 to RGB and HSL
34 → 3×16 + 4 = 52 (red) 42 → 4×16 + 2 = 66 (green) e8 → 14×16 + 8 = 232 (blue) max = 232/255 = 0.910, min = 52/255 = 0.204 L = (max + min) ÷ 2 = 0.557 → 56% S = (max − min) ÷ (1 − |2L − 1|) = 0.796 → 80% H = 60 × ((R − G) ÷ (max − min) + 4) = 235.3° → 235°
Hue is worked out from whichever channel is largest, here blue. HSL and HSV share the same hue but measure saturation differently, so their S values differ.
WCAG contrast ratio
The Web Content Accessibility Guidelines (WCAG 2.x) measure how readable text is against its background. First, each colour's relative luminance L is calculated:
c = channel ÷ 255 c_lin = c ÷ 12.92 if c ≤ 0.04045 c_lin = ((c + 0.055) ÷ 1.055)^2.4 otherwise L = 0.2126 R_lin + 0.7152 G_lin + 0.0722 B_lin ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)
The ratio runs from 1:1 (the same colour) to 21:1 (black on white). The ratio is not rounded up: 4.49:1 fails a 4.5:1 test.
| Level | Normal text | Large text* | UI parts and icons |
|---|---|---|---|
| AA (the usual target) | 4.5:1 | 3:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 | — |
*Large text is at least 18 point (24 CSS pixels), or 14 point (about 18.66 px) in bold.
Some useful reference pairs: black on white is 21:1. #777777 on white is about 4.48:1, which just fails AA for normal text. #767676 on white is about 4.54:1, the lightest grey that passes.
If a colour is partly transparent, the checker first blends it over the background, as a browser would.
Tips
- Tints and shades here are mixed in sRGB with white or black in 10% steps. They are a quick start for a palette. For perceptually even steps, adjust the lightness by eye.
- Don't rely on colour alone to show meaning. Add an icon or a word, for people with colour blindness.
- Test real states: placeholder text, disabled buttons and links over images often fail contrast.
Frequently asked questions
How do I convert HEX to RGB?
#3442e8 → 34, 42, e8 → 52, 66, 232, so rgb(52, 66, 232).What contrast ratio do I need for WCAG AA?
What is the difference between HSL and HSV?
What is an 8-digit HEX colour?
#3442e880 is the same blue at about 50% opacity, since 80 in hex is 128 out of 255. All modern browsers support it.Why does a round trip change my HSL values slightly?
#3442e8 is hsl(235.3, 79.6%, 55.7%). Rounded to hsl(235, 80%, 56%), it converts back to #3544e9, slightly off. This tool keeps one decimal place so that a round trip returns the same HEX value.Last updated . How we check our tools.