Color Picker: Get Exact Colour Codes from Any Image or Screen

How to use the color picker

1. Load an image. Drop a file, choose one, or paste a screenshot from the clipboard. PNG, JPEG, WebP, GIF, AVIF, BMP and SVG up to 40 MB work everywhere; HEIC only where your browser can open it, and a file it cannot open gets a plain message instead of a blank screen. The tool samples the full-resolution bitmap, not the scaled copy you see on screen. Only images above 16.7 megapixels are read from a reduced copy, and the tool tells you so. It also lists the dominant colours of the picture with their share.
2. Aim with the loupe. The magnifier shows the pixel grid around your mouse pointer or finger, so you can see whether you are on a flat area or on an anti-aliased edge. From the keyboard, the arrow keys move the pick point one pixel (Shift: ten) and Enter picks it.
3. Pick a sample size. 1 pixel gives the raw value; a 3×3 or 5×5 average smooths JPEG noise and photo grain. I use 1 pixel for logos and UI, an average for photos.
4. Or pick from the screen. In Chromium browsers on a computer (Chrome, Edge, Opera) the eyedropper button lets you click any pixel on your display, even outside the browser window. Firefox and Safari have no such feature; the tool says so and points you to the image route.
5. Or type a code. Paste #1d4ed8 (3, 4, 6 or 8 digits), rgb(29 78 216), hsl(224 76% 48%), an hsv(), oklch() or cmyk() value, or a CSS colour name, and every other format updates. A switch toggles the output between modern space-separated CSS and legacy commas.
6. Collect and export. Add picks to the palette board, which is saved in your browser, and copy or download it as CSS custom properties, SCSS, JSON or a plain HEX list.

HEX, RGB, HSL, HSV and OKLCH: which code to use

OKLCH comes from CSS Color Module Level 4 and is the cylindrical form of the Oklab space. Its L axis is built to track how bright a colour looks, which is exactly what HSL lightness gets wrong. Pure yellow and pure blue are both L 50% in HSL, yet one is almost white to the eye and the other is dark:

That is why I build every shade ramp in OKLCH: equal steps in L look like equal steps, across hues, and text contrast becomes far more predictable.

Worked example: converting #1D4ED8

HEX to RGB. Split into pairs and read each as base 16:

RGB to HSL. Scale to 0–1: R = 0.1137, G = 0.3059, B = 0.8471. Max = 0.8471 (blue), min = 0.1137, difference d = 0.7333.

RGB to HSV. V = max = 84.7%; S = d / max = 0.7333 / 0.8471 = 86.6%; hue is the same 224.3°, so hsv(224.3 86.6% 84.7%).

RGB to CMYK. K = 1 − max(R, G, B) = 1 − 0.8471 = 15.3%; then C = (1 − R − K) / (1 − K) = 86.6%, M = 63.9%, Y = 0%, shown as cmyk(87% 64% 0% 15%). That is plain arithmetic, not an ink profile.

RGB to OKLCH. Each channel is linearised (undoing the sRGB gamma), converted to Oklab through two fixed matrices with a cube root in between, then a and b become chroma and hue. The result is oklch(48.82% 0.2172 264.38), which CSS also accepts as oklch(0.4882 0.2172 264.38). The OKLCH hue (264°) differs from the HSL hue (224°) because the hue wheels are laid out differently.

Why a picked colour can be off by a few values

Two people picking the same brand colour can get #1D4ED8 and #1E4FD6 without either tool being wrong:

• JPEG compression stores colour at reduced resolution and in 8×8 blocks, so neighbouring pixels in a flat area wander by a few units. If nine red values read 27, 29, 31, 28, 30, 29, 26, 32, 29, their average is 261 ÷ 9 = 29, which is the value the designer most likely used.
• Scaled screenshots blend pixels. A Retina screenshot shrunk to half size mixes every 2×2 block, so thin text and edges turn into in-between colours.
• Anti-aliasing on edges and type creates transition pixels that belong to neither colour. Pick from the middle of a flat fill, never the border.
• The screen eyedropper returns what is displayed, after colour management and features such as Night Shift or True Tone, and it reports an sRGB HEX. The file value can differ; for exact values, pick from the image itself.

Transparency. In #1D4ED880 the last pair is alpha: 80 hex = 128, and 128 ÷ 255 = 0.502, so about 50% opacity. Alpha is last in CSS; Android's ARGB puts it first, a common mix-up. What you see depends on the background: over white each channel becomes 0.502 × colour + 0.498 × 255, giving roughly #8EA6EB. The tool keeps the alpha of PNG, WebP and other formats that have it and warns you when the pixel you picked is not fully opaque. A fully transparent pixel is reported as transparent instead of being misread as black, and averages are weighted by alpha so see-through pixels do not drag the result towards black.

Shades, tints and palettes

Classically a tint is a colour mixed with white, a shade with black and a tone with grey. Mixing in RGB gives uneven steps, so the ramp here keeps hue and chroma in OKLCH and moves lightness in ten equal steps from L 96% down to 24%, reducing chroma only where a colour would fall outside the sRGB gamut; the step closest to your colour is marked. The tint, shade and tone rows are plain sRGB mixes with white, black and mid-grey in 10% steps, handy for quick hover and disabled states. You can copy the ramp as CSS variables or carry on in CSS itself with relative colour syntax, such as oklch(from var(--brand) calc(l + 0.15) c h).

For each colour the tool also names the nearest of the 148 CSS named colours, all of which are sRGB, measuring the distance in OKLab, and tells you whether the match is exact (#663399 is exactly rebeccapurple, #808080 is gray, also spelled grey) or only the nearest (#1D4ED8 is nearest to royalblue).

Six colour harmonies are built by rotating the hue: complementary, analogous, triadic, split-complementary, tetradic and square. Tetradic here is the rectangle (+60°, +180°, +240°), which is not the square (+90°, +180°, +270°). For #1D4ED8 the complement is #D8A71D, the second tetradic colour is #A71DD8 and the second square colour is #D81DAC. Each set copies as CSS variables.

Checking contrast against WCAG

The WCAG contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 of the darker one. Luminance is 0.2126 R + 0.7152 G + 0.0722 B on linearised sRGB channels, which is why green counts ten times as much as blue.

• AA: 4.5:1 for normal text, 3:1 for large text (at least 18 pt, or 14 pt bold).
• AAA: 7:1 for normal text, 4.5:1 for large text.
• Non-text contrast for icons, input borders and focus rings: 3:1.

WCAG says the computed ratio must not be rounded, so 4.499:1 fails 4.5:1. The classic case is two neighbouring greys on white. For #767676: 76 hex = 118, 118 ÷ 255 = 0.4627, linearised ((0.4627 + 0.055) / 1.055)^2.4 = 0.1812, ratio 1.05 / 0.2312 = 4.54:1. For #777777: linear value 0.1845, ratio 1.05 / 0.2345 = 4.48:1.

The checker in the tool uses exactly this formula. It shows the ratio, five pass or fail badges (AA and AAA for normal and large text, plus 3:1 for UI parts and icons), a gauge and a live preview. The ratio has two decimals, but when rounding would cross a threshold it shows three, so #007BC8 on white reads 4.499:1 and fails instead of showing a misleading 4.50. Semi-transparent text is blended over the background before measuring. When a pair fails AA, the tool suggests the closest colour that passes: it keeps the OKLCH hue and chroma and moves only the lightness, so #777777 on white becomes #767676.

Our example blue #1D4ED8 on white gives 6.70:1: fine for body text at AA, short of AAA. In my own work I aim for 4.5:1 on all text, even large headings, because the margin covers cheap screens and bright rooms.

How the color picker works and how it is checked

Images are decoded into a canvas on your device and read pixel by pixel; nothing is sent to a server, and the palette board (up to 48 colours) lives only in your browser. The screen eyedropper uses the EyeDropper API, which needs a secure (HTTPS) page and a click to start, and works only in Chromium-based browsers; in Firefox and Safari use the image route. Conversions follow the CSS Color 4 formulas for sRGB, HSL, HSV and OKLCH. Values are rounded only for display (HSL and HSV to one decimal; OKLCH lightness as a percentage with two decimals, chroma to four and hue to two); contrast pass or fail is decided on the unrounded ratio. CMYK uses the simple formula K = 1 − max(R, G, B) with no ICC profile, so treat it as approximate.

Go deeper

• How to pick a colour from an image
• HEX, RGB, HSL and OKLCH explained
• Colour contrast for accessibility