Colour Tools

Loading…

Fifteen tools for colour, and four things they will not pretend

Contrast first, because it is the one with a number somebody has to hit: the ratio between two colours, what it passes at both conformance levels and both text sizes, and — the half people come back for — the nearest colour of the same hue that does pass. Then the same question over a whole palette as a matrix of every pair, and a ladder of shades built from one colour with its contrast on light and dark beside each rung.

Then colour vision. A palette as four kinds of it receive it, with the pairs that collapse listed by name, because "colour-blind safe" is three questions and not one: red against green survives tritanopia and fails deuteranopia, and a cyan against a spring green does the opposite. Then the tools that describe a colour — its nearest CSS keywords, its distance from another by all three published metrics at once, and the light temperature it corresponds to, where it corresponds to one at all.

Then making colours from colours: mixing in parts as light, as ink or as an eye sees it; an even run between two or more stops in the space you choose; a numbered ladder for a design system; and a light palette derived into a dark one that keeps the contrast it had rather than turning the lightness upside down. Last, getting a palette out — as CSS, SCSS, JSON, a GIMP file, a table or a printable sheet — and a screen colour as four printing inks with the coverage it would lay down. Last of all, where a picture actually lies in colour space: its distribution by hue and by lightness, its histogram as numbers, the commonest colours with their share of the area, and a stated grid of samples.

Contrast

Contrast checker
The ratio between two colours, what it passes, and the nearest colour that does

Contrast matrix
Every pair in a palette against every other, with the failing ones marked

Accessible palette
A ladder of shades from one colour, each with its contrast on light and dark

Colour vision

Colour vision test
A row of hues to put in order, then scored — an exercise, never a diagnosis

Describing a colour

Colour difference
How far apart two colours look, by all three published metrics at once

Colour temperature
Kelvin to the colour of that light and back, with the sources people name

Making colours

Colour mixer
Two or more colours mixed in parts, as light, as ink or as an eye sees it

Colour scale
An even run of colours between two or more stops, in the space you choose

Shade ladder
A numbered ladder of shades from one colour, the way a design system numbers them

Dark mode palette
A light palette derived into a dark one that keeps the contrast it had

Getting it out

Palette exporter
A palette written out as CSS, SCSS, JSON, a GIMP file, a table or a printable sheet

RGB to CMYK
A screen colour as four printing inks, with the coverage it would lay down

Out of a picture

Image colour map
Where a picture lies in colour space: the hue and lightness distribution, the histogram, the commonest colours and a grid of samples.

Questions

Why is the midpoint between blue and yellow a muddy grey?
Because it was taken in sRGB, where the numbers are what a screen is fed rather than what an eye receives. The same midpoint in CIELAB is the green you expected. Every tool here that makes a colour from other colours says which space it worked in, because the answer changes with it — and CIELAB is the default, since it is the only one of the three where equal steps look equal.
Which colour difference metric should I use?
CIEDE2000, which is the current standard, and the difference tool shows all three anyway because they disagree. CIE76 is a straight line in Lab and is wrong about saturated blues by about a factor of two; CIE94 corrects the chroma and hue terms; CIEDE2000 adds a rotation term for the blue region. All three are rules of thumb about what an eye notices, not thresholds anybody has to hit.
Can this match a Pantone or a brand swatch book?
No, and it says so rather than guessing. Those name lists are licensed, and a match made without the physical book and a press profile beside it is a guess wearing a brand. The print tool converts to CMYK by the formula with nothing behind it, reports the total ink coverage against a limit you set, and leaves whether a colour prints at all as a question for the printer.
Can it pull the colours out of a photograph?
Yes, and it does it without the photograph leaving your device. The image colour map reads a picture and gives its distribution by hue and by lightness, its histogram, the commonest colours with their share of the area, and a grid of samples each averaged over the square around it. What it does not have is the loupe you drag across the picture: that is a pointer and a texture rather than a function, so the samples are a stated grid anybody with the same picture can reproduce.