About Color Converter
Color Converter translates a colour between every common notation — HEX, RGB, HSL, HSV and CMYK — and shows live sliders for each channel so you can dial in the exact shade. It also reports WCAG 2.1 contrast against any background so you know whether your text colour passes AA or AAA. Everything runs in your browser, with no upload and no rate limits. Designers and frontend developers use it to copy paste-ready CSS values, fix contrast failures, and convert print CMYK swatches into screen-ready RGB on the fly.
- No uploads
- Browser-only
- Works offline
- 100% free
How it works
- 1
Enter a colour
Type or paste a HEX like #4F46E5, an rgb()/hsl() string, or drag the channel sliders. Every other notation updates instantly.
- 2
Check contrast
Pick a background colour and the tool computes the WCAG contrast ratio and flags AA / AAA pass-fail for normal and large text.
- 3
Copy what you need
Click any value — HEX, rgb(), hsl(), hsv() or cmyk() — to copy it to the clipboard in valid CSS syntax.
HEX, RGB, HSL, HSV — same colour, different coordinates
These aren't four different colours; they're four ways of naming a point in the same space. RGB describes a colour by how much red, green and blue light to mix (0-255 per channel) — it matches how screens emit light, which is why it's the native model for displays. A HEX code like #3B82F6 is just that same RGB triple written in hexadecimal: 3B is 59 red, 82 is 130 green, F6 is 246 blue. Convert between HEX and RGB and nothing changes but the notation.
HSL (hue, saturation, lightness) and HSV/HSB (hue, saturation, value/brightness) re-express the same colour in terms humans reason about: which colour (hue, 0-360 degrees), how vivid (saturation), and how light or bright. They're the same gamut as RGB, just easier to steer — which is why colour pickers use them.
Which model to reach for
| Model | Describes colour as | Best for |
|---|---|---|
| RGB | Red, green, blue light, 0-255 each | Screen output; the native display model |
| HEX | RGB written in base-16 (#RRGGBB) | CSS and design handoff — compact and exact |
| HSL | Hue, saturation, lightness | Building palettes; lightening/darkening a shade predictably |
| HSV / HSB | Hue, saturation, value/brightness | Colour pickers and choosing a vivid base colour |
All four describe the same sRGB gamut — converting between them is lossless except for rounding. To sample a colour from an image rather than type a code, use the [Color Picker](/image/color-picker/).
Alpha, gamut, and the rounding catch
- Alpha is transparency, not a colour channel. An 8-digit HEX or an rgba() value adds an opacity figure; alpha controls how much of the background shows through, and isn't part of the hue at all.
- Gamut is the range a model can express. Standard HEX/RGB cover sRGB; wide-gamut displays and the CSS color() function reach colours sRGB simply can't represent, so a vivid value on a wide-gamut screen may have no exact sRGB equivalent.
- Round-tripping can drift by a unit. HSL and HSV use floats internally; converting RGB to HSL to RGB may shift a channel by 1 due to rounding. For an exact colour, keep the HEX/RGB value as your source of truth.
- HSL lightness is not perceptual brightness — two colours at the same L can look very different in apparent lightness, which matters for contrast.
Colour and accessibility contrast
Picking a colour for text or UI isn't just aesthetics — it's legibility. The Web Content Accessibility Guidelines set a contrast ratio between text and its background: at least 4.5:1 for normal text and 3:1 for large text to meet WCAG 2.1 level AA. Contrast depends on the relative luminance of the two colours, which is why a mid-grey on white can fail even when it looks "dark enough."
A practical workflow: choose your hue in HSL because it's intuitive, then check the actual contrast ratio against the background before you commit — don't trust your eye, which adapts and is fooled by surrounding colours. Two swatches that feel fine in isolation can fall well short of 4.5:1 in practice.
Frequently asked questions about Color Converter
Which colour formats are supported?
HEX (3, 6 and 8 digit including alpha), rgb()/rgba(), hsl()/hslA(), hsv() and cmyk(). Input accepts any of them — modern CSS Color Level 4 percent rgb() and the legacy comma syntax both work. Output is canonical CSS that pastes cleanly into stylesheets and design tools.
How is the CMYK conversion calculated?
We use the standard naive RGB→CMYK formula (no ICC colour profile). That's perfect for quickly translating a brand HEX into ballpark CMYK values, but for press-accurate print work you should still round-trip the final swatch through your printer's profile in Illustrator or InDesign.
What does the WCAG contrast number mean?
It's the contrast ratio between your foreground and background under WCAG 2.1. AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA requires 7:1 and 4.5:1 respectively. The badge next to the ratio tells you which level you pass.
Privacy, offline use, browser support, and pricing questions are answered on the site-wide FAQ.