Color Picker & Converter
Pick a colour from your screen or an image and get it as HEX, RGB, HSL, OKLCH, Lab, Display P3 and more.
Values
Tints and shades
Pick from an image
Drop a photo or screenshot, then click anywhere on it.
About this tool
Type or paste a colour in any CSS notation, pick one from anywhere on your screen, or drop an image and click on it. You get the same colour as HEX, RGB, HSL, HWB, OKLCH, OKLab, CIE Lab and LCH, Display P3, HSV and CMYK, each one click away from your clipboard.
The sliders work in OKLCH, where lightness, chroma and hue behave the way eyes expect: changing the hue doesn’t make a colour look lighter or darker. The tracks show what each slider would do, and marks show where sRGB and Display P3 run out of colour.
Colours outside sRGB are kept exactly in the notations that can hold them (OKLCH, Lab, Display P3), and HEX, RGB and HSL show the nearest colour inside sRGB, with a note saying so. Nothing is clipped silently.
Why do HEX and OKLCH disagree for some colours?
HEX, RGB and HSL can only describe sRGB, the colours of a standard screen. Wider colours, like many on recent phones and Macs, are kept in OKLCH and Display P3; the sRGB notations show the closest colour with the same lightness and hue.
How accurate is CMYK?
Only roughly. Real CMYK depends on the paper, inks and colour profile a printer uses, and a browser has no access to those. Ask your printer for exact values, or convert with their profile in a design app.
Why can’t I pick from my screen?
Picking from anywhere on screen uses the EyeDropper API, which Chrome and Edge support on desktop. In other browsers, drop a screenshot and pick from that instead.