Designers, developers, bloggers and anyone making a slide or a social post eventually need the exact code for a colour. This free color picker gives you every format in one place: HEX for CSS and design tools, RGB and HSL for code, and an approximate CMYK mix for print. Choose a colour with the picker, type or paste a HEX code you already have, or upload a photo or screenshot and tap anywhere on it to sample the exact pixel. On supported browsers such as Chrome and Edge on desktop, an eyedropper button lets you pick a colour from anywhere on your screen. To help you design accessible pages, the tool also calculates the WCAG contrast ratio of your colour against white and black text and tells you whether it passes the AA and AAA levels for normal and large text, which matters for readability and usable websites. Copy any value with one click. Your images are opened only on your own device using the canvas; they are never uploaded. A note on CMYK: screen-to-print conversion depends on the printer's colour profile, so treat it as a starting point and ask your printer for a proof.
Pick a colour
Contrast (WCAG 2)
How to use the color picker
- Choose a colour, type a HEX code, or upload an image and click on it.
- Copy the HEX, RGB, HSL or CMYK value you need.
- Check the contrast table before using the colour for text or buttons.
Contrast levels explained
- AA normal text: at least 4.5:1
- AA large text (about 24px, or 19px bold): at least 3:1
- AAA normal text: at least 7:1
FAQ
How do I get a colour from a website?
On desktop Chrome or Edge, use the Eyedropper button. On other browsers, take a screenshot, upload it here and click the colour.
What’s the difference between HEX and RGB?
They describe the same colour. HEX is RGB written in base 16: #7C3AED means red 124, green 58, blue 237.
Is the CMYK value exact?
No. It’s a simple mathematical conversion. Real print colours depend on the printer, ink and paper profile.
Are my images uploaded?
No. They’re drawn on a canvas in your browser only.
Comments
Post a Comment