Color Converter

How to use the Color Converter

1. Use the swatch to pick a colour visually, or type one in any notation — HEX, RGB, HSL or a CSS colour name.
2. Every other format updates instantly. Press Copy beside the one you need.
3. Check the contrast rows before using the colour for text.

Which format to use where

HEX is compact and universal — the default in design tools and CSS. RGB maps directly to what a screen emits and is what canvas and image code works in. HSL is the one to reach for when you are building a palette: keep the hue, change the lightness, and you have a coherent set of tints and shades without guessing at hex digits.

HSV (also called HSB) is what most colour pickers show internally. It differs from HSL in what the third value means: in HSV, full value with full saturation is the pure vivid hue, while in HSL that same hue sits at 50% lightness and 100% is always white.

Reading the contrast numbers

Contrast ratio compares relative luminance and runs from 1:1 (identical) to 21:1 (black on white). WCAG 2.1 sets the thresholds:

• 4.5:1 — minimum for normal body text (level AA)
• 3:1 — minimum for large text, 18pt or 14pt bold (level AA)
• 7:1 — enhanced contrast for body text (level AAA)
• 3:1 — minimum for icons, borders and other non-text elements

The rows above test your colour against pure white and pure black, which tells you which text colour to place on it. For a specific pairing, convert both colours and compare their luminance values.

Alpha and the eight-digit hex

Adding two more hex digits sets opacity: #1a4fd680 is the same blue at 50%. Every current browser supports this, though older tooling sometimes does not. Note that a translucent colour has no fixed contrast ratio — it depends on whatever sits behind it, so the readings above assume full opacity.

Frequently asked questions