Colour picker and contrast checker
Pick a colour and get its HEX, RGB and HSL values, build a palette from it, and check whether text on a background is easy enough to read.
Your colour
Runs on your phone. Nothing is uploaded or saved. Copy puts the value on your clipboard only.
Pick a colour from an image
Choose or drop a photo, then tap or drag on it to pick a colour. The photo is drawn on your device only: it is never uploaded or saved.
Drop a photo here, or use the button above.
Keyboard: focus the image and use the arrow keys to move the picker (hold Shift for bigger steps).
Main colours in this image
Tap a swatch to use it as your colour.
Contrast checker
Good to know
Contrast goes from 1:1 (same colour) to 21:1 (black on white). WCAG 2.2 asks for at least 4.5:1 for normal text and 3:1 for large text (level AA), and 7:1 and 4.5:1 for the stricter level AAA.
Large text is at least 18 point, or 14 point bold: roughly 24 or 18.66 CSS pixels. Buttons, icons and input borders need at least 3:1 against what is next to them.
About 1 in 12 men see some colours differently, most often red and green. Add a word, an icon or a pattern as well as colour, for example "Error" next to a red border.
Tints mix in white and shades mix in black. Complementary is the opposite side of the colour wheel (180°), analogous are neighbours (±30°), and triadic are three colours spaced 120° apart.
Sources: W3C, Web Content Accessibility Guidelines (WCAG) 2.2: Success Criteria 1.4.3 Contrast (Minimum), 1.4.6 Contrast (Enhanced), 1.4.11 Non-text Contrast and 1.4.1 Use of Color, with the WCAG definitions of contrast ratio, relative luminance and large-scale text (18 point, or 14 point bold); the W3C ACT rule "Text has enhanced contrast". US National Eye Institute (nei.nih.gov): about 1 in 12 men have a colour vision deficiency, red-green is the most common type; far fewer women are affected (about 1 in 200 in studies of people of Northern European descent). The colour-blindness preview uses the simulation matrices of Machado, Oliveira and Fernandes (2009) and is only an approximation: people's colour vision varies.