HTML colors define the visual color palette of elements on a web page. You can apply colors to text, background surfaces, borders, and shadows using color names, Hex codes, RGB values, or HSL representations.
Web browsers support four primary methods to declare colors in HTML and CSS:
Tomato, DodgerBlue, MediumSeaGreen, and SlateGray. HTML supports 140 standard color names.00 to FF (e.g., #ff6347 or #0f172a).0 to 255 (e.g., rgb(255, 99, 71)). RGBA adds an Alpha channel (0.0 to 1.0) for background transparency.0 to 360 degrees), Saturation (0% to 100%), and Lightness (0% to 100%). HSLA includes Alpha opacity.The diagram below shows how different color formats define colors and handle transparency:
flowchart TD
A["HTML Colors"] --> B["Opaque Color Formats"]
A --> C["Alpha / Transparency Formats"]
B --> B1["Color Names (DodgerBlue)"]
B --> B2["Hex Codes (#2563eb)"]
B --> B3["RGB (rgb(37, 99, 235))"]
C --> C1["RGBA (rgba(37, 99, 235, 0.8))"]
C --> C2["HSLA (hsla(221, 83%, 53%, 0.8))"]
C --> C3["8-Digit Hex (#2563ebcc)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Colors Example</title>
</head>
<body style="background-color: #f8fafc; font-family: sans-serif; padding: 20px; color: #334155;">
<!-- Heading styled with named color -->
<h2 style="color: DodgerBlue; text-align: center;">HTML Color Formats Overview</h2>
<!-- Card container with hex background and styled border -->
<div style="background-color: #ffffff; border: 2px solid #e2e8f0; border-radius: 8px; padding: 20px; max-width: 600px; margin: 0 auto;">
<!-- Text with RGB color -->
<p style="color: rgb(220, 38, 38); font-weight: bold;">
Red text defined using RGB: rgb(220, 38, 38)
</p>
<!-- Paragraph with HSL background -->
<p style="background-color: hsl(142, 71%, 45%); color: #ffffff; padding: 10px; border-radius: 4px;">
Green callout container using HSL: hsl(142, 71%, 45%)
</p>
<!-- Box with semi-transparent RGBA background -->
<div style="background-color: rgba(37, 99, 235, 0.15); color: #1e40af; border-left: 4px solid #2563eb; padding: 12px;">
This alert box uses RGBA with 15% opacity for a smooth overlay effect.
</div>
</div>
</body>
</html>
0% to 100%) without changing the base hue angle.--primary-color: #2563eb;) for clean theme maintenance.Create an HTML <div> callout box styled with a dark navy background (#0f172a), teal border (#14b8a6), light cyan text (#e0f2fe), and a semi-transparent shadow using RGBA!
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.