CSS Colors

Beginner ~10 min read

Color in CSS

CSS offers multiple ways to specify colors. Each format has its advantages, and you'll use different ones depending on your needs.

CSS has 140 predefined color names like red, blue, green. Easy to remember but limited.

HTML

CSS

<h1>Named Colors</h1>\n<p class="red">Red text</p>\n<p class="blue">Blue text</p>\n<p class="green">Green text</p>

Hex colors use a # followed by 6 digits (or 3 for shorthand). Format: #RRGGBB where RR=red, GG=green, BB=blue.

HTML

CSS

<div class=" box box1">Blue #2563eb</div>\n<div class="box box2">Green #10b981</div>\n<div class="box box3">Red#dc2626</div>

Shorthand: #fff = #ffffff (white), #000 = #000000 (black)

RGB uses red, green, blue values (0-255). RGBA adds an alpha channel for opacity (0-1).

HTML

CSS

<div class=" overlay overlay1">Solid RGB </div>\n<div class="overlay overlay2">50% Opacity</div>\n<div class="overlay overlay3">25% Opacity</div>

HSL stands for Hue (0-360°), Saturation (0-100%), Lightness (0-100%). HSLA adds opacity. More intuitive for color adjustments.

HTML

CSS

<div class=" hsl hsl1">Hue 217° (Blue)</div>\n<div class="hsl hsl2">Hue 142° (Green)</div>\n<div class="hsl hsl3">Hue 0° (Red)</div>

Which color format allows you to set transparency?

Hex

Named colors

RGBA

RGB