CSS Colors

CSS Colors: Hex, RGB, HSL, and Opacity Formats

CSS colors control text ink (color), background fills (background-color), borders (border-color), and shadows across web interfaces. Modern CSS supports 140 named colors along with Hexadecimal, RGB, and HSL notations—each suited to different design workflows.

Comparing CSS Color Models

• Hex (#38bdf8 or #fff): Compact six-digit (or three-digit shorthand) RGB values, plus eight-digit hex (#2563eb80) for alpha transparency.
• RGB / RGBA (rgb(37 99 235 / 0.85)): Sets Red, Green, and Blue intensity (0–255) with optional alpha opacity (0 to 1 or percentage).
• HSL / HSLA (hsl(221 83% 53%)): Uses Hue (0–360 degrees), Saturation (0%–100%), and Lightness (0%–100%). HSL makes darkening a hover button effortless by lowering Lightness by 8%.
• currentColor: Keyword that inherits the element's active color value for matching borders or SVG icon fills.

:root {
    --brand-hue: 221;
    --brand-primary: hsl(var(--brand-hue) 83% 53%);
    --brand-hover: hsl(var(--brand-hue) 83% 45%);
}

.btn-primary {
    background-color: var(--brand-primary);
    color: #ffffff;
    border: 2px solid transparent;
    padding: 10px 18px;
}

.btn-primary:hover {
    background-color: var(--brand-hover);
}

.badge-soft {
    background-color: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    border: 1px solid currentColor;
}

Contrast and Accessibility

Always verify foreground-to-background contrast ratios using browser DevTools. Aim for at least 4.5:1 for body text and 3:1 for large headings or UI borders so low-vision users read comfortably.

Common Mistakes to Avoid

• Using CSS opacity when you only want a transparent background: opacity: 0.5 fades child text and icons too; use rgba(), hsla(), or rgb(... / 0.5) instead.
• Hardcoding hex shades everywhere: Store palette values in :root CSS custom properties so dark mode and rebranding take minutes.
• Ignoring focus and hover state contrast: Ensure button text stays crisp during :hover and :disabled states.

Frequently Asked Questions

What is the modern space-separated syntax in rgb() and hsl()?

Modern CSS Color Level 4 lets you omit commas and add alpha after a slash, like rgb(15 23 42 / 90%) or hsl(217 91% 60% / 0.2).

How does currentColor save CSS code?

Setting border: 1px solid currentColor; or fill: currentColor; on an inline SVG automatically syncs its border or icon color whenever the parent's text color changes.