Color Picker

What this tool does

Color Picker combines a saturation and brightness area, hue and opacity sliders, a screen eyedropper and click-to-pick on uploaded images. Every pick is shown in all common notations with its contrast against white and black, and recent colours are remembered.

Designers and developers constantly need the exact code of a colour: the blue in a logo, the shade of a button in a screenshot, or a new accent that matches a photo. Operating system pickers rarely show modern CSS formats, and copying from a design app means opening a whole project.

This picker uses the HSV model that most design tools use: the large area sets saturation horizontally and brightness vertically, the slider below sets the hue, and the second slider sets opacity. In Chrome, Edge and Opera on desktop, Pick from screen uses the browser's EyeDropper API to sample any pixel on your display, including other windows. You can also drop an image and click a pixel. The result is converted with the culori colour library to HEX, RGB, HSL, HSV, HWB, CIELAB, LCH, OKLab, OKLCH, Display P3 and an approximate CMYK.

How to use Color Picker

1. Drag in the colour area or use the arrow keys (hold Shift for bigger steps) to set saturation and brightness.
2. Move the Hue slider to change the colour family and the Opacity slider for transparency.
3. Or type any value into Colour value, press Pick from screen, or drop an image under Pick from an image and click a pixel.
4. Check the On white and On black contrast ratios to see where the colour is readable.
5. Copy the notation you need from the list; Save to recent keeps the colour in Recent colours.

Tips for better results

• Use OKLCH in modern CSS when you want to create lighter or darker variants by changing only the first number.
• A HEX value with eight digits, such as #4f46e580, includes opacity; 80 in hexadecimal is 128, about 50%.
• Screenshots of the same colour can differ slightly because of colour profiles and compression, so sample a flat area, not an edge.
• Contrast of at least 4.5:1 against the background is needed for normal-size text under WCAG AA.

Common use cases

• Grabbing a brand colour from a logo or website screenshot.
• Choosing an accent colour for CSS, Figma, Canva or slides.
• Converting a colour from a design hand-off into the format your codebase uses.
• Checking quickly whether a colour works as text on white or on black.

Common mistakes to avoid

• Sampling an anti-aliased edge or a JPEG artefact, which gives a blend instead of the real colour.
• Treating the CMYK value as print-ready: real print conversion depends on the press, paper and ICC profile.
• Forgetting that opacity changes how a colour looks; the same rgba value looks different over light and dark backgrounds.