CSS Colors

Color is often the very first thing CSS gets used for, and it turns out there are several different ways to describe the exact same color in CSS. You can use plain color names like blue, hex codes like '#1a73e8' (the format you'll see used most often in real projects), rgb() values built from red, green, and blue numbers, or hsl() values built from hue, saturation, and lightness. Adding an a to rgb or hsl (making it rgba or hsla) lets you also control transparency. Once you're comfortable reading hex and rgb values, you'll be able to match any color from a design file exactly on a real site like cookiescursor.com.

In this page:

Named Colors
Hex Colors
RGB and RGBA
HSL and HSLA
Choosing Accessible Color Contrast

Named Colors

CSS understands a set of plain English color names, like red, blue, and white, that you can use directly as a value without any special formatting.

Note: Named colors are great for quick prototypes, but switch to hex or rgb once you need an exact brand color.

Warning: Named colors are limited to a fixed list, they can't express the precise, custom shades most real brands actually use.

Example: Named Colors

css

<style>
p {
  color: blue;
  background-color: white;
}
</style>
<p>Named colors example</p>

Hex Colors

A hex color is written as a hash followed by six characters representing red, green, and blue in pairs, like #1a73e8. It's the most common way to express an exact color in real projects.

Note: Design tools almost always export colors as hex codes, so learning to read them makes translating a design into CSS much faster.

Warning: A hex code needs exactly six characters (or three, for shorthand); a typo of one character produces a completely different color.

Example: Hex Colors

css

<style>
p {
  color: #1a73e8;
}
</style>
<p>Hex color example</p>

RGB and RGBA

The rgb() function builds a color from three numbers between 0 and 255, for red, green, and blue. Adding a fourth value (rgba) controls opacity, from 0 (invisible) to 1 (fully solid).

Note: Use rgba() whenever you need a color that's partially see-through, like a subtle overlay on top of an image.

Warning: The alpha value in rgba() is a number between 0 and 1, not a percentage like 0 to 100.

Example: RGB and RGBA

css

<style>
p {
  color: rgb(26, 115, 232);
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
<p>RGB and RGBA example</p>

HSL and HSLA

The hsl() function describes a color by hue (a position on the color wheel, 0 to 360), saturation (how vivid the color is), and lightness (how light or dark it is), which many people find more intuitive than rgb.

Note: HSL makes it easy to create matching color variations, just adjust the lightness value up or down to get lighter or darker shades of the same hue.

Warning: Hue wraps around at 360 degrees, so a value like 370 behaves the same as 10, which can be confusing if you forget it's circular.

Example: HSL and HSLA

css

<style>
p {
  color: hsl(210, 82%, 51%);
}
</style>
<p>HSL color example</p>

Choosing Accessible Color Contrast

Not every color combination is easy to read. Accessible design means picking enough contrast between text and its background so that visitors with low vision or color blindness can still read it comfortably.

Note: As a simple rule of thumb, dark text on a light background (or the reverse) with strong contrast is almost always safer than light-on-light or dark-on-dark.

Warning: Light gray text on a white background might look stylish, but it can be genuinely difficult or impossible for some visitors to read.

Example: Choosing Accessible Color Contrast

css

<style>
.good-contrast {
  color: #111111;
  background-color: #ffffff;
}
.poor-contrast {
  color: #eeeeee;
  background-color: #ffffff;
}
</style>
<p class="good-contrast">Easy to read</p>
<p class="poor-contrast">Hard to read</p>

Common Mistakes

Using a color name for a very specific brand color instead of an exact hex or rgb value.
Forgetting that rgba() and hsla() need a fourth value between 0 and 1 for opacity.
Picking colors with too little contrast between text and background, which hurts readability.

Chapter Summary

CSS colors can be written as named colors, hex codes, rgb()/rgba(), or hsl()/hsla().
Hex codes are the most common way to express exact brand colors in real projects.
The a in rgba and hsla adds an alpha channel that controls transparency.

Browser Support

All standard CSS color formats covered here are supported by every modern browser.

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Inheritance Next Lesson → CSS RGB Colors