Colors from an image

1. 01Choose a logo, photo or screenshot or drag it into the box. A screenshot of a website is enough to get its colors.
2. 02Set the number. Each color appears as HEX and RGB, with its share and whether white or black text is readable on it.
3. 03Copy them one by one or all together, as CSS variables for the website or as a simple list for the print shop.

How the colors are found: The color space is divided into boxes of equal size, and every pixel falls into exactly one. The fullest boxes win; their color is the average of the pixels inside. Tones that are too close to each other are merged into one color. There is no randomness involved: the same image always gives exactly the same colors. Anything that makes up less than half a percent of the image is not offered: at the edge between two areas, drawing creates mixed tones that do not exist in the logo at all. If there is nothing bigger in the whole image, the limit does not apply: then you get a tiny color rather than an empty list.

Why the percentages do not add up to 100: The share tells you how much of the visible image belongs to this color. Transparent areas do not count: where the opacity is below half, there is no color that is really in the image, because what you would see depends on what lies underneath. For a logo on a transparent background, the percentages therefore refer to the logo, not to the whole area; the line below the list tells you how much is transparent. A photo has countless in-between tones that are not enough for a color of their own. They drop out. For a logo with clear areas, the percentages usually come very close to 100, for a sunset rather not. The bar above the list shows this too: the hatched rest is everything that is not in the list. The line below the list tells you what it consists of: gray tones set aside, more colors that did not fit, tiny spots below half a percent, or in-between tones. Each reason is named on its own from half a percent: exactly from there, the bar also draws the rest.

Gray, black and white: They are moved to the back, because otherwise the white background would top the list for almost every logo. If colorful tones are missing, they move up on their own. So a black and white image still gets all of its colors. With the switch, you can let them count equally at any time.

The eyedropper reads from your original, not from the reduced preview. It averages over the few pixels under your finger, otherwise you would catch a single outlier in a photo. If the spot is more than half transparent (opacity below 50%), it says so instead of making up a color. That is the same limit as in the color list. If it is only slightly transparent, you get the color along with its opacity: on a different background it looks different.

Readable text: For each color, the contrast with white and with black is calculated according to WCAG 2.1. From 4.5:1, normal text counts as readable, from 3:1 large text (from 24 px or from 18.66 px bold). That is the number testing bodies measure against too. It is rounded down to two decimal places, so it never slips onto a threshold the value does not actually reach. More on this, and on calculating your own color pairs, in the color tool (in German).

Limits: The calculation runs on a reduced copy of your image (at most about 480,000 pixels). That is accurate enough for the colors and keeps even a 12 megapixel photo smooth. The values are plain RGB, as the screen shows it; a color profile from the file is not converted. For print, the HEX value is the reliable reference, the conversion to CMYK is done by the print shop. Only Safari can open HEIC photos from an iPhone; otherwise, set the iPhone camera to “Most Compatible”.