A practical guide to color formats used in web development and design. Learn when to use HEX vs RGB vs HSL and how to convert between them.
Every color format exists for a reason. HEX is short and easy to copy. RGB maps directly to how displays work. HSL is human-intuitive. CMYK is for print. Understanding when to use each makes you a better developer and a better communicator with designers.
Hexadecimal color notation encodes each of the three RGB channels (red, green, blue) as a two-digit hex value from 00 to ff:
#RRGGBB
#2563eb /* brand blue */
#ef4444 /* red */
#ffffff /* white */
#000000 /* black */
/* Short form — each digit is doubled */
#fff /* same as #ffffff */
#000 /* same as #000000 */
#f00 /* same as #ff0000 — pure red */
/* With alpha (8 digits) */
#2563ebcc /* 80% opacity blue */
When to use HEX: Design tokens, Tailwind config, brand colors in documentation, anywhere brevity matters.
RGB uses three integer values (0–255) for red, green, and blue. RGBA adds an alpha channel (0–1 for opacity):
color: rgb(37, 99, 235); /* brand blue */
color: rgba(37, 99, 235, 0.5); /* 50% transparent */
color: rgba(0, 0, 0, 0.1); /* subtle shadow overlay */
When to use RGB: Dynamic colors with JavaScript (Canvas, WebGL), when you need arithmetic between values, when reading from sensors or APIs that output 0–255.
// Mix two colors at 50%
function mixColors(c1, c2) {
return {
r: Math.round((c1.r + c2.r) / 2),
g: Math.round((c1.g + c2.g) / 2),
b: Math.round((c1.b + c2.b) / 2),
};
}
HSL stands for Hue, Saturation, Lightness — a model that mirrors how humans perceive color:
color: hsl(220, 90%, 56%); /* vivid blue */
color: hsl(220, 90%, 40%); /* darker blue — just change L */
color: hsl(220, 90%, 70%); /* lighter blue — just change L */
color: hsl(220, 30%, 56%); /* muted blue — lower saturation */
color: hsla(220, 90%, 56%, 0.5); /* 50% transparent */
When to use HSL: Generating color scales programmatically, building themes, creating hover/focus states by adjusting lightness, design systems with predictable color relationships.
// Generate a 9-step shade scale from a base color
function generateShades(h, s) {
const lightness = [95, 90, 80, 70, 60, 50, 40, 30, 20];
return lightness.map((l) => `hsl(${h}, ${s}%, ${l}%)`);
}
// Usage
const blueScale = generateShades(220, 90);
// ['hsl(220, 90%, 95%)', 'hsl(220, 90%, 90%)', ...]
HSV (Hue, Saturation, Value) — also called HSB (Brightness) — is used internally by most design tools like Figma and Photoshop. It differs from HSL in how lightness is modeled. Most developers don't use HSV directly in CSS but need to understand it when reading design specs.
CMYK (Cyan, Magenta, Yellow, Key/Black) is the subtractive color model used for print. Web developers rarely use CMYK directly, but if you're producing print-ready assets or PDFs, you may need to convert:
Brand blue #2563eb → CMYK(84%, 73%, 0%, 8%)
// HEX to RGB
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
} : null;
}
// RGB to HEX
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(v => v.toString(16).padStart(2, '0'))
.join('');
}
For quick color conversions in any format, use HeoLab's Color Converter — it handles HEX, RGB, HSL, HSV, and CMYK with a live color picker.
CSS now supports powerful color manipulation functions:
/* oklch — perceptually uniform, great for scales */
color: oklch(55% 0.2 240);
/* color-mix — native CSS color mixing */
color: color-mix(in srgb, #2563eb 70%, white);
/* Relative color syntax */
color: hsl(from var(--brand) h s calc(l + 20%));
When in doubt, HEX for static and HSL for dynamic. Convert between formats effortlessly with the Color Converter.