Colour

Browser-based utilities that measure the relationship between two or more colours — contrast ratio, perceived lightness, colour-vision behaviour — and produce palettes, ramps and tokens from them. The useful ones compute those relationships from the colour you supply rather than matching it against a fixed list of approved pairs.

Nine tools that share one engine, so a colour you fix in the contrast checker is a colour the palette generator, the ramp builder, the colour-blindness simulator and the name finder already understand.

The difference from every other colour tool is that these tell you what to change. Anything can report that a pair fails; finding the nearest passing colour that holds your brand hue is the part that takes measurement.

Every number on these pages is computed in your browser from the colour you gave it — WCAG 2 ratios, APCA lightness contrast, CIEDE2000 difference, and the Machado model for colour-vision deficiency. Nothing is looked up from a table of pre-approved pairs.

The site audits its own interface with the same engine on every build. The tool cards you are about to click were each assigned their colour by stepping lightness at fixed chroma until the result cleared 4.5:1 against its own tint, in both themes. A colour tool whose own interface quietly failed its checker would be the most embarrassing defect available.

• A failure comes back with its fix attached

  Contrast is driven almost entirely by lightness; hue and saturation barely move it. That is what makes a failing brand colour solvable — the search runs along the lightness axis at fixed hue and chroma, so what comes back is still recognisably your colour. Candidates are ranked by CIEDE2000, smallest visible change first.

  #4a9fe8 measures 2.83:1 on white. Holding hue 247° and its chroma and moving OKLCH lightness from 0.682 to 0.567 gives #207bc1 at 4.50:1.

• Two contrast models, with the disagreement explained

  WCAG 2 compares two colours and nothing else, so a 12px hairline caption and a 32px bold heading in the same pair score identically. APCA weighs size and weight. Both are shown, because conformance is still measured against WCAG 2 and APCA is the better predictor of whether anyone can read the thing.

  WCAG 2 returns a ratio from 1:1 to 21:1. APCA scores on a signed scale from about −108 to +106 Lc and takes font size and weight as inputs; at 14px regular it cannot pass at any contrast, not even black on white.

• Colours checked against each other, not only against a ground

  A contrast checker asks whether a foreground separates from a background. It never asks whether two foregrounds separate from each other, and that is the failure that takes out status colours, chart series and category keys.

  Bootstrap’s danger red and success green sit about 74 apart in perceptual distance for typical vision and about 4 under deuteranopia. Tailwind’s red-500 and green-500 fall from 76 to about 8.

• OKLCH as the working space

  Ramps, harmonies and lightness searches all run in OKLCH, where equal steps in lightness look equal. HSL lightness is a transform of RGB with no model of vision in it, which is why an evenly stepped HSL ramp does not look evenly stepped.

  At an HSL lightness of 50%, yellow has a relative luminance of 0.928 and blue 0.072 — a factor of nearly 13 at the same nominal lightness.

1. 1

   Start from the colour you are not allowed to change

   Almost every real colour problem begins with one fixed value — a logo colour, a client’s hex code, an existing token. Put that in first. Generating a set and then discovering the brand colour does not fit it is the long way round.

2. 2

   Build the ramp in OKLCH

   Eleven steps from 50 to 950, lightness stepped evenly and chroma tapered at both ends. Do not build it by mixing toward white and black in HSL: the steps come out uneven and the hue drifts.

3. 3

   Assign roles by measurement

   Decide which step is text, which is border and which is surface by reading the contrast figures rather than by eye. A vivid brand colour is made to be seen at size on a logo; as 16px body copy it usually misses 4.5:1, and the step two or three darker still reads as the brand.

4. 4

   Check the palette against itself

   Run every colour against every other under simulated colour-vision deficiency. This is the check a contrast tool structurally cannot perform, and it is where red-and-green status pairs come apart.

5. 5

   Fix by lightness, then measure again

   Move a failing colour along its own lightness axis instead of choosing a new one, and re-check on the other ground too — a colour that carries text on white often fails on black, and the reverse.

• You have a specific pair that fails an audit

  Contrast checker

  It returns the nearest passing colour at your hue rather than just confirming the failure, so the brand survives the fix.

• You are starting from one brand colour

  Ramp & token generator

  Eleven steps with text, border and surface roles assigned by measurement rather than by convention.

• You are starting from nothing

  Palette generator

  Press space, lock what you like. Every set is audited as it is generated, so an unusable palette never survives to the next screen.

• You need to know if a palette is distinguishable

  Colour blindness simulator

  It compares every colour against every other, which is the pairwise check a contrast tool cannot do.

• You have a photograph and want its palette

  Image picker

  Extraction plus the audit, so you find out immediately whether you can set text in what you pulled out.

• You need to call a colour something

  Colour name finder

  Every name comes with its measured distance, so you know whether “royalblue” is your colour or only its neighbour, and a palette exports as named tokens.

• APCA scores on a signed scale from about −108 to +106 Lc, and accounts for font size and weight; WCAG 2 returns a ratio from 1:1 to 21:1 and does not.

• At the same HSL lightness of 50%, yellow has a relative luminance of 0.928 and blue 0.072 — a factor of nearly 13, which is why HSL is the wrong space for building a ramp.

• Bootstrap’s danger and success colours both measure 4.53:1 on white, and their perceptual distance falls from about 74 to about 4 under deuteranopia.

• Each of this site’s tool cards was assigned its colour by stepping lightness at fixed chroma until the result cleared 4.5:1 against its own tint, in both themes.

• Reference

  Colour library

  Every named colour, measured.

• 4 tools

  CSS

  Gradients and surfaces as CSS you paste, measured as they will paint.

• 3 tools

  Typography

  Pairing, scale, readability and font identification — measured the same way.

• 3 tools

  Branding

  Marks, codes and sheets — the things that carry the brand.

• 6 tools

  Writing

  Resumes, cover letters, word counts and interface copy, held to the same standard as the pixels.

• 15 tools

  PDF

  Merge, split, protect and convert — none of it uploaded.

• 3 tools

  Video & audio

  Trim, extract and convert — decoded by your own browser, not a server.

• 14 tools

  Converters

  Change a file’s format or size, or a length’s unit, without anything leaving your device.