CSS Color Formats for Developers: HEX, RGB, HSL and OKLCH
Developers often switch between HEX for design specs, RGB for JavaScript values, HSL for generated themes and alpha colors for overlays. This page keeps the common syntax in one place.
Common CSS color syntax
/* Solid colors */
.button {
color: #ffffff;
background: #2563eb;
}
/* Alpha colors */
.overlay {
background: rgb(15 23 42 / 72%);
}
/* HSL is useful for theme variants */
:root {
--brand-hue: 221;
--brand: hsl(var(--brand-hue) 83% 53%);
}Developer checklist
- Use HEX for stable design tokens.
- Use RGB with alpha for overlays and shadows.
- Use HSL when you need generated tints and shades.