Colour Palette & Contrast

Every swatch is measured against white and black with the WCAG 2.1 formula: each sRGB channel is linearised, combined into relative luminance (0.2126 R + 0.7152 G + 0.0722 B), and the ratio is (L₁ + 0.05) / (L₂ + 0.05) — from 1:1 to 21:1. WCAG asks for at least 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 / 4.5:1 at level AAA (success criteria 1.4.3 and 1.4.6). The page reports the better of white or black text on each swatch and marks which levels it reaches. The known edge case is reproduced: #767676 passes AA on white at 4.54:1, #777777 fails at 4.48:1.

Tints mix the base with white and shades with black at 20, 40, 60 and 80 % in sRGB — a straight interpolation of the channel values, which is what most design tools call "lighten" and "darken". Harmonies rotate the hue in HSL (CSS Color 4 conversion) while keeping saturation and lightness: complementary at 180°, analogous at ±30°, triadic at ±120°, split-complementary at ±150°, tetradic at 90° steps. A grey has no hue, so no harmonies are offered. These are the classical constructions; they are consistent and reproducible, not a judgement of taste, and HSL rotations do not preserve perceived lightness — a yellow at the same L looks lighter than a blue.

The CSS block declares one custom property per swatch on :root (--colour-base, --colour-tint-20, --colour-complementary, …) so it can be pasted into a stylesheet; the JSON carries hex, RGB, HSL and both contrast values for tooling. Hex values are lower case; HSL is rounded to one decimal.

Contrast between two arbitrary colours other than white and black (enter the second as the base and read the white/black figures, or use the JSON), perceptual colour spaces (OKLCH, Lab) and the APCA algorithm proposed for WCAG 3, colour-blindness simulation, and brand suitability. Contrast is measured for text on solid backgrounds; text over images or gradients needs the worst-case region checked by eye. Nothing you enter leaves the browser; the same four anonymous usage counts as the rest of the site apply.