Skip to content

Colour Picker

Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.

Picks a colour on an OKLCH field: lightness runs up it, chroma runs across it, and hue is the strip below. That layout is the whole point — in the familiar HSV square, "the same colour, a bit less saturated" is a diagonal move nobody can find, and here it is a horizontal one. It also takes a colour off the screen where the browser allows that, and off an image you drop in, which works everywhere.

🔒 Runs entirely in your browsercolorpickereyedropper

Pick

Lightness runs up the field, chroma runs across it, and hue is the strip below. Hatched means the colour exists but sRGB cannot show it.

This colour

L

62.3

C

0.1880

H

259.8°

Notations

Copy as
  • hex#3b82f6
  • rgbrgb(59 130 246)
  • hslhsl(217.22 91.22% 59.8%)
  • hwbhwb(217.22 23.14% 3.53%)
  • lablab(54.619% 8.763 -65.791)
  • lchlch(54.619% 66.372 277.59)
  • oklaboklab(62.308% -0.0332 -0.1851)
  • oklchoklch(62.308% 0.188 259.81)
  • named#3b82f6

Pick from an image

Drop a screenshot or photo

Click anywhere on it to take that pixel.

Everything stays in this tab. Useful when the EyeDropper API is unavailable, which is most browsers.

Converting between notations in bulk? The colour converter does that. Building a whole palette from this one? The palette generator rotates it in OKLCH.

How to use it

  1. Set the hue first, then move on the field

    The strip picks the hue; the field then shows every lightness and chroma available at that hue. Doing it the other way round means chasing the colour, because changing hue redraws the whole field.

  2. Or take one off the screen

    "Pick from the screen" opens the browser eyedropper and reads any pixel on the desktop, including other applications. It only exists in Chromium-based browsers; elsewhere the button says so instead of failing silently.

  3. Or drop a screenshot and click it

    The image panel at the bottom takes any picture and hands back the exact pixel you click. This is the path that works in every browser, and it is the one to use when the eyedropper is missing.

  4. Copy in the notation the code wants

    Every notation is listed at once with its own copy button. Take the hex for a stylesheet that has to work everywhere, and the `oklch()` value when the colour matters more than the compatibility — the hex is a mapped approximation whenever the swatch is outside sRGB.

  5. Save the ones you are comparing

    "Save this one" keeps up to twelve swatches in a row you can click back to. They live in the page only — a reload clears them.

Common questions

The screen eyedropper button does nothing useful. Why?

It needs the EyeDropper API, which only Chromium-based browsers have shipped — Chrome, Edge, Arc, Brave. Firefox and Safari have not, and there is no polyfill for it because reading arbitrary screen pixels is a privilege the page cannot grant itself. Load a screenshot into the image panel instead; it gives the same answer.

Why is a large part of the field hatched?

Those lightness and chroma combinations exist in OKLCH but sRGB cannot display them at that hue. It is a real property of the space, not a bug, so the region is hatched rather than painted with the nearest colour it can show — a flat wall of colour there would be a lie about what your screen can do. "Bring into sRGB" reduces chroma until the colour fits, holding lightness and hue.

Does the eyedropper keep wide-gamut precision?

No. The API hands back an sRGB hex string, so a Display P3 colour on screen has already been converted by the time this page sees it. For a P3 colour you know the value of, type the `oklch()` or `color(display-p3 ...)` form into the colour converter instead.

Is the image I drop in uploaded anywhere?

No. It is decoded into a canvas in this tab and read pixel by pixel there. Nothing leaves the browser, and closing the tab discards it.

Feed it from

Colour Format Converter

Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.

Runs entirely in your browser

Contrast Checker

Scores a foreground and background pair against WCAG 2 and APCA and suggests the nearest passing colour.

Runs entirely in your browser

Palette Generator

Builds a harmonious palette from a base colour using complementary, triadic and analogous rules.

Runs entirely in your browser

CSS Gradient Builder

Builds linear, radial and conic gradients with draggable stops and emits the CSS, in sRGB or OKLCH.

Runs entirely in your browser

Next

These accept what this tool produces, so the result can go straight in.

Colour Format Converter

Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.

Runs entirely in your browser

Tint & Shade Scale

Generates a 50–950 lightness scale from one colour with perceptually even steps, ready as design tokens.

Runs entirely in your browser

Contrast Checker

Scores a foreground and background pair against WCAG 2 and APCA and suggests the nearest passing colour.

Runs entirely in your browser

Palette Extractor

Pulls an N-colour palette out of an image and exports it as hex, CSS variables or an ASE swatch.

Runs entirely in your browser

Palette Generator

Builds a harmonious palette from a base colour using complementary, triadic and analogous rules.

Runs entirely in your browser

Aspect Ratio Calculator

Works out the missing dimension for a target ratio and lists the standard sizes it matches.

Runs entirely in your browser