How to use the color picker
- Click the Pick a color swatch. In Chrome and Edge, Pick from screen also samples any pixel on your display.
- Or type into the HEX field. A pasted
rgb(37, 99, 235)orhsl(221, 83%, 53%)works there too. - Edit the R, G, B boxes (0 to 255) or the H, S, L boxes (hue 0 to 360, saturation and lightness 0 to 100). Every other field follows.
- Press Copy beside any format, or click a palette swatch to copy its HEX code.
How the conversions work
The exact RGB triple is the source of truth. A HEX code is the same three numbers in base 16, so HEX to RGB and back is exact for all 16,777,216 colors (see the number base converter). HSL, HSB and CMYK are calculated from RGB with the formulas in CSS Color Module Level 4 and rounded to whole numbers only when shown. Typing an HSL value picks the nearest RGB color, so converting back can differ by one point.
Palettes rotate the hue: complementary adds 180 degrees, analogous adds and subtracts 30, triadic adds 120 and 240. Shades and tints move lightness in six equal steps. Contrast uses WCAG relative luminance, L = 0.2126 R + 0.7152 G + 0.0722 B on gamma-expanded channels, and the ratio (L1 + 0.05) / (L2 + 0.05). For more ideas try the color palette generator or the random color generator.
Worked example
The page opens on #2563EB. In base 16, 25 is 37, 63 is 99 and EB is 235, so RGB reads rgb(37, 99, 235). With 235 the largest channel and 37 the smallest, the tool shows hsl(221, 83%, 53%), hsb(221, 84%, 92%) and cmyk(84%, 58%, 0%, 8%). The contrast boxes read 5.17:1, passes AA for white text and 4.06:1, AA for large text only for black, so white is the right text color on this blue.
Limits and edge cases
- The HEX field takes 3 or 6 digits, with or without #. Eight-digit codes with transparency are not read.
- Everything is sRGB. Display P3 and other wide-gamut colors are not supported.
- Numbers outside a field's range are set to the nearest limit when you leave the box, with a note.
- Pick from screen needs a Chromium browser. Elsewhere the button stays hidden.
Frequently asked questions
How do I convert HEX to RGB?
Split the six digits into three pairs and convert each pair from base 16 to a number from 0 to 255. For #2563EB, 25 is 37, 63 is 99 and EB is 235, so the color is rgb(37, 99, 235). Type the HEX code into the HEX field and the R, G and B boxes fill in for you.
What is the difference between HSL and HSB (HSV)?
Both use hue, but brightness differs. In HSL, 100% lightness is always white. In HSB, 100% brightness is the full-strength color, and white needs 0% saturation. CSS uses HSL, while Photoshop and Figma show HSB.
Does the HEX field accept 3-digit codes like #f80?
Yes. Each digit is doubled, so #f80 means #ff8800. The field also accepts a code without the # sign and reads a pasted rgb() or hsl() value. Eight-digit codes with an alpha channel are not supported.
Why does the CMYK value not match what my printer produces?
The CMYK shown here is a plain formula applied to the RGB values, not a printer or paper profile. Real print results depend on the ink, the paper and the ICC profile, so use your print shop's profile when exact color matters.
What contrast ratio do I need for readable text?
WCAG level AA asks for at least 4.5 to 1 for normal text and 3 to 1 for large text (18 point, or 14 point bold). Level AAA asks for 7 to 1 for normal text. The two contrast boxes show the ratio for white text and for black text on your color.
Sources: W3C CSS Color Module Level 4, W3C WCAG 2.2 Contrast (Minimum), HSL and HSV (Wikipedia).