Color Converter
// hex · rgb · hsl · cmyk · live preview · shades · css snippets
css snippets — click to copy
Color format guide
- HEX —
#RRGGBB, used in CSS and design tools
- RGB — red, green, blue (0–255 each)
- HSL — hue (0–360°), saturation, lightness — most intuitive for humans
- CMYK — cyan, magenta, yellow, black — used in print design
When to use each format
Use HEX in CSS for exact color matching. Use RGB when you need to apply opacity with rgba(). Use HSL when programmatically generating color scales. Use CMYK for print design in tools like Illustrator.
Frequently Asked Questions
What's the difference between RGB and HEX?+
They represent the same color model — red, green, and blue components. HEX is just a base-16 representation of the same RGB values. #FF0000 and rgb(255, 0, 0) are identical red. HEX is more compact; RGB is more readable.
Why does HEX have a short 3-digit form?+
When both digits of each channel are identical (e.g. #RRGGBB → #RGB), CSS allows shorthand. #ff0000 = #f00. This only works when each pair of hex digits is doubled — #7c6aff cannot be shortened.
What is HSL and why is it useful?+
HSL (Hue, Saturation, Lightness) describes color in a way humans find intuitive. To make a color lighter, increase Lightness. To make it less saturated, decrease Saturation. To pick a different hue of the same color family, adjust just the Hue. This makes it ideal for generating color themes programmatically.