Color Picker from Image with HEX, RGB and OKLCH

Three ways to pick a colour

Colour wheel and sliders: the square swatch opens your browser's native colour picker, which on most systems shows a colour wheel or spectrum plus its own eyedropper. Underneath it, the Hue, Saturation and Lightness sliders let you nudge a colour precisely, for example to make a brand blue 10% lighter for a hover state, and the hex field accepts any 3- or 6-digit code you paste.

Screen eyedropper: in Chrome, Edge and Opera the Pick from screen button uses the EyeDropper API, which lets you click any pixel on your screen, including other windows, and returns its hex code. The browser shows its own magnifier and the page never sees your screen, only the single colour you chose. Firefox and Safari do not support this API yet, so the button is hidden there and the page tells you why instead of failing silently.

Color picker from image: choose a screenshot, logo or photo and it is drawn onto a canvas in this tab; click any point to read that exact pixel. Nothing is uploaded. Large images are scaled to 1,200 pixels wide for display, so on a photo with fine detail zoom into a smaller crop first if you need one specific pixel. This is the quickest hex code finder when a designer sends a PNG instead of a style guide.

HEX, RGB, HSL and OKLCH: which one to copy

Every pick is shown in four CSS formats with a copy button. HEX (#3b82f6) is the compact form used in design tools and most stylesheets. RGB (rgb(59, 130, 246)) is the same three channels in decimal, handy when you need to add transparency as rgb(59 130 246 / 50%). HSL describes a colour by hue angle, saturation and lightness, which makes it the easiest format to reason about when building lighter and darker shades by hand.

OKLCH is the newest: lightness, chroma and hue in the perceptually uniform OKLab space, supported by all current major browsers and used by Tailwind CSS v4 for its default palette. Equal steps in OKLCH lightness look like equal steps to the eye, which HSL does not guarantee; yellow and blue at the same HSL lightness look very different in brightness. The conversion here follows Björn Ottosson's published OKLab matrices from sRGB.

Contrast check against white and black text

The two preview tiles show white and black text on your colour with the WCAG 2 contrast ratio. Body text needs at least 4.5:1 for level AA and 7:1 for AAA; large text (about 24px, or 19px bold) needs 3:1, shown as AA Large. If neither tile passes, adjust the Lightness slider until one does.

The ratio is calculated exactly as WCAG defines it: each colour is converted from sRGB to linear light, weighted into a relative luminance (red 21%, green 72%, blue 7%, reflecting how sensitive the eye is to each), and the ratio is (lighter + 0.05) / (darker + 0.05). That is why a saturated yellow can pass with black text while a blue of the same HSL lightness needs white. For a full palette from a photo use the Image Color Palette Extractor, and to convert a value you already have use the Color Converter; both are linked below the tool.