HTML Color Groups

HTML Color Groups: Standard Named Colors Organized by Palette

Modern browsers recognize 140 named colors defined in the CSS Color specification—from bright shades like Crimson and DodgerBlue to neutral grays like SlateGray and WhiteSmoke. Grouping these keywords by hue family helps you prototype interfaces rapidly without looking up hex codes.

Popular Named Colors by Hue Family

• Blues & Cyans: Navy, RoyalBlue, DodgerBlue, SteelBlue, SkyBlue, Teal, Cyan.
• Greens: DarkGreen, ForestGreen, SeaGreen, MediumSeaGreen, LimeGreen, Olive.
• Reds, Pinks & Oranges: Crimson, FireBrick, IndianRed, Coral, Tomato, OrangeRed, Gold.
• Purples: Indigo, RebeccaPurple, BlueViolet, MediumPurple, Orchid.
• Neutrals & Grays: Black, DimGray, SlateGray, LightSlateGray, Silver, Gainsboro, WhiteSmoke, White.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Color Groups Demo</title>
    <style>
        .swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; font-family: system-ui, sans-serif; }
        .swatch { padding: 14px; border-radius: 8px; color: #ffffff; font-weight: 600; text-align: center; }
    </style>
</head>
<body>
    <div class="swatches">
        <div class="swatch" style="background-color: DodgerBlue;">DodgerBlue</div>
        <div class="swatch" style="background-color: SeaGreen;">SeaGreen</div>
        <div class="swatch" style="background-color: Crimson;">Crimson</div>
        <div class="swatch" style="background-color: RebeccaPurple;">RebeccaPurple</div>
        <div class="swatch" style="background-color: SlateGray;">SlateGray</div>
    </div>
</body>
</html>

When to Switch from Color Names to Hex or HSL

Named colors are convenient in quick tutorials and debugging outlines, but production design systems rarely rely on them alone. Standard keywords lack fine-grained brightness scales (50 to 900) and do not support inline opacity adjustments as cleanly as hsl() or CSS custom properties.

Common Mistakes to Avoid

• Assuming color names are case-sensitive: dodgerblue and DodgerBlue render identically in CSS, though PascalCase improves readability.
• Putting white text on Yellow or LightGreen: Bright named colors fail WCAG contrast ratios with white text; always pair light backgrounds with dark ink like #0f172a.
• Using HTML4 bgcolor attributes: Apply all named colors through CSS color or background-color.

Frequently Asked Questions

How many standard color names do modern browsers support?

Browsers support 140 named colors (plus transparent and currentColor keywords) across HTML and CSS.

Does RebeccaPurple have a special meaning in CSS?

Yes. RebeccaPurple (#663399) was added to CSS Color Level 4 in honor of CSS pioneer Eric Meyer's daughter Rebecca.