color-background
color
Sets the foreground text color and inherits by default. Modern browsers support oklch() and color(display-p3) for wider-gamut design systems.
color: <color> (named | #hex | rgb() | hsl() | oklch() | currentColor)Common values
| Value | Effect |
|---|---|
| #111827 | Hex color literal |
| rgb(17 24 39 / .9) | RGB with alpha via slash syntax |
| hsl(220 15% 15%) | Hue/saturation/lightness color |
| oklch(70% 0.15 250) | Perceptually uniform color |
| currentColor | Inherits from the element's own color |
Examples
body { color: #111827; }Near-black body text
.muted { color: hsl(220 10% 45%); }Secondary text color
svg { fill: currentColor; }Icons match surrounding text color
Gotcha
Alpha in rgba()/hsla() and the newer space-separated syntax both work; stay consistent to simplify design tokens.
Related properties
background
Shorthand for all background-* properties, letting you set color, image, position, size, and repeat in one declaration. Resets any background properties you do not specify to their initial values.
opacity
Sets the transparency of an entire element, including its background, borders, and children. Values range from 0 (fully transparent) to 1 (fully opaque).
text-decoration
Shorthand for text-decoration-line, style, color, and thickness. Used to add or remove underlines, overlines, and strike-throughs on text.
font-weight
Sets the thickness of glyphs. Numeric weights from 100 to 900 map to Thin through Black; variable fonts accept any integer up to 1000.
background-image
Sets one or more background images on an element, including URL images and CSS gradients. Multiple layers stack in the order given, with the first painted on top.