Extract colours from an image, check WCAG contrast, convert HEX, RGB, HSL.
Choose an image to see its main colours.
Three small colour jobs in one place. Colours from an image reads a picture and returns its main colours, each with the share of the picture it covers, so you can lift a palette from a photo, a logo or a screenshot. Contrast checker tells you whether text in one colour is readable on another colour, against the WCAG accessibility guidelines. Converter turns a colour between HEX, RGB and HSL as you type. The image is processed in your browser and is never uploaded.
The tool shrinks the picture to at most 160 pixels on the long side, counts every pixel into a grid of similar colours, and then repeatedly cuts the group with the widest spread of colours in two. This is the median cut method. Each swatch is the exact average of the pixels in its group, and the percentage is how many pixels that group holds. Transparent pixels are ignored. The method has no random element, so the same image always gives the same palette. Keep in mind that "main" means by area: a small bright logo on a large grey background will show the grey first.
Contrast is the ratio between the brightness of two colours, from 1:1 (identical) to 21:1 (black on white). WCAG 2 sets the minimum for readable text at 4.5:1 for normal text and 3:1 for large text, which means 24 pixels, or 18.66 pixels in bold, and above. The stricter AAA level asks for 7:1 and 4.5:1. Buttons, icons and form borders need 3:1 against what is next to them. The tool shows each check as a clear pass or fail, with a preview of your text on your background.
When normal text fails, the tool suggests the closest colour with the same hue and saturation that does pass, and a button applies it.
Grey text with the colour #777777 on a white background has a contrast ratio of 4.48:1. That fails AA for normal text by a small margin, and it is a very common web colour. Darken the grey to #767676 and the ratio becomes 4.54:1, which passes. The difference is invisible to most people and decides whether a page passes an accessibility audit. As another example, white text on the orange #ea580c has a ratio of about 3.6:1: acceptable for large headings, not for body text.
Type in the HEX, RGB or HSL field, or use the colour picker, and the other two follow. The tool accepts 3 or 6 digit hex with or without the hash, rgb(234, 88, 12) with commas or spaces, and hsl(21, 90%, 48%). HSL is shown in whole numbers, as CSS usually writes it, so converting a colour from HSL back to HEX can differ from the original by one step.
Images up to 40 MB and about 50 megapixels. Colours are read as they appear in the browser, in sRGB.
No. The picture is decoded and shrunk by your browser and the colours are calculated on your device.
For WCAG 2 level AA, 4.5:1 for normal text and 3:1 for large text and for interface parts such as button borders and icons. For level AAA, 7:1 for normal text and 4.5:1 for large text.
Text of 24 pixels (18 points) or bigger, or 18.66 pixels (14 points) or bigger if it is bold.
Tools differ in how they group similar colours. This one uses median cut on a small version of the image and reports each swatch as the true average of its pixels. The result is always the same for the same image.
HSL is displayed in whole numbers, which loses a little precision. Keep the HEX value as the master copy of the colour.
