Image color picker Read the exact pixel

Four steps, and the second one is the one most tools skip.

1. Load the picture. Choose a file, drag one in, paste from the clipboard, or give a direct image address. Nothing leaves your browser.
2. Find the pixel. The magnifier shows the pixels around your cursor at fifteen times their size with the target cell ringed. This matters more than it sounds: the edge of a letter or a logo is a band of blended pixels that exist in neither colour.
3. Sample it. Click, tap, or press Enter. Arrow keys nudge one pixel at a time; hold shift for ten.
4. Take it with you. Copy any single value, or extract a palette from the whole image and export it as CSS, JSON, CSV, text or a PNG card.

The longer version, including why JPEG artefacts and screenshots mislead you

Every colour here is the same three bytes written down several ways. Which one you want depends on what you are about to do with it.

HEX#3498db

Six hexadecimal digits: two each for red, green and blue, from 00 to ff. A seventh and eighth pair add opacity.

For carrying a colour, because it is short and exact and cannot be misread.

RGBrgb(52 152 219)

The same channels as decimal numbers from 0 to 255. Screens emit red, green and blue light, so these say how hard each of the three is being driven, which is why all three at full strength gives white.

For arithmetic on a colour.

HSLhsl(204 70% 53%)

Hue as an angle, saturation as colourfulness, lightness from black to white. It describes a colour the way a person would, so it is the one to adjust by hand.

For making something lighter without changing what colour it is.

OKLCHoklch(62% 0.13 240)

Perceptual lightness, chroma and hue. Unlike HSL, equal numeric steps look like equal visual steps, so a ramp built in OKLCH does not lurch or drift in hue.

For generating colour ramps that behave.

CMYKcmyk(76% 31% 0% 14%)

Ink coverage for printing rather than screens. Ink subtracts light instead of adding it, and the real conversion depends on the press, the paper and the profile. A number worked out in the browser is only a starting point.

Labelled approximate here, because it is.

A fuller comparison of the three web notations · and where the newer spaces fit

Almost every image on screen is being displayed at a different size from its real dimensions. A 3000-pixel-wide photo in a 900-pixel-wide box has been resampled, and each pixel you can see is a blend of several real ones. On a retina display it has been scaled again.

A tool that samples what is on screen hands you that blend: a value that exists nowhere in your file, and that changes if you resize the window.

ColorFinders maps your cursor back to a coordinate in the source image, then draws that one pixel at 1:1 into a one-pixel canvas with smoothing turned off and reads its bytes. Display scale, zoom level, pan position and device pixel ratio cannot affect the result. The coordinate readout under the stage is how you can tell: it is the position in your file, not on your screen.

• Matching a brand colour when a logo arrives as a PNG with no brand guide attached.
• Building a palette from a photograph. The colours in a photo already agree with each other, because one light source produced them all.
• Reproducing a colour from a screenshot, where sampling is both faster and exact.
• Checking what a colour really is when compression and anti-aliasing mean neighbouring pixels are not the same.
• Writing CSS: sample once, then copy the value in the notation your stylesheet uses.
• Confirming a pairing is readable by sending the value to the contrast checker.
• Checking a palette works for everyone in the vision simulator.

Nowhere. The site is built so that it stays in your browser.

• Your file is read by the browser's own image decoder and drawn onto a canvas in this tab. No request carries it anywhere.
• Because nothing is uploaded, nothing is stored or kept for any period, and there is nothing for anyone to hand over.
• Closing the tab deletes everything, including the file's name and dimensions.
• One deliberate exception: paste an image address and your browser fetches it directly. It still does not pass through us.

The full privacy policy

12 tools, each one here because it answers a question people actually arrive with. There is no long tail of near-identical pages.

• Color pickerA saturation-value field and hue rail for choosing a colour from scratch.
• HEX color pickerType or adjust a hex code and see its tints, shades and nearest keyword.
• RGB color pickerDrive red, green and blue channels directly and watch the value follow.
• Color code converterPaste any notation and get the other eight, plus ready-to-use code snippets.
• Color contrast checkerMeasure a foreground against a background and read the WCAG 2.2 verdict.
• Color palette generatorPull a palette out of an image, or build one from harmonies around a colour.
• Gradient generatorCompose linear and radial gradients and copy the CSS.
• Color blindness simulatorSee which colours collapse into each other for the 8% who see colour differently.
• Color mixerBlend two colours, and see why sRGB goes muddy in the middle where OKLab does not.
• CSS filter generatorTurn a hex into a CSS filter chain that recolours a black icon or SVG.
• CSS color namesAll 148 CSS colour keywords, searchable and sortable, with every value.

• How to pick a color from an imageWhy a sampled pixel and the colour you think you see are often different, and how to sample the one you actually want.
• HEX vs RGB vs HSLThree ways of writing the same colour. What each notation is good at, and when to reach for which.
• What is a HEX color code?Reading a hex code by eye, the shorthand form, the alpha byte, and the arithmetic underneath.
• Understanding WCAG color contrastWhere the 4.5:1 threshold comes from, what "large text" means in practice, and the parts of a page the ratio does not cover.
• How to use color codes in CSSEvery way CSS accepts a colour, why custom properties beat repeating hex codes, and the relative-colour syntax that replaces most of your Sass functions.
• How to create a website color paletteGoing from one colour to a working system: how many steps you need, why neutrals are most of the work, and where to check before committing.
• Designing for color blindnessWhat the 8% actually experience, which colour pairs to stop using, and the redundant-cue rule that solves most of it.
• sRGB, Display P3 and OKLCHWhy the same hex looks different on two screens, what a wide gamut buys you, and when the newer CSS colour spaces are worth the trouble.