🎨 Free Colour Tools
Convert, check, and build — the four things colour work actually needs.
Colour work on a screen comes down to four recurring tasks: translating a value between the notations different tools speak, checking that text will actually be readable on its background, building a set of colours that belong together, and writing the CSS for a gradient. Each has its own page here, with the reasoning behind the numbers rather than just the numbers.
All Colour Tools
HEX to RGB Converter
Translate between HEX, RGB and HSL in any direction, with a swatch and a copyable CSS variable.
Contrast Checker
The WCAG ratio, the verdict at AA and AAA, and a live preview at both text sizes.
Palette Generator
Ten colours from one base, by shade ramp, complementary, analogous, triadic or split.
Gradient Generator
Linear, radial and conic gradients with the CSS written out as you adjust the stops.
Three notations for the same colours
HEX, RGB and HSL are three ways of writing the same instruction to a screen. #2563eb and rgb(37, 99, 235) are the same three channels in different alphabets — hexadecimal pairs against decimal numbers — which is why converting between them is arithmetic with no judgement in it.
HSL rearranges those channels into hue, saturation and lightness: an angle on the colour wheel, how vivid the colour is, and how light. That is the notation worth learning, because it maps onto the adjustments people actually want to make. A hover state 10% lighter is one number in HSL and three unrelated numbers in RGB, which is why palettes built in HSL stay coherent and palettes built by nudging hex digits drift.
Its weakness is that lightness is not perceptual. Yellow and blue at the same stated lightness look nothing alike in brightness, which is why two colours that seem balanced in a picker can fail a contrast check. Measure rather than trust the number — that is what the contrast checker is for.
Contrast is the part with rules attached
Most colour decisions are taste. Contrast is not: WCAG sets 4.5:1 for normal text at level AA and 7:1 at AAA, with large text allowed 3:1. Since WCAG 2.1 the same 3:1 minimum covers interface components too — input borders, focus rings, icons that carry meaning — which is where otherwise careful designs usually fall down.
These thresholds are referenced by the European Accessibility Act, EN 301 549 and public-sector accessibility rules in many countries, so for a good deal of the web they are a legal floor rather than a recommendation. The two failures worth checking first are pale grey placeholder text inside form fields, which almost never passes, and pale borders on inputs.
Treat a pass as necessary rather than sufficient. Text at exactly 4.5:1 clears the bar and is still tiring to read at length, particularly on a phone outdoors. Where the design allows it, body copy is worth pushing toward 7:1 — usually the cost of one slightly darker grey.