Color Converter — HEX, RGB, HSL and WCAG Contrast

HEX, RGB, HSL and HSV are four ways of naming the same point, and converting between them is straightforward arithmetic. HSL and HSV differ more than their names suggest: for a fully saturated red, HSL lightness is 50% while HSV value is 100%, because HSL treats white and black as the two poles while HSV treats black as the floor and full colour as the ceiling. Picking the wrong one is why a colour ramp built in a design tool sometimes looks nothing like the one built in code.

The contrast figure is the part worth getting right, and it is not the difference between two brightness values. WCAG defines it as a ratio of relative luminances, where each channel is first taken back out of the sRGB gamma curve — displays encode values non-linearly, so averaging the encoded numbers measures the wrong thing — then weighted by how much that primary actually contributes to perceived brightness. Green carries 71% of it and blue barely 7%. A tool that averages the channels, or compares HSL lightness, produces a number that looks plausible and fails a real audit.

Two fixed points pin the formula: black on white is exactly 21:1, and any colour against itself is exactly 1:1. Both are asserted by tests here. The thresholds that matter are 4.5:1 for body text, 3:1 for large text at 18pt or 14pt bold, and 7:1 for the enhanced level. #999999 on white is a famous near-miss at 2.85:1 — it fails even the large-text threshold, which is why it turns up in so many audit reports.