CSS allows you to set colors using different formats.
Use predefined names like red, blue, green, yellow, etc.
1 2 3 |
p { color: red; } |
A 6-digit code starting with #.
1 2 3 |
h1 { color: #ff5733; } |
Define Red, Green, Blue values (0–255).
1 2 3 |
div { background-color: rgb(0, 128, 255); } |
a = transparency (0 to 1)
1 2 3 |
div { background-color: rgba(0, 128, 255, 0.5); } |
Hue, Saturation, Lightness.
1 2 3 |
h2 { color: hsl(200, 80%, 50%); } |
1 2 3 |
h2 { color: hsla(200, 80%, 50%, 0.6); } |
1 2 3 4 5 |
h1 { color: blue; } /* Color name */ p { color: #00ff00; } /* Hex */ div { color: rgb(255, 0, 0); } /* RGB */ span { color: rgba(0, 0, 0, 0.4); }/* RGBA */ h3 { color: hsl(120, 50%, 50%); } /* HSL */ |
by CodeCapsule · Published November 26, 2025 · Last modified January 13, 2026
by CodeCapsule · Published December 15, 2025
by CodeCapsule · Published December 15, 2025