CSSColors in CSS

Colors in CSS

Color in CSS goes far beyond the color property for text. You have gradients, color spaces ranging from sRGB to wide-gamut P3, alpha transparency, colour mixing functions, and colour-scheme detection for dark mode support. This section covers the full spectrum — from basic colour values to advanced colour manipulation.

Where colours appear in CSS

Property

What it colours

color

Text and inline elements

background-color

Element background fill

border-color

Border lines

box-shadow

Drop shadows

text-shadow

Text shadows

outline-color

Focus outlines

caret-color

Text input cursor

fill, stroke

SVG elements

Gradient functions

Both background and border-image

The colour value types

  • Named colours — red, blue, transparent (140+ named colours)

  • Hex notation — #ff0000, #f00, #ff0000ff (with alpha)

  • RGB/RGBA — rgb(255 0 0), rgba(255 0 0 / 0.5)

  • HSL/HSLA — hsl(0 100% 50%) (intuitive for colour palettes)

  • Modern spaces — oklch(), lch(), lab() (perceptually uniform)

  • Color keywords — currentColor, transparent, inherit

Accessibility considerations

  • Contrast: WCAG AA requires 4.5:1 for normal text, 3:1 for large text

  • Don't rely on colour alone: Use text, patterns, or symbols alongside colour

  • Colour blindness: Test with tools like Stark or WebAIM contrast checker

  • Use currentColor: Inherits text colour, good for icons and decorations

CSS
/* Accessible colour patterns */
.error {
  color: #d13212;           /* red */
  border-left: 4px solid currentColor; /* repeats the error colour */
}

.success {
  color: #0b6623;           /* green */
  background: #dffcf0;      /* light green contrast */
}

/* Icon inherits text colour */
.icon { fill: currentColor; }
Next
The classic colour formats and how they work: [hex, rgb() & hsl()](/css/hex-rgb-hsl).