How to use the Color Picker
- 1 Click the large colour box to open the picker, or type a HEX, RGB or HSL value in the field below it.
- 2 In Chrome and Edge, press Pick from screen to sample any colour visible on your display.
- 3 Click any format card to copy it: HEX for CSS, RGB for code, HSL for adjusting lightness, CMYK as a print starting point.
- 4 Use the shade strip to copy a lighter or darker version, and check the contrast boxes before using the colour behind text.
Features
Four formats at once
HEX, RGB, HSL and CMYK update together, so you can move between design tools, CSS and print briefs without a separate converter.
Shades and tints
Eleven steps from very light to very dark keep the same hue and saturation, which is a quick way to build a consistent palette.
WCAG contrast check
See the contrast ratio of white and black text on your colour, marked AAA, AA or AA large text only, based on the WCAG 2 formula.
Eyedropper where supported
Browsers that support the EyeDropper API let you pick a colour from anywhere on your screen, such as a logo in another window.
When to use it
Matching a brand colour
Pick the colour from a logo with the eyedropper and copy its HEX code into your website, slides or Canva design.
Making text readable
Before you put white text on a coloured button, check that the contrast is at least 4.5:1 for normal text.
Frequently asked questions
What is the difference between HEX and RGB?
They describe the same colour. HEX writes the red, green and blue amounts as two hexadecimal digits each, like #1D4ED8, while RGB writes them as numbers from 0 to 255, like rgb(29, 78, 216).
Is the CMYK value exact for printing?
No. It is a simple mathematical conversion. Printers use colour profiles for their inks and paper, so treat it as a starting point and ask your printer for a proof.
What contrast ratio do I need?
WCAG asks for at least 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold). 7:1 meets the stricter AAA level.
Why is there no Pick from screen button?
It needs the EyeDropper API, which is available in Chrome, Edge and Opera on desktop. In other browsers, use the colour box or type a code.
What is HSL useful for?
HSL stands for hue, saturation and lightness. Changing only the lightness keeps the same colour family, which makes hover states and palettes easier to build.
Reviewed by ToolsUnlocked Team · Last updated