Home / Image tools / colour
Arithmetic
Hex, RGB and HSL converter
Type a colour in any of the three notations and the others follow. The contrast figures underneath tell you whether text will actually be readable on it.
Edit any field.
Values
What the contrast numbers mean
Contrast ratio compares the relative luminance of two colours and runs from 1, meaning identical, to 21, meaning black against white. The widely used accessibility thresholds are 4.5 for normal body text and 3 for large text, which usually means 24 pixels or 19 pixels bold and above.
This matters more than designers expect. A pale grey caption on white is the single most common accessibility failure on the web, and it fails for everybody in bright sunlight, not only for people with low vision.
The figures here compare your colour against pure white and pure black, which tells you which text colour to put on it. For a specific pair, set one as your colour and read the ratio for the nearer of the two.
Common questions
Why does my three character hex work?
Shorthand hex doubles each digit, so #f80 means #ff8800. Both are accepted here.
What about alpha or transparency?
Eight digit hex with alpha is accepted but the alpha is ignored for conversion, since RGB and HSL here describe the colour itself. Contrast against a transparent colour depends on what is behind it.
Other image tools