Color Converter
Convert between hex, RGB, HSL, HSV, CMYK, HWB, and named colors. Includes WCAG contrast checker and complementary / triadic / tint / shade palettes.
All formats
Contrast (WCAG 2.1)
3.14 — AA (large text)
6.68 — AA
Palette helpers
About this tool
Different color spaces exist because different tools think about color differently. RGB and hex describe what a screen emits (0–255 or 00–FF per channel). HSL describes color the way humans think about it — hue, saturation, lightness — which makes it easy to manipulate by hand. HSV is similar and shows up in color pickers. CMYK describes subtractive color for print, and is only exact in calibrated ink/paper environments. HWB is a newer CSS format (hue + whiteness + blackness) that aligns with how designers think about tinting and shading.
The tool parses any input format — hex, rgb(), hsl(), or a named CSS color — and emits all the rest simultaneously, each with a copy button. The native color picker alongside the text input gives you visual selection.
The contrast section shows WCAG 2.1 contrast ratios against white and black backgrounds, labeled with the AA or AAA level achieved. Use this when placing text on a colored background. The palette section generates complementary, triadic, tint, and shade variants — click any swatch to jump to it.
The CSS Color Module Level 4 introduces hwb(),
lab(), lch(), and oklch().
These perceptual spaces produce better results when interpolating or
generating scales, and are gaining wide browser support. This tool
currently emits HWB; Lab/LCH/OKLCH are on the roadmap.
Frequently asked questions
Should I use hex or HSL in CSS?
Both are valid. Hex is compact and universally supported. HSL is easier to modify by hand — change the hue without touching saturation or lightness, or lighten a color by increasing the L value. For design systems, HSL (or the newer OKLCH) is often friendlier to work with.
What is a good contrast ratio?
WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively. The contrast cards show the ratio of your color against white and black with the achieved level labeled.
How do I pick a color palette?
Start from a single color and use the palette helpers as a departure point. The complement (180° hue away) is the highest-tension pairing. Triadic colors (120° apart) are harmonious but distinct. Tints and shades give you a single-hue scale. Most UI palettes use tints/shades of 3–5 hues rather than pure relationships.
Why are my CMYK values different from Photoshop?
CMYK is device-dependent. Actual printed colors depend on ink chemistry, paper, and the color-management profile. The conversion here is a naive rgb → cmyk mapping suitable for rough checks, not press-accurate output. For print, use your RIP or a profiled converter.
Can I pick a color from an image on my screen?
The browser color picker supports eyedropper sampling in Chromium-based browsers when you click the picker (not every browser exposes this). Or paste a hex value from your design tool directly.