Color codes

The two lists colours are usually looked up in — the CSS keywords and the default Tailwind palette — with hex, RGB and the contrast ratio that decides whether text can sit on each one. For a colour on neither list, use the color converter.

What a contrast ratio is, and the four numbers worth knowing

Contrast is the ratio between the light two colours reflect, and it runs from 1:1 for two identical colours to 21:1 for black on white — that is the ceiling, and nothing beats it. Four points on that scale carry rules:

The ratio is symmetrical, and that catches people out. A colour at 4.5:1 against white is the same 4.5:1 whether the colour is the ink or the background — there is one pair and one number, so a palette cannot pass one way and fail the other.

What is not symmetrical is how it reads. Light text on a dark ground appears to bleed outward at the edges, an effect called halation, which thins the apparent stroke and hurts small or light weights more than the same contrast does the other way round. The ratio says the combination is allowed; it does not say the two directions look alike, and a caption that works as dark ink often wants a heavier weight when it is reversed out.

Reading a hex code

A hex colour is three bytes written in base 16: #RRGGBB, each pair from 00 to FF, which is 0 to 255. #FF0000 is red at full strength with no green and no blue. The three-digit form #F00 is the same colour — each digit is doubled, so #ABC means #AABBCC — which is why only colours whose pairs happen to repeat can be written short.

That also explains a thing people notice and mistrust: there are 16,777,216 hex colours, and the shorthand reaches only 4,096 of them.

Why the same hex looks different on two screens

A hex code is not a colour, it is an instruction to a display, and the display decides what to do with it. The web assumes sRGB unless told otherwise; a wide-gamut monitor showing the same numbers without colour management renders them more saturated, and a phone in a warm night mode shifts them again.

Nothing on this site can fix that, and it is worth knowing before spending an afternoon matching a screen to a print sample. For print, a CMYK figure from any converter is a conversion and not a proof — the printer's own profile is the only authority on what will come off the press.

CSS named colours

The 141 CSS colour keywords. CSS also accepts a grey spelling wherever a name contains gray — darkgrey, slategrey and the rest — which are the same colours and are not listed twice. The list was settled in CSS 2.1 and has been added to once since, when rebeccapurple was standardised in 2014. 2 pairs of names are the same colour: aqua and cyan are both #00FFFF, and fuchsia and magenta both #FF00FF.

"On white" and "on black" are WCAG 2.1 contrast ratios. Body text needs 4.5:1 and large text 3:1. "Text on it" is whichever of white and black reads better on the colour as a background.

The Tailwind CSS palette

The default palette of tailwindcss@3.4.17: 22 hues, eleven shades each, read from the package rather than transcribed. Shades in bold pass WCAG AA as text on a white page; the rest are for backgrounds, borders and large type.