Color is everywhere in web design — but which color format should you actually use? HEX, RGB, HSL, and CMYK all represent colors, but they serve very different purposes. Here's a practical breakdown.
HEX (#RRGGBB)
HEX is the most compact and universally supported color format in CSS. Each pair of hex digits represents one RGB channel (red, green, blue) in base-16.
``css
color: #FF6347; / tomato red /
background: #2f855a; / forest green /
`
Use HEX when: You're writing CSS stylesheets, setting brand colors, or copying color codes from design files (Figma, Sketch, XD all use hex by default).
Shorthand: If both digits in a pair are the same, you can use the 3-digit form: #FF5533 → #F53.
With alpha: Use 8-digit hex for transparency: #FF634780 is tomato red at 50% opacity.
RGB (rgb() / rgba())
RGB expresses each channel as a decimal integer from 0 to 255. rgba() adds an alpha (opacity) channel from 0 (transparent) to 1 (opaque).
<code>css
<p>color: rgb(255, 99, 71); /<em> tomato </em>/</p>
<p>background: rgba(47, 133, 90, 0.5); /<em> 50% transparent green </em>/</p>
</code>
Use RGB when: You're working with canvas, SVG, or JavaScript color manipulation — it's easier to do math on decimal integers than hex strings.
HSL (hsl() / hsla())
HSL represents color as Hue (0–360° color angle), Saturation (0–100% vividness), and Lightness (0–100%, where 50% is the pure color).
<code>css
<p>color: hsl(9, 100%, 64%); /<em> tomato </em>/</p>
<p>background: hsl(144, 48%, 35%); /<em> forest green </em>/</p>
</code>
Use HSL when: You need to programmatically manipulate colors — changing lightness, creating hover states, or generating color palettes. Adjusting L lightens or darkens the color without changing its hue. Adjusting S makes it more or less vivid.
<code>css
<p>/<em> Generate a hover state by darkening </em>/</p>
<p>.btn { background: hsl(144, 48%, 35%); }</p>
<p>.btn:hover { background: hsl(144, 48%, 28%); } /<em> just change L </em>/</p>
</code>
This is far more maintainable than computing hex values manually.
CMYK (C, M, Y, K)
CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in print. Screens emit light; printers mix inks that absorb light.
Use CMYK when: You're designing for print — business cards, brochures, packaging. If you're designing for web only, you'll rarely touch CMYK.
Important caveat: not all screen colors can be reproduced in print. Bright blues and vivid greens often fall outside the CMYK gamut, so a color that looks vibrant on screen may look duller when printed.
oklch() — The Modern Option
CSS Color Level 4 introduced oklch(), a perceptually uniform color space. Unlike HSL, where the same lightness value produces colors that look different across hues, oklch colors are consistent:
<code>css
<p>.badge-blue { color: oklch(0.6 0.2 264); }</p>
<p>.badge-green { color: oklch(0.6 0.2 145); }</p>
<p>/<em> Both appear equally bright to the human eye </em>/</p>
</code>`
Use oklch when: You're building design systems and need perceptually consistent palettes. It's supported in all modern browsers (Chrome 111+, Firefox 113+, Safari 16+).
Quick Decision Guide
| You need... | Use |
|---|---|
| A CSS color in a stylesheet | HEX |
| JavaScript color math | RGB |
| Programmatic lightening/darkening | HSL |
| Print files | CMYK |
| Perceptually consistent design system | oklch |
Converting Between Formats
You can convert any color between HEX, RGB, HSL, and CMYK instantly with SnappyTools Color Picker. Type any value in any format — all others update automatically. The eyedropper lets you sample colors from anywhere on your screen.
Understanding which format to reach for in each context will make your CSS cleaner and your design work faster.
Originally published at https://snappytools.app/color-picker/