Every notation for every color, plus the shades between
The same red is #dc2626 to your CSS file, rgb(220, 38, 38) to a designer's mockup tool, hsl(0, 73%, 51%) to anyone adjusting it, and cmyk(0%, 83%, 83%, 14%) to the print shop. Translating between notations by hand invites the subtle mistakes that make “the brand red” drift across materials. This converter speaks all four at once: enter a color in any format (or pick one visually), and every translation appears with its own copy button, alongside a live swatch and a nine-step lightness palette of the same hue.
How to convert a color
- Type any valid color —
#5b5bd6,rgb(91,91,214),hsl(240,60%,60%), or 3-digit hex — or use the visual picker. - Read off HEX, RGB, HSL and CMYK simultaneously; copy what you need.
- Click any shade in the lightness scale to jump to that variant and convert it.
Which notation for which job
HEX is the web's compact lingua franca — CSS, design handoffs, brand guides. RGB exposes the actual screen channels and is the form programming APIs usually want. HSL is the human notation: hue (the color wheel angle), saturation (vividness), lightness — making it the only format where “a bit darker” is an arithmetic operation rather than guesswork; professional palettes are tuned in HSL. CMYK approximates ink mixing for print — and carries an honest asterisk: screens (RGB) can display colors ink physically can't reproduce, so treat converted CMYK as a starting point and proof critical brand colors with the printer.
The lightness palette: a free design tool
The nine swatches below the converter hold hue and saturation fixed while stepping lightness 10%→90% — which is exactly how UI color systems build their shade scales (the familiar 100–900 ramps). Practical uses fall out immediately: pick the dark step for text, the light step for backgrounds, hover states one step apart. Click any swatch to load it and harvest its codes.
Conversions worth understanding once
- HEX is RGB in disguise: two hex digits per channel — #5b5bd6 is 91, 91, 214. The mental model demystifies both.
- 3-digit hex expands by doubling: #f80 = #ff8800.
- HSL→“darker” = lower L: keep H and S, drop lightness 10 points — that\'s the whole trick designers use.
- Contrast matters: text and background need real lightness separation for readability — the palette makes safe pairs visually obvious.
Type once, read four languages, steal nine shades — color plumbing handled, locally and instantly.
Quick reference
| Property | Detail |
|---|---|
| Input formats | HEX (3/6-digit), RGB, HSL + visual picker |
| Outputs | HEX, RGB, HSL, CMYK — copy buttons each |
| Extras | Live swatch + 9-step lightness palette |
| Palette logic | Fixed hue/saturation, lightness 10–90% |
| CMYK note | Screen→ink approximation; proof with printer |
| Best “adjust” format | HSL — darker = lower L |
| Processing | 100% in-browser |
Frequently asked questions
Why does my printed color not match the screen?
Screens emit RGB light; printers mix CMYK ink — physically different gamuts. Vivid blues and greens especially can't be fully reproduced in ink. Use the CMYK value as a starting point and request a printed proof for brand-critical colors.
How do I make a color darker without changing its character?
Use the HSL reading: keep hue and saturation, reduce lightness — hsl(240,60%,60%) → hsl(240,60%,45%). Or simply click a darker step in the palette and copy its codes; that's the same operation done visually.
What's the difference between #f80 and #ff8800?
Nothing — 3-digit hex is shorthand where each digit doubles: f→ff, 8→88, 0→00. The converter accepts both and always outputs the explicit 6-digit form.
Can I build a UI color scale with this?
Yes — that's what the lightness palette is: the standard 100–900 shade ramp pattern. Pick your brand hue, then harvest the nine steps for backgrounds, borders, text and hover states.