Color Picker

Three ways of writing the same colour

HEX and RGB are the same information in different notation: three channel values from 0 to 255, written either as pairs of hexadecimal digits or as decimal numbers. HSL rearranges that information into axes that correspond to how people describe colour — which colour it is, how intense, how light. The conversion is exact and reversible, so nothing is lost either way, but the representations suit different tasks. RGB and HEX are what the rendering pipeline consumes. HSL is what you want when building a set of related colours, because holding hue constant while varying lightness produces a coherent scale, and doing the same thing in HEX requires arithmetic nobody does in their head.

Why contrast is not a matter of opinion

The Web Content Accessibility Guidelines define a contrast ratio between two colours, computed from their relative luminance. The calculation has a step that is easy to omit and important: the stored channel values are gamma-encoded, meaning they are not proportional to the light actually emitted, so each must be linearised before the three are combined. The weights applied after that — roughly 21% red, 72% green, 7% blue — reflect the eye’s sensitivity, which is why a saturated blue reads as dark and a saturated green as bright despite both being a full channel. Implementations that skip linearisation or use equal weights produce numbers that look plausible and are wrong by enough to matter, typically passing combinations that real users cannot read.

Extracting a palette

The naive approach — count each distinct colour and take the most frequent — fails on any photograph, because a smooth gradient produces thousands of values each appearing a handful of times, and the winner is an arbitrary shade that represents nothing. Quantisation fixes this by dividing the colour space into coarse regions and counting how many pixels fall in each, which groups perceptually similar shades together before ranking them. Reporting the mean of the pixels in each region rather than the region’s centre keeps the result faithful: the returned colour is one that genuinely appears in the image rather than an artefact of where the grid happened to fall. More sophisticated approaches exist, notably median-cut and k-means clustering, which produce better results on images with unusual distributions at considerably greater cost.