HTML Colors

HTML Colors: Named, Hex, RGB, and HSL Formats

HTML elements receive color through CSS properties like color, background-color, and border-color. Modern browsers support 140 standard color names alongside Hexadecimal, RGB, and HSL color values for precise shade control and transparency.

Comparing Color Formats

Color keywords like Tomato or SlateBlue are handy for quick demos, while Hex and HSL give exact control over brand palettes:

• Hex (#RRGGBB): Uses six hexadecimal digits (00 to FF) for Red, Green, and Blue channels, such as #2563eb.
• RGB / RGBA: Defines Red, Green, and Blue values from 0 to 255, with optional Alpha opacity (0 to 1).
• HSL / HSLA: Uses Hue (0–360 degrees), Saturation (0%–100%), and Lightness (0%–100%), making lighter and darker shades easy to generate.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Colors Example</title>
</head>
<body style="font-family: system-ui, sans-serif; padding: 20px;">
    <div style="background-color: #1e293b; color: #f8fafc; padding: 16px; margin-bottom: 12px;">
        Hex background (#1e293b) with crisp white text (#f8fafc)
    </div>
    <div style="background-color: rgba(37, 99, 235, 0.15); color: #1d4ed8; padding: 16px; margin-bottom: 12px;">
        RGBA translucent blue banner (15% opacity)
    </div>
    <div style="background-color: hsl(142, 72%, 29%); color: #ffffff; padding: 16px;">
        HSL dark emerald green card
    </div>
</body>
</html>

Accessibility Contrast Standards

Always check contrast between foreground text and its background color. WCAG AA guidelines recommend at least a 4.5:1 contrast ratio for normal body text so low-vision users and outdoor mobile visitors can read easily.

Common Mistakes to Avoid

• Using low-contrast light gray text on white: Pale shades like #cbd5e1 on #ffffff look sleek on bright monitors but become unreadable on phones.
• Using HTML4 attributes like bgcolor: Never write bgcolor="blue" on body tags. Always apply colors using CSS properties.
• Mixing up opacity and rgba(): Setting CSS opacity fades the child text too, while rgba() fades only the background color.

Frequently Asked Questions

Which color format should I pick for a design system?

HSL or modern Hex with CSS custom properties work best because HSL lets you adjust brightness cleanly for hover and disabled states.

What does the fourth value in RGBA or HSLA control?

The fourth value sets alpha transparency from 0 (completely invisible) to 1 (fully solid).