Design Tools
Understanding Color Formats: HEX, RGB, HSL, CMYK
Learn the differences between color formats and when to use each one.
Colors can be represented in several formats, each with strengths for different use cases.
HEX
6-digit hex code: #RRGGBB. Compact, widely used in CSS. Example: #3B82F6.
RGB
Red, green, blue values (0-255): rgb(59, 130, 246). Native screen color model. Good for programmatic manipulation.
HSL
Hue (0-360°), saturation (0-100%), lightness (0-100%): hsl(217, 91%, 60%). Most intuitive for humans. Great for creating color variations.
CMYK
Cyan, magenta, yellow, black percentages. Used for print. Smaller gamut than RGB.
When to Use Each
HEX for CSS. RGB for code manipulation. HSL for design work. CMYK for print materials.
Frequently Asked Questions
Which format for CSS?
All work. HEX is most common. HSL is easiest for creating variations. RGB/RGBA for programmatic use.
Why do colors differ on screen vs print?
Screens use RGB (light), printers use CMYK (ink). RGB has a wider gamut — some colors can't be printed.
HEX vs HEX with alpha?
Standard (#RRGGBB) is color only. 8-digit (#RRGGBBAA) adds transparency.