Color Converter
Hex to RGB, HSL, and CMYK with one input.
What it does
Color conversion rewrites one color across notation systems: hex packs channels into digits, RGB lists them plainly, HSL describes hue with saturation and lightness, and CMYK splits ink for print. All four name the same on screen color.
The tool above takes a six digit hex color. It returns RGB with HSL and CMYK beside them, each in standard notation.
The default red #FF0000 reads rgb(255, 0, 0), hsl(0, 100%, 50%), and CMYK 0/100/100/0. Green lands at hue 120 and blue at 240 with full saturation by the same rotation.
Formats follow W3C CSS Color specifications with MDN color references matching the conversion code. Both treat hex pairs as 0 to 255 channels under the sRGB space.
How to use
- Enter six hex digits with or without the hash.
- Read RGB first for screens and code.
- Read HSL for picking shades and tints.
- Read CMYK for print estimates.
- Copy the notation your tool accepts.
Formula
- FF
- 255 in decimal, full channel.
- hue
- 0 red, 120 green, 240 blue degrees.
- K
- Black key: one minus max channel.
Six digit hex only; shorthand expands first (#F00 means #FF0000). Alpha channels sit outside this page.
Worked example
Example: #FF0000
Default red hex.
- Channels: FF is 255, 00 is 0: rgb(255, 0, 0).
- Max red, delta full: hue 0, saturation 100%, lightness 50%.
- Key: 1 - 1 = 0. Ink: cyan 0, magenta 100, yellow 100.
- Result: hsl(0, 100%, 50%), CMYK 0/100/100/0.
- Tool shows all three notations.
Reference table
| Hex | HSL hue | CMYK |
|---|---|---|
| #FF0000 | 0° | 0/100/100/0 |
| #00FF00 | 120° | 100/0/100/0 |
| #0000FF | 240° | 100/100/0/0 |
| #808080 | 0° gray | 0/0/0/50 |
Limits
- sRGB only; wide gamuts need other spaces.
- Six digit hex input only.
- CMYK estimates vary by press profile.
- Alpha transparency excluded.
Common mistakes
- Reading shorthand without expanding digits.
- Mixing 0-255 with 0-100% channel scales.
- Trusting screen CMYK for press proofs.
- Forgetting hash optional here but required in CSS.
- Expecting hue on grays (zero saturation).
Try it yourself
Quick checks. Answers sit tucked under each question.
#00FF00?
rgb(0, 255, 0), hsl(120, 100%, 50%).
#000000?
rgb(0, 0, 0), CMYK 0/0/0/100.
#808080 CMYK?
Mid gray: 0/0/0/50.
Questions
How do you convert hex to RGB?
Split pairs to decimals: #FF0000 is rgb(255, 0, 0).
What is HSL?
Hue degrees with saturation and lightness percents: red is hsl(0, 100%, 50%).
Why CMYK too?
Printers mix cyan, magenta, yellow, black inks instead of light.
Do browsers accept all?
Yes for hex, rgb, and hsl in modern CSS.
What about transparency?
Alpha rides in rgba/hsla or 8 digit hex, outside this page.
Which for picking shades?
HSL: hold hue, slide lightness for tints and shades.