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

Syntax

css

selector {
  color: colorValue;
  background-color: colorValue;
}

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.
Accepted values:
named color — keywords like red, teal, tomato
#rrggbb — hex code, e.g. #ff6600
rgb(r, g, b) — channels from 0 to 255
hsl(h, s%, l%) — hue, saturation, lightness
rgba() / hsla() — adds an alpha (opacity) channel
transparent — fully transparent
currentcolor — uses the element's text 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.
Accepted values:
#rgb — 3-digit shorthand; each digit is doubled (#f60 = #ff6600)
#rrggbb — 6-digit red, green, blue pairs, 00 to ff
#rgba — 4-digit shorthand including alpha
#rrggbbaa — 8-digit form; aa is alpha, 00 transparent to ff opaque

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.
Accepted values:
rgb(r, g, b) — each channel 0 to 255
rgb(r g b) — modern space-separated syntax
rgb(r g b / a) — adds alpha after a slash
rgb(0% 50% 100%) — channels as percentages
rgba(r, g, b, a) — legacy alias with alpha from 0 to 1

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.
Accepted values:
hsl(h, s%, l%) — hue, saturation, lightness
hue — an angle 0 to 360 (0 red, 120 green, 240 blue)
saturation — 0% is gray, 100% is fully vivid
lightness — 0% is black, 50% is the pure color, 100% is white
hsl(h s% l% / a) — modern syntax with alpha

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>

Live Example

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

CSS Colors

Named Colors

Hex Colors

RGB and RGBA

HSL and HSLA

Choosing Accessible Color Contrast

Chapter Quiz — Complete all 21 topics to unlock

Login to run this code