Convert colours
Write a colour in HEX, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() or by its CSS name, and get HEX, RGB, HSL and HWB. Below you get the contrast ratio against white and black: the number that tells you whether text in that colour is readable.
Your text stays on your device: nothing is uploaded
Result
Paste something on the left: the result appears as you type.
How it works
Converting between HEX and RGB is arithmetic. What is worth looking at is the contrast ratio: it tells you how well two colours stand apart to the eye. Above 4.5 normal text is readable even for people with poor sight, above 3 large text is, below that neither. We accept CSS notation with commas and with spaces, and all 148 CSS colour names. A semi-transparent colour is measured as it looks on screen, that is laid over white and over black.
Frequently asked questions
- Does the contrast take transparency into account?
- Yes. A semi-transparent colour, such as #3366cc80 or rgb(51 102 204 / 50%), is measured as it looks on screen: laid over white for the “on white” figure, over black for the “on black” one. That is why transparent comes out at 1 on both: it cannot be told apart from any background. If your real background is another colour, the true contrast will differ.
- Can I measure the contrast between any two colours?
- No: the comparison is only against white and against black, and below it you see which of the two suits the colour better. The thresholds mentioned are the AA ones; the stricter AAA level asks for 7 for normal text and 4.5 for large text, so compare those with the number shown.
- What counts as “large text”?
- For WCAG, large text is at least 18 point, which is 24 CSS pixels, or at least 14 point in bold, about 18.7 pixels. Only there is a ratio of 3 enough; for everything else, body text included, the threshold stays at 4.5.
- Which notations does it understand?
- HEX with 3, 4, 6 or 8 digits, with or without the hash sign; rgb(), rgba(), hsl(), hsla() and hwb(); lab(), lch(), oklab() and oklch(); and all 148 CSS colour names, such as navy, coral or rebeccapurple, plus transparent. Angles can be written in degrees, radians, gradians or turns. It does not read color(), color-mix() or relative colours: for those you need the value in one of the notations above. A lab() or oklch() colour more saturated than a standard screen can show is brought within range, and a note under the result says so.
- Do I get the same colour back from the HSL?
- Yes. HSL and HWB are shown with one decimal place, which is enough to get exactly the same HEX back: pasted here again, or used in a stylesheet, they give the same colour. Transparency is shown with one decimal for the same reason.
What you paste is never uploaded. Anywhere.
The text you type stays in your browser’s memory: no request goes out while you type. You can paste something confidential.
- Processed locallyEverything happens on this page.
- Nothing to upload, nothing to wait forNothing to upload, no waiting.
- Nothing to deleteWe keep nothing: nothing reaches us.