Every CSS file mixes color formats. Designers hand you a HEX code, the brand guide lists Pantone RGB values, and your animation library expects HSL. Converting by hand means either memorizing formulas or opening a calculator. A color converter handles the math instantly.
The Four Common Color Formats
HEX
Six hex digits represent red, green, and blue channels from 00 (0%) to FF (100%):
color: #1a73e8; /* Google Blue */
color: #fff; /* Shorthand for #ffffff */HEX is the most common format in web CSS. Shorthand (#rgb) works when each channel digit repeats — #ff6600 → #f60.
RGB
Three integers (0–255) for red, green, blue. CSS also accepts rgba() with an alpha channel (0–1):
color: rgb(26, 115, 232);
color: rgba(26, 115, 232, 0.8); /* 80% opacity */RGB maps directly to monitor hardware. Useful when you need to manipulate channels programmatically.
HSL
Hue (0–360°), Saturation (0–100%), Lightness (0–100%):
color: hsl(217, 80%, 51%);
color: hsla(217, 80%, 51%, 0.8);HSL is the most human-readable format. Adjusting only the lightness gives you tints and shades without touching hue or saturation — ideal for creating color scales.
HSB / HSV
Hue (0–360°), Saturation (0–100%), Brightness (0–100%). Not native CSS, but the default color model in Figma, Photoshop, and Illustrator:
H: 217° S: 89% B: 91%When a designer gives you HSB values, convert to HEX or RGB before writing CSS.
HEX ↔ RGB: The Math
HEX to RGB: split into pairs, convert each from base-16 to base-10.
#1a73e8
1a = 26
73 = 115
e8 = 232
→ rgb(26, 115, 232)RGB to HEX: convert each channel from base-10 to base-16, zero-pad to 2 digits.
rgb(26, 115, 232)
26 = 1a
115 = 73
232 = e8
→ #1a73e8The converter handles both directions instantly — no mental arithmetic needed.
RGB ↔ HSL: The Math
Converting between RGB and HSL involves normalizing channels to [0, 1], finding the min/max, and applying different formulas for hue, saturation, and lightness. The formulas are ~20 lines of code. Use the tool instead of doing it by hand.
What matters is the mental model:
- Hue = which color family (red, yellow, green, cyan, blue, magenta)
- Saturation = how intense vs. gray
- Lightness = how close to black (0%) or white (100%)
Practical Use Cases
Building a Color Scale
Start with your brand HEX, convert to HSL, then vary only the lightness:
--brand-100: hsl(217, 80%, 95%); /* lightest tint */
--brand-300: hsl(217, 80%, 75%);
--brand-500: hsl(217, 80%, 51%); /* base */
--brand-700: hsl(217, 80%, 35%);
--brand-900: hsl(217, 80%, 20%); /* darkest shade */This technique works because changing only L produces perceptually consistent tints and shades.
Matching Design Handoffs
Figma and Photoshop default to HSB. When a designer shares H:217 S:89 B:91:
- Paste into the converter’s HSB input
- Copy the HEX output
- Use in CSS
Checking Contrast Ratios
Convert both foreground and background colors to RGB luminance values and use the WCAG formula. Most contrast checkers accept HEX input — the converter gets your color there quickly from any source format.
CSS Custom Properties
When working with CSS variables, HSL is the easiest format for creating variants without a preprocessor:
:root {
--primary-hue: 217;
--primary-sat: 80%;
--primary: hsl(var(--primary-hue), var(--primary-sat), 51%);
--primary-dark: hsl(var(--primary-hue), var(--primary-sat), 35%);
}Color Format Quick Reference
| Format | Example | Used in |
|---|---|---|
| HEX | #1a73e8 | HTML, CSS, SVG |
| RGB | rgb(26, 115, 232) | CSS, Canvas |
| RGBA | rgba(26, 115, 232, 0.8) | CSS (with opacity) |
| HSL | hsl(217, 80%, 51%) | CSS, color scales |
| HSLA | hsla(217, 80%, 51%, 0.8) | CSS (with opacity) |
| HSB/HSV | H:217 S:89 B:91 | Figma, Photoshop |
Common Mistakes
Confusing HSL lightness with HSB brightness: HSL L=50% is the “pure” color. HSB B=100% is the pure color with full saturation. They are not the same scale.
Forgetting opacity: rgb() is opaque. If your design uses opacity, you need rgba() or hsla().
Shorthand HEX in JavaScript: #f60 is valid CSS but not valid in some JavaScript color-parsing libraries. Expand to #ff6600 when in doubt.
Stop switching between browser DevTools and design apps. Use the Color Converter →