CSS colors define the visual color palette of elements on a web page. You can apply colors to text, surface backgrounds, borders, shadows, and SVG paths using color names, Hex codes, RGB values, or HSL representations.
CSS supports five primary methods to declare colors:
.box-named { color: DodgerBlue; }
.box-hex { color: #38bdf8; }
.box-rgb { color: rgb(56, 189, 248); }
.box-rgba { color: rgba(56, 189, 248, 0.8); }
.box-hsl { color: hsl(199, 94%, 60%); }
Color format categories:
Tomato, DodgerBlue, SlateGray.#RRGGBB): Six-digit hexadecimal values representing Red, Green, and Blue intensity from 00 to FF.0 to 255. RGBA adds an Alpha opacity channel (0.0 to 1.0).0 to 360 degrees), Saturation (0% to 100%), and Lightness (0% to 100%).flowchart TD
A["CSS Colors"] --> B["Opaque Color Formats"]
A --> C["Alpha / Transparency Formats"]
B --> B1["Color Names (DodgerBlue)"]
B --> B2["Hex Codes (#38bdf8)"]
B --> B3["RGB (rgb(56, 189, 248))"]
C --> C1["RGBA (rgba(56, 189, 248, 0.8))"]
C --> C2["HSLA (hsla(199, 94%, 60%, 0.8))"]
C --> C3["8-Digit Hex (#38bdf8cc)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Colors Demonstration</title>
<style>
.color-card {
background-color: #1e293b;
border-radius: 8px;
padding: 1.5rem;
max-width: 500px;
}
.text-hex { color: #38bdf8; }
.text-hsl { color: hsl(142, 71%, 45%); }
.bg-rgba { background-color: rgba(37, 99, 235, 0.15); color: #60a5fa; padding: 10px; border-radius: 4px; }
</style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">
<div class="color-card">
<h2>CSS Color Models Overview</h2>
<p class="text-hex">Hex Code Color: #38bdf8</p>
<p class="text-hsl">HSL Color: hsl(142, 71%, 45%)</p>
<div class="bg-rgba">Semi-transparent RGBA background overlay</div>
</div>
</body>
</html>
0% to 100%) easy without altering base color hue.:root variables (--color-primary: #38bdf8;).Create a CSS class .overlay that sets a semi-transparent dark background using rgba(15, 23, 42, 0.75)!
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.
You've completed this section! Take a quick 5-question quiz to check your understanding.