HTML supports 140 standardized color names organized into distinct color group families—Red, Pink, Orange, Yellow, Purple, Green, Blue, Brown, White, and Gray—which provide quick, human-readable color choices.
Named HTML colors map to exact hexadecimal RGB hex codes recognized natively by all browser engines:
<!-- Red / Orange Color Family -->
<span style="color: Crimson;">Crimson (#DC143C)</span>
<span style="color: Tomato;">Tomato (#FF6347)</span>
<!-- Blue Color Family -->
<span style="color: DodgerBlue;">DodgerBlue (#1E90FF)</span>
<span style="color: SteelBlue;">SteelBlue (#4682B4)</span>
<!-- Dark / Slate Color Family -->
<span style="color: SlateGray;">SlateGray (#708090)</span>
<span style="color: DarkSlateGrey;">DarkSlateGrey (#2F4F4F)</span>
Popular named color families:
LightBlue, DodgerBlue, RoyalBlue, DeepSkyBlue, Navy.LimeGreen, MediumSeaGreen, ForestGreen, Teal, DarkGreen.Coral, Tomato, FireBrick, Crimson, DarkOrange.Gainsboro, Silver, SlateGray, DimGray, Black.flowchart TD
A["HTML Named Colors (140 Standard Names)"] --> B["Red / Orange (Tomato, Coral, Crimson)"]
A --> C["Blue / Cyan (DodgerBlue, RoyalBlue, Navy)"]
A --> D["Green / Teal (MediumSeaGreen, Teal, Lime)"]
A --> E["Gray / Dark (SlateGray, DimGray, MidnightBlue)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Color Groups Example</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>Color Family Palette Cards</h2>
<div style="display: flex; gap: 1rem;">
<!-- Blue Family Card -->
<div style="background-color: DodgerBlue; color: white; padding: 1rem; border-radius: 6px;">
<strong>DodgerBlue</strong>
</div>
<!-- Green Family Card -->
<div style="background-color: MediumSeaGreen; color: white; padding: 1rem; border-radius: 6px;">
<strong>MediumSeaGreen</strong>
</div>
<!-- Orange Family Card -->
<div style="background-color: Tomato; color: white; padding: 1rem; border-radius: 6px;">
<strong>Tomato</strong>
</div>
</div>
</body>
</html>
Tomato or DodgerBlue are great for quick visual testing before settling on exact hex brand codes.#1e90ff) and HSL colors supply exact, consistent brand shades across all design tokens.Yellow or Cyan over white or light backgrounds.Create 3 <div> badge elements styled using three different HTML named colors from the Blue, Green, and Red color families!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.