Colors
Set colors using names, HEX, RGB, and HSL.
Syntax
color: #2965f1; background-color: rgb(41, 101, 241);CSS supports several color formats:
- Named —
red,tomato,steelblue. - HEX —
#2965f1. - RGB —
rgb(41, 101, 241). - HSL —
hsl(222, 88%, 55%).
The color property sets text color; background-color sets the background.
Example
Loading editor…
Press Run to see the result.
When to use it
- A designer defines a brand palette using HSL values so adjusting only the lightness component creates consistent tints and shades.
- A developer uses rgba() for a tooltip background so it appears semi-transparent over any page content without a separate overlay element.
- A team uses hex color codes from a design system (e.g. #2965f1) throughout the codebase to match Figma specs exactly.
More examples
Color using name, hex, and rgb
Shows the same blue specified three different ways: named color, hex, and rgb() function.
.box-a { color: steelblue; } /* named */
.box-b { color: #2965f1; } /* hex */
.box-c { color: rgb(41, 101, 241); } /* rgb */HSL for themed color shades
Uses HSL with CSS custom properties so all brand shades share the same hue and saturation — only lightness changes.
:root {
--brand-h: 220;
--brand-s: 84%;
}
.btn { background-color: hsl(var(--brand-h), var(--brand-s), 55%); }
.btn:hover { background-color: hsl(var(--brand-h), var(--brand-s), 40%); }
.btn-light { background-color: hsl(var(--brand-h), var(--brand-s), 85%); }Alpha transparency with rgba and hsla
Demonstrates rgba and hsla alpha channels for a semi-transparent dark overlay and a near-opaque tooltip.
.overlay {
background-color: rgba(0, 0, 0, 0.5);
}
.tooltip {
background-color: hsla(220, 84%, 55%, 0.9);
color: #fff;
padding: 4px 10px;
border-radius: 4px;
}
Discussion