Loading…
Loading…
Pick any colour with a saturation/brightness square, from anywhere on your screen (EyeDropper), or from a photo — and get it in HEX, RGB, HSL, OKLCH and more.
Also covers: Online color picker · Image color picker · Screen color picker · Eyedropper tool
Pick from an image
Drop an image here
or paste from the clipboard · JPG, PNG, WebP, AVIF, HEIC, GIF, BMP, TIFF
Then click anywhere on it. The image stays on your device.
Every format
Drag in the square and hue bar, type a value, pick from anywhere on screen (Chrome, Edge), or click a spot on a photo.
HEX, RGB, HSL, HSV, CMYK, OKLCH and more, each with a copy button.
Click “Pick from screen” — it uses the browser's EyeDropper API (Chrome, Edge, Opera). In other browsers, take a screenshot and pick from it as an image.
No. It's drawn on a canvas in your browser; the colour is read from the pixel you click, at full resolution.
HEX and rgb() work everywhere. oklch() is supported by all current browsers and makes it easy to make lighter or darker versions of a colour.
Colour
Convert any colour between HEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, OKLab and OKLCH, with the nearest CSS colour name.
Palettes
Build a palette from one colour — a 50–950 shade scale or complementary, analogous, triadic and other harmonies, worked out in OKLCH — and export CSS, Tailwind, SCSS or JSON.
Colour
Pull the main colours out of a photo or logo, with how much of the image each covers, and export them as CSS variables or JSON.
Accessibility
Check text and background colours against WCAG 2.2 AA and AAA, see the exact contrast ratio, and get the closest colour that passes.
CSS
Design linear, radial and conic CSS gradients with any number of colour stops and vivid OKLCH blending, and copy the CSS.
CSS
Layer soft, hard, inset and glowing box-shadows with a live preview, and copy the CSS.