Color Converter & Picker
Convert between HEX, RGB, HSL and CMYK — with shades and WCAG contrast checks.
Shades & tints
Contrast on white
6.29 : 1
Passes AA
Contrast on black
3.34 : 1
Large text only
Convert colours between HEX, RGB, HSL, and CMYK formats, and see a set of tint and shade variations alongside a WCAG contrast check against white or black — useful for both design work and making sure text stays legible.
Paste a colour in any format and every other format updates immediately, so you're never stuck converting by hand between what a design tool gives you and what CSS expects.
Which format to reach for
| Format | Looks like | Best for |
|---|---|---|
| HEX | #4F46E5 | Pasting between design tools and CSS |
| RGB | rgb(79 70 229) | Programmatic manipulation, canvas work |
| HSL | hsl(243 75% 59%) | Making a colour lighter, darker or less saturated |
| CMYK | 65 69 0 10 | Print work only — never for screen |
| OKLCH | oklch(51% 0.24 277) | Perceptually even palettes in modern CSS |
Why HSL is easier to think in
To darken #4F46E5 in hex you'd have to adjust three channels and hope the hue doesn't drift. In HSL you drop the lightness value and nothing else changes — which is exactly how you generate a consistent set of tints and shades from one brand colour.
The catch is that HSL's lightness is not perceptual. hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) claim the same lightness but the yellow is far brighter to the eye. That's why a palette built by holding L constant across hues looks uneven, and why OKLCH — which is perceptually uniform — has become the better tool for systematic palettes.
Reading the contrast check
- WCAG AA requires a contrast ratio of at least 4.5:1 for normal text, and 3:1 for large text (18pt, or 14pt bold).
- WCAG AAA raises those to 7:1 and 4.5:1 respectively.
- Non-text elements — form field borders, icons, focus indicators — need at least 3:1 under WCAG 2.1.
- The ratio runs from 1:1 (identical colours) to 21:1 (pure black on pure white).
- Contrast is symmetrical: swapping foreground and background gives the same ratio.
- Passing the numeric threshold isn't the whole story — very thin fonts can still be hard to read at a technically compliant ratio.
Frequently asked questions
- What's the difference between HSL and RGB?
- RGB defines a colour by red, green, and blue intensities, while HSL defines it by hue, saturation, and lightness — HSL is often more intuitive for adjusting a colour's brightness or vibrancy directly.
- What does the WCAG contrast check tell me?
- It shows the contrast ratio between your colour and white/black text, and whether that ratio meets WCAG AA or AAA accessibility thresholds for readable text.
- Why does CMYK look different from what I typed?
- CMYK is meant for print and calculated from RGB using a standard conversion; because RGB (screen) and CMYK (ink) have different colour gamuts, the visual result can shift slightly, especially for very saturated colours.
- What contrast ratio do I need to pass accessibility checks?
- 4.5:1 for normal body text and 3:1 for large text under WCAG AA. AAA requires 7:1 and 4.5:1. Interface components like borders and icons need 3:1.
- Can I trust a CMYK conversion for print?
- Treat it as an approximation. Accurate print conversion depends on the specific paper, ink and press profile, so ask your printer for their ICC profile rather than relying on a generic formula.
- What does the 8-digit hex format mean?
- The last two digits are alpha (opacity): #4F46E5FF is fully opaque, #4F46E580 is about 50% transparent.