CSS: Color Codes

Every way to define color in CSS, and when to use each.

Color Keywords (Named Colors)

CSS includes 140+ named colors you can use directly by name. They are easy to read and great for quick prototyping, but offer limited precision for production design work.

`Named Colors`

Named colors are predefined keywords mapped to specific color values. They cover basic colors as well as many specific shades.

Basic, red, green, blue, black, white, gray, orange, purple
Extended, steelblue, tomato, coral, goldenrod, mediumpurple, slategray
Special, transparent (fully transparent), currentColor (inherits the color property)
Named colors are case-insensitive: Red, red, and RED all work
Use named colors in demos; prefer hex or hsl in production for precision

Named Colors

CSS named colors used directly as values.

.a { color: red; }
.b { color: steelblue; }
.c { color: tomato; }
.d { color: goldenrod; }

Hexadecimal (#RRGGBB, #RGB)

Hex colors encode Red, Green, Blue as two-digit hexadecimal values (00–FF). They are the most common color format in web design tools and design handoffs.

`#RRGGBB`

Each pair of hex digits controls one color channel from 00 (none) to FF (full). A shorthand 3-digit form works when each pair repeats.

#ff0000, full red, no green, no blue = red
#000000, no channels = black
#ffffff, all channels full = white
#f00, shorthand for #ff0000 (each digit doubles)
#RRGGBBAA, 8-digit hex adds an alpha channel (e.g. #ff000080 = 50% red)

Hex Colors

Six-digit hex values for precise color control.

div {
  padding: 10px 16px;
  color: white;
  margin-bottom: 6px;
  font-family: monospace;
  border-radius: 4px;
}

.a { background: #e74c3c; }
.b { background: #2ecc71; }
.c { background: #3498db; }
.d { background: #f39c12; }

RGB and RGBA

The rgb() function defines color using three numbers from 0 to 255 for Red, Green, and Blue. Adding a fourth value with rgba() controls transparency.

`rgb() and rgba()`

RGB is more readable than hex when you need to tweak individual channels. The alpha value in rgba() ranges from 0 (fully transparent) to 1 (fully opaque).

rgb(255, 0, 0), red; same as #ff0000
rgb(0, 0, 0), black
rgba(0, 0, 0, 0.5), 50% transparent black; useful for overlays
rgba(255, 255, 255, 0.8), slightly transparent white
Modern CSS also allows rgb(255 0 0 / 0.5) without commas

RGB and RGBA

rgb() for solid colors; rgba() for transparent overlays.

.solid {
  background: rgb(52, 152, 219);
  color: white;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.overlay-wrap {
  position: relative;
  background: steelblue;
  color: white;
  padding: 12px;
  border-radius: 4px;
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

HSL and HSLA

HSL stands for Hue, Saturation, Lightness. It is the most human-readable color format, you can intuitively create tints, shades, and color palettes by adjusting just one value.

`hsl() and hsla()`

HSL maps to how humans think about color. Hue is an angle on the color wheel; saturation controls intensity; lightness controls how light or dark the color is.

Hue (0–360), 0=red, 60=yellow, 120=green, 180=cyan, 240=blue, 300=magenta
Saturation (0–100%), 0% = gray, 100% = fully vivid color
Lightness (0–100%), 0% = black, 50% = normal, 100% = white
hsla(), adds alpha channel, same as rgba()
To create a lighter tint: increase lightness. For a darker shade: decrease lightness

HSL Colors

Adjust lightness to create tints and shades from the same hue.

div {
  padding: 10px 14px;
  color: white;
  margin-bottom: 6px;
  border-radius: 4px;
  font-family: monospace;
}

.base  { background: hsl(210, 70%, 50%); }
.light { background: hsl(210, 70%, 75%); color: #333; }
.dark  { background: hsl(210, 70%, 25%); }
.muted { background: hsl(210, 20%, 50%); }

currentColor Keyword

currentColor is a special keyword that refers to the element's current color property value. It lets other properties automatically follow the text color without duplication.

`currentColor`

currentColor reuses the value of the color property wherever you need it: borders, backgrounds, shadows, SVG fills, keeping color changes in one place.

border: 2px solid currentColor, border matches text color automatically
box-shadow: 0 0 8px currentColor, shadow matches text color
Change the color property once: everything using currentColor updates automatically
Inherited by child elements along with the color property

currentColor

Border and shadow automatically match the text color.

.card {
  padding: 16px;
  margin-bottom: 10px;
  border: 2px solid currentColor;
  box-shadow: 3px 3px 0 currentColor;
  border-radius: 6px;
  font-weight: bold;
}

.blue { color: steelblue; }
.red  { color: crimson; }

Opacity vs Alpha Transparency

There are two ways to make an element transparent in CSS: the opacity property and the alpha channel in color functions. They behave differently.

`opacity vs alpha`

opacity affects the entire element and all its children. Alpha transparency only affects the specific color it is applied to, leaving children fully opaque.

opacity: 0.5, makes the element AND all its children 50% transparent
rgba(0,0,0,0.5), makes only that color 50% transparent; children unaffected
opacity: 0, invisible but still takes up space in the layout
Use alpha for overlays and backgrounds; use opacity for fading whole components

Opacity vs Alpha

opacity fades everything including text; rgba only fades the background.

.opacity-box {
  opacity: 0.4;
  background: steelblue;
  color: white;
  padding: 14px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.alpha-box {
  background: rgba(70, 130, 180, 0.4);
  color: #333;
  padding: 14px;
  border-radius: 4px;
}

Color Accessibility (Contrast Ratios)

Many users have low vision or color blindness. The WCAG (Web Content Accessibility Guidelines) define minimum contrast ratios between text and its background to ensure readability.

`WCAG Contrast Ratios`

Contrast ratio compares the relative luminance of the text color against the background. A ratio of 1:1 means no contrast (same color); 21:1 is maximum (black on white).

AA: Normal text, minimum ratio 4.5:1
AA: Large text (18px+ or 14px bold), minimum ratio 3:1
AAA: Normal text, enhanced ratio 7:1
Never rely on color alone to convey information: add icons or text labels
Check your colors with tools like WebAIM Contrast Checker or browser DevTools

Level	Text Size	Min Ratio
AA	Normal text (below 18px)	4.5:1
AA	Large text (18px+ or 14px bold)	3:1
AAA	Normal text	7:1
AAA	Large text	4.5:1

Color Accessibility

Dark text on a light background passes; low-contrast text fails.

/* Passes AA: ratio ~7:1 */
.pass {
  color: #1a1a1a;
  background: #ffffff;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 4px;
}

/* Fails AA: ratio ~1.6:1 */
.fail {
  color: #aaaaaa;
  background: #ffffff;
  padding: 10px;
  border-radius: 4px;
}

Knowledge Check

1. What does the shorthand hex #f0a expand to?

2. In rgba(255, 0, 0, 0.5), what does 0.5 control?

3. In hsl(120, 100%, 50%), what does 120 represent?

4. What does the currentColor keyword do?

5. What is the minimum contrast ratio for normal text to meet WCAG AA accessibility?

Previous Next