What is color conversion?
Colors can be represented in multiple formats: HEX (#FF5733), RGB (255, 87, 51), HSL (11°, 100%, 60%), and CMYK (0, 66, 80, 0). Each format serves different use cases — HEX for web, RGB for screens, HSL for design, CMYK for print. This tool converts between all four instantly in your browser.
How color models differ
The same color can be written several ways. HEX and RGB both describe a color by its red, green, and blue components — HEX as a six-digit hexadecimal string like #FF5733, RGB as three 0–255 values. HSL describes the same color by hue (an angle on the color wheel), saturation, and lightness, which makes it far easier to create tints and shades by hand. CMYK describes ink coverage for print in cyan, magenta, yellow, and black.
Converting between them lets you copy a color from a design tool in one format and use it wherever your code or print workflow expects another.
Which format to use where
Use HEX or RGB for the web and screens — they map directly to how displays emit light. Reach for HSL when you want to adjust a color programmatically, such as darkening a button on hover by lowering lightness. Use CMYK only for print, where colors are produced by mixing inks rather than light, and expect on-screen colors to shift slightly when converted.
Color and accessibility
Text needs enough contrast against its background to be readable — WCAG recommends a ratio of at least 4.5:1 for normal text. HSL makes it easy to adjust lightness toward a target ratio while keeping the same hue, so you can create accessible variations of a brand color instead of guessing with raw HEX values.
How to convert a color
- 1Enter a color. Type or paste a color in any supported format, or use Pick color to choose one visually.
- 2Convert. The equivalent HEX, RGB, HSL, and CMYK values are calculated instantly.
- 3Copy the format you need. Copy the value in the format your stylesheet or design file expects.
Examples
HEX to other formats
Input
#FF5733
Output
rgb(255, 87, 51) · hsl(11, 100%, 60%) · cmyk(0%, 66%, 80%, 0%)
Pure red across models
Input
#FF0000
Output
rgb(255, 0, 0) · hsl(0, 100%, 50%)
A shade of grey
Input
rgb(128, 128, 128)
Output
#808080 · hsl(0, 0%, 50%)
Color format at a glance
How each model writes the same idea.
| Format | Example (orange) |
|---|---|
| HEX | #FF5733 |
| RGB | rgb(255, 87, 51) |
| HSL | hsl(11, 100%, 60%) |
| CMYK | cmyk(0%, 66%, 80%, 0%) |
| HEX with alpha | #FF5733CC |
Frequently asked questions
What is the difference between HEX and RGB?+
They describe the same thing in different notation. HEX packs the red, green, and blue values into a hexadecimal string, while RGB lists them as three decimal numbers from 0 to 255. #FF0000 and rgb(255, 0, 0) are identical.
What is HSL and why use it?+
HSL stands for hue, saturation, and lightness. Because lightness and saturation are separate axes, it is much easier to create a lighter or darker version of a color by changing one number.
How do I add transparency?+
Add an alpha channel: an eight-digit HEX like #FF5733CC, or rgba()/hsla() with a 0–1 opacity value. The tool preserves alpha where a format supports it.
Why does CMYK look different from RGB?+
RGB mixes light and can show more vivid colors than CMYK, which mixes ink. Some bright screen colors cannot be reproduced exactly in print, so a converted CMYK value is the closest match.
Is the conversion done privately?+
Yes. All conversions run in your browser; nothing is uploaded.
Is it free?+
Yes — free to use with no limits or sign-up.
Is converting between HEX, RGB, and HSL lossless?+
Yes. Those three are exact representations of the same on-screen color, so converting among them loses nothing. Only CMYK, which targets print, may shift slightly.