Color Converter
Convert a color between HEX, RGB, HSL, HSV and CMYK, and check its WCAG contrast ratio against black and white text.
| Conversions | Enter a color above, then press Convert. |
The same hex code renders differently on two screens
#2F6FED is not a color. It is a set of coordinates in a color space,
and until you know which space, the numbers do not name anything. Almost all web colors are in
sRGB, which has been the default since the 1990s. Modern phones and laptops
ship displays with a wider gamut — Display P3 — that can produce saturated reds
and greens sRGB cannot express.
The practical consequence: a design handed over as hex values will look slightly different on a
wide-gamut display unless the color is explicitly tagged. CSS now supports this with
color(display-p3 …), but hex and rgb() remain sRGB by
definition. Every conversion on this page is sRGB, which is what you want for the web.
Contrast is measurable, not subjective
WCAG defines contrast as a ratio derived from relative luminance — not brightness as you perceive it, but luminance after gamma decoding, weighted heavily toward green because the human eye is most sensitive there. The formula weights red at 0.2126, green at 0.7152 and blue at 0.0722.
| Level | Minimum ratio | Applies to |
|---|---|---|
| AA — normal text | 4.5 : 1 | Body copy under 18 pt |
| AA — large text | 3 : 1 | 18 pt and above, or 14 pt bold |
| AAA — normal text | 7 : 1 | Enhanced accessibility target |
| Non-text UI | 3 : 1 | Borders, icons, focus indicators |
The panel above reports both ratios and tells you which passes. Note that AA and AAA are thresholds, not scores — a ratio of 4.4 is a fail, not "nearly passing".
Equal ratios are not equally readable. The WCAG formula is known to over-reward some dark-on-light pairs and under-reward others, particularly with saturated blues. Treat 4.5 : 1 as a legal minimum, not as a guarantee that your text is comfortable to read.
When HSL is the better choice
Hex is good for naming an exact color and bad for describing a relationship between colors. If your design system needs a hover state, a disabled state and a dark variant of the same brand color, HSL lets you derive them by changing one number — the lightness — and keep the hue and saturation identical. Doing that in hex means re-deriving three unrelated values.
The trade-off is that HSL's lightness is perceptually uneven: yellow at 50% lightness looks far brighter than blue at 50% lightness. For design tokens where perceived brightness matters, perceptually uniform spaces such as OKLCH are the modern answer, and CSS supports them natively in current browsers.
Frequently asked questions
What does the fourth pair of hex digits mean?
Alpha, from 00 (fully transparent) to FF (opaque). #2F6FED80 is the same color at roughly 50% opacity. Note that 8-digit hex is RGBA order, while some design tools export ARGB — a classic source of wrong colors.
Why does CMYK look duller than RGB?
RGB is additive light; CMYK is subtractive ink on paper. The printable gamut is genuinely smaller, so saturated screen colors cannot be reproduced in print. Converting is a best-effort mapping, not a lossless one.
Should I use 3-digit or 6-digit hex?
They are equivalent: #abc expands to #aabbcc. Use whichever is shorter, but be aware that only a subset of colors can be written in three digits.
How do I pick accessible text for a colored button?
Compare the contrast ratio of your background against both black and white, and take the higher one. The panel above does exactly that and reports the passing WCAG levels for the winner.
Privacy. All conversion happens in your browser. Nothing is uploaded, so it is safe to work with brand colors under embargo.