Color Converter and Contrast Checker
Type or paste a color in any common form, such as #3b82f6, rgb(59 130 246), hsl(217 91% 60%) or tomato, and see it as HEX, RGB and HSL, ready to copy. Pick a color with the picker if you prefer. A second panel checks the WCAG contrast ratio of a text color on a background and tells you which levels it passes. Everything runs in your browser.
Contrast checker (WCAG)
| Normal text, AA (4.5) | Pass |
| Large text, AA (3) | Pass |
| Normal text, AAA (7) | Pass |
| Large text, AAA (4.5) | Pass |
| Interface parts, AA (3) | Pass |
Related Tools
[5 suggestions]PX to REM Converter
Convert px to rem, em, pt, pc, vw and percent for CSS, with your own root font size, parent size and viewport width.
Developer & WebNumber Base Converter
Convert whole numbers between binary, octal, decimal, hex and any base from 2 to 36, with two's complement.
Developer & WebJSON Formatter
Validate, pretty-print, and minify JSON with clear error reporting for invalid input.
Developer & WebCSS Gradient Generator
Design linear, radial and conic CSS gradients with any number of colour stops, preview them live and copy the CSS.
Developer & WebCSS Shadow Generator
Design box-shadow, text-shadow and drop-shadow with several layers, preview them live and copy the CSS.
Developer & WebAbout the Color Converter and Contrast Checker
The Color Converter reads hex codes with 3, 4, 6 or 8 digits, rgb() and rgba() in the comma form and the space form, hsl() and hsla() with deg, turn, rad or grad angles, the 148 CSS color names, and three bare numbers such as 59, 130, 246. It writes HEX, RGB and HSL, and adds the name when a color has an exact CSS name. A color that is not fully opaque gets an 8-digit hex code and an rgba() or hsla() value. HSL is shown twice, because converting to whole numbers loses information: of the 16,777,216 colors in 8-bit RGB, only 1,775,571 come back unchanged from a whole-number HSL, while HSL with one decimal returns every one of them exactly. Use the exact form when the color must survive a round trip. The contrast checker uses the WCAG formula for relative luminance and the ratio (L1 + 0.05) / (L2 + 0.05), and applies the thresholds of 4.5, 3 and 7 to the unrounded ratio, as WCAG requires, so 4.499 does not pass 4.5. A text color with transparency is laid over the background first. Everything is calculated in your browser and nothing is uploaded.
How do I convert HEX to RGB?▾
Split the hex code into three pairs and convert each from base 16 to a number from 0 to 255. For #3b82f6 the pairs 3b, 82 and f6 are 59, 130 and 246, so the color is rgb(59, 130, 246). Paste the code into the tool and it shows RGB and HSL at once.
Why does hsl() with whole numbers give a slightly different color?▾
Because rounding hue, saturation and lightness to whole numbers loses detail. Only about 11 percent of the 16.7 million RGB colors survive a trip to whole-number HSL and back unchanged. HSL with one decimal returns every color exactly, so use the HSL exact line when the color must not change.
What is a good contrast ratio for text?▾
WCAG level AA asks for at least 4.5 to 1 for normal text and 3 to 1 for large text, which is 18 point or 14 point bold. Level AAA asks for 7 to 1 and 4.5 to 1. The ratio is not rounded, so 4.499 to 1 does not meet 4.5.
What does an 8-digit hex code mean?▾
The first six digits are red, green and blue, and the last two are the alpha, which is how opaque the color is. 00 is fully transparent and ff is fully opaque, so #3b82f680 is the same blue at about 50 percent.
Is my data uploaded?▾
No. The conversion and the contrast check run in your browser, and the colors you type are not sent anywhere or stored.