Color Converter & Contrast Checker
Paste any CSS colour (HEX, rgb(), hsl() or a name like tomato) to convert it to every format, generate tints and shades, and check text contrast against WCAG.
| HEX | ||
|---|---|---|
| RGB | ||
| HSL | ||
| HSV / HSB | ||
| CMYK | ||
| Nearest name |
Tints & shades
Click a swatch to copy its HEXContrast checker (WCAG 2.1)
Large text (24px bold)
Normal body text at 15px. The quick brown fox jumps over the lazy dog. Can you read this comfortably?
Colour formats in CSS
- HEX (
#2f6fed) is red, green and blue as two hex digits each. An optional 4th pair (#2f6fed80) sets transparency. - RGB (
rgb(47 111 237)) gives the same channels as decimal numbers from 0 to 255. - HSL (
hsl(220 84% 56%)) is hue, saturation and lightness. It's the easiest to adjust by hand: change only the lightness to get a darker or lighter version of the same colour. - HSV/HSB is what design tools such as Figma and Photoshop show in their pickers. CMYK is for print. Converting from RGB only approximates the printed result, which depends on the printer's colour profile.
What do the WCAG contrast levels mean?
The Web Content Accessibility Guidelines set minimum contrast ratios so people with low vision can read text. AA is the standard most laws and companies require: 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold). AAA is stricter: 7:1 and 4.5:1. Ratios run from 1:1 (no contrast) to 21:1 (black on white).
Tints and shades
Tints are your colour mixed with white, and shades are mixed with black. They're a quick way to build hover states, borders and backgrounds that match a brand colour.