Convert colors in every direction, instantly
A color converter is only useful if it speaks every notation you do. This tool converts HEX to RGB and back, and also bridges HSL, HSV (also called HSB) and CMYK — all at once and in real time. Type a HEX like #3b82f6 and you immediately get its rgb(59, 130, 246), its hsl(217, 91%, 60%), its hsv(217, 97%, 96%) and its cmyk(76%, 47%, 0%, 4%). Change any single field and the others follow, so you can reason in the model that fits the job: HEX for markup, RGB for canvas and gradients, HSL/HSV for intuitive lightness and saturation tweaks, and CMYK when a design heads to print.
From HEX to RGB, HSL, HSV and CMYK without the math
Under the hood the converter normalizes every input to a single RGB triple, then applies the standard sRGB formulas to derive the other spaces — the same math browsers and design tools use, so the numbers match what you see in Figma, Photoshop or Chrome DevTools. It also understands shorthand HEX (#fff), 8-digit HEX with alpha (#3b82f6aa), rgb()/rgba(), hsl()/hsla(), and common CSS named colors such as crimson, teal and gold, so you never have to memorize a formula or switch tabs. Each format has a copy button, and the large preview swatch shows your color on a real background so you can sanity-check it at a glance.
Design better palettes with harmonies and ramps
Choosing a single color is easy; building a coherent palette is the hard part. The converter generates color harmonies from color-theory rules — complementary (opposite on the wheel), analogous (neighbors), triadic and tetradic (evenly spaced) — as clickable swatches you can drop straight into your project. A lightness ramp walks from near-black to near-white at the same hue and saturation, giving you the tints and shades designers reach for when they need hover, border and disabled states. A two-color mixer lets you blend any pair at a chosen ratio to create in-betweens, and a fine-tune row lets you lighten, darken, saturate, desaturate or rotate the hue in one click.
Accessibility and privacy built in
Good color is readable color. The converter shows the WCAG contrast ratio of your color against both white and black and flags AA (4.5:1) and AAA (7:1) compliance, so you can catch low-contrast text before it ships — a natural companion to the dedicated contrast checker. And because everything runs locally in your browser, your colors never leave your device: there is no upload, no account and no tracking, which keeps brand and client work private while the tool stays instant.
- 01
- Bidirectional HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK, with alpha
- 02
- Interactive RGB, HSL & alpha sliders with live gradient tracks
- 03
- Native color picker + browser EyeDropper
- 04
- Recent history + saved swatches (kept in your browser)
- 05
- CSS named-color support (crimson, teal, gold…)
- 06
- Harmonies, tint/shade ramp + two-color mixer
- 07
- Colour-blindness preview (protanopia, deuteranopia, tritanopia)
- 08
- Live WCAG AA/AAA contrast badges
- 09
- Copy-ready export for CSS, Tailwind, SCSS, Swift & Android
