Web Development
Color Converter
Convert colors between HEX, RGB, HSL, HSV/HSB, and CMYK — enter a value into any field and the rest update instantly.
The same color can be written differently depending on context: HEX and RGB are convenient for code, HSL is intuitive for picking a hue and lightness, and CMYK is for print. This tool converts between all of them at once.
How to use it
- Enter a value in any field (HEX, RGB, HSL, HSV/HSB, or CMYK) — every other format updates instantly.
- The "random color" button generates a random hue for quickly browsing a palette.
- Copy the format you need with one click to paste into CSS or a graphics editor.
Which format to use when
- HEX — a compact notation for CSS and design systems (#4453b8).
- RGB — when you need transparency via rgba() or programmatic access to individual color channels.
- HSL — the easiest for manual tuning: lighten or darken a color by changing just one value.
- CMYK — for materials headed to print, where colors mix subtractively, unlike the additive RGB used on screens.
Things to keep in mind
CMYK on screen is only an approximation — the exact printed color depends on the printer, paper, and color profile used.
Conversion between color spaces isn't always exact for extreme, highly saturated colors, due to differences in gamut coverage between models.
Article about this tool: HEX, RGB, HSL: why there are so many ways to write a color
Frequently asked questions
How does the converter handle the alpha (transparency) channel?
Alpha is supported in HEX (#RRGGBBAA), RGBA and HSLA — whatever you enter carries over into the other formats that support transparency, while formats without an alpha channel, like plain CMYK, simply ignore it.
Why does the value shift slightly after converting to CMYK and back to HEX?
CMYK is a print-oriented model with no single fixed formula for converting to and from RGB, so a round trip can shift values by a rounding error of a unit or two; visually the color stays effectively the same.
Is my color data sent anywhere?
No, every conversion happens locally in your browser with JavaScript — nothing is uploaded to a server.
How is OKLCH different from HSL?
OKLCH describes a color through lightness (L), chroma (C), and hue (H), but unlike HSL it accounts for how the human eye actually perceives lightness — changing L in OKLCH doesn't distort the perceived saturation of a color, so transitions between shades look more even.
What does it mean for a color to be "out of gamut"?
Some colors in wide spaces like OKLCH or Display P3 physically can't be reproduced on displays that only support sRGB — the browser then substitutes the nearest available color within the supported gamut.