How to use the color picker
- Choose a color with the color box, which opens your device’s own color chooser, or paste a code into the text field: HEX with or without
#(3, 4, 6 or 8 digits),rgb()andrgba(),hsl()andhsla()in comma or space syntax, a plain list like31, 78, 121, or any of the 148 CSS color names. - Pick from an image: load, drop or paste a photo, logo or screenshot and click or tap the spot you want; a magnifier shows the pixels around it. In Chrome, Edge and Opera on a computer, Pick from screen reads any pixel on your display.
- Copy the format you need. Each palette swatch copies its HEX code when tapped.
The image is read on your device and never uploaded.
Color formats explained
| Format | Example | Used in |
|---|---|---|
| HEX | #1f4e79 | CSS, HTML, design tools, brand guides |
| RGB | rgb(31, 78, 121) | CSS, screens, image editors |
| HSL | hsl(209, 59%, 30%) | CSS; easy to make lighter or darker by hand |
| HSV / HSB | hsv(209, 74%, 47%) | Color pickers in Photoshop, Figma and similar apps |
| CMYK | cmyk(74%, 36%, 0%, 53%) | Print (as a rough starting point only) |
HEX is RGB written in base 16: each pair of digits is one channel from 00 to ff (0–255), so 1f = 1 × 16 + 15 = 31. An eighth and ninth digit add transparency (alpha), and #abc is short for #aabbcc.
HSL and HSV start from the same hue, the angle on the color wheel (0° red, 120° green, 240° blue), with R, G and B scaled to 0–1. Lightness is L = (max + min) / 2 and HSL saturation is (max − min) / (1 − |2L − 1|). In HSV the value is simply V = max and saturation is (max − min) / max. That is why a fully saturated red is hsl(0, 100%, 50%) but hsv(0, 100%, 100%).
CMYK here is the textbook conversion: K = 1 − max, then C = (1 − R − K) / (1 − K), and the same for M and Y. Printers convert with ICC profiles for their paper and ink, so their numbers will differ; treat this one as a starting point.
The nearest CSS name is found by converting both colors to CIELAB and taking the smallest straight-line distance (ΔE, CIE76); a ΔE of about 2.3 is often quoted as the smallest difference people notice.
Worked example: #1f4e79
The default navy splits into 1f, 4e and 79, which is RGB 31, 78, 121. Blue is the largest channel (121 / 255 = 0.475) and red the smallest (0.122), so V = 47%, HSV saturation = (121 − 31) / 121 = 74%, lightness = (0.475 + 0.122) / 2 = 30% and HSL saturation = 59%. Its hue works out to 208.7°, shown as 209. Its relative luminance is 0.0712, so it reaches a contrast of 8.66:1 with white text (AAA) but only 2.42:1 with black. The closest named color is steelblue, ΔE 21 away, so the name is only a rough description.
Contrast and accessibility (WCAG 2.2)
The contrast check follows the definitions in the W3C’s Web Content Accessibility Guidelines 2.2. Each channel is linearized (c / 12.92 at or below 0.04045, otherwise ((c + 0.055) / 1.055)2.4), the relative luminance is L = 0.2126 R + 0.7152 G + 0.0722 B, and the contrast ratio is (Llighter + 0.05) / (Ldarker + 0.05), from 1:1 up to 21:1.
| Level | Normal text | Large text |
|---|---|---|
| AA (success criterion 1.4.3) | 4.5:1 | 3:1 |
| AAA (success criterion 1.4.6) | 7:1 | 4.5:1 |
Large text means at least 18 point (24 CSS pixels) or 14 point bold (about 18.7 pixels). Ratios are cut, not rounded, at two decimals, so 4.499:1 never shows as a pass, and a translucent color is first blended over the white or black it is compared with.
Tints, shades and harmonies
Tints mix the color with white in 20% steps and shades mix it with black, which gives a ready-made scale for hover states, borders and backgrounds. The harmonies keep saturation and lightness and turn the hue: complementary is 180° away, analogous colors sit 30° either side, triadic colors are 120° apart and split-complementary uses 150° and 210°.
Tips
- The same HEX code can look different on two screens (brightness, night mode, wide-gamut displays), but the numbers stay the same.
- Photos rarely have one flat color: tick Average 5 × 5 pixels or compare a few spots.
- Need the image in another format or size? Use the image converter or image resizer; for styled lettering, the font generator.
Frequently asked questions
How do I convert HEX to RGB?
Split the six digits into three pairs and read each pair as a base-16 number: #1f4e79 → 1f = 31, 4e = 78, 79 = 121, so rgb(31, 78, 121). Paste any HEX code above to get RGB, HSL, HSV and CMYK at once.
What is the difference between HSL and HSV (HSB)?
Both use the same hue angle. HSL puts pure colors at 50% lightness, with 100% always white, while HSV puts them at 100% value, with white reached by lowering saturation. CSS uses HSL; Photoshop and Figma pickers use HSV, which they call HSB.
Is the CMYK value ready for print?
No. It uses the simple conversion formula, which knows nothing about your paper, inks or printing press. Professional print workflows convert with an ICC color profile; give your printer the RGB or HEX value and ask for a proof, or use a Pantone or CMYK value from your brand guide.
How do I pick a color from an image or my screen?
Press Pick from an image, choose a file (or drop it, or paste a screenshot), then click or tap the spot; with the image selected, arrow keys move the marker and Enter picks. Pick from screen works in Chrome, Edge and Opera on computers; Firefox, Safari and mobile browsers don’t support it yet, so the button is hidden there.
Is my image uploaded anywhere?
No. Your browser decodes and reads it; nothing is sent to a server.
Last updated: October 15, 2026