Codectionary / Developer documentation / CSS

Color Values

CSS supports several ways to specify color: named colors, hexadecimal, rgb()/rgba(), hsl()/hsla(), and the modern color functions oklch() and color-mix(). All accept an alpha channel for transparency. oklch() is increasingly preferred because it produces more perceptually uniform, predictable color adjustments than older formats.

Syntax

#hex, rgb(r g b / a), hsl(h s l / a), oklch(l c h)

Examples

The Classic Formats

Named colors, hex, rgb, and hsl.

.a { color: coral; }                     /* named color */
.b { color: #ff6b35; }                    /* hex */
.c { color: rgb(255 107 53); }            /* rgb, modern space-separated syntax */
.d { color: rgb(255 107 53 / 50%); }      /* rgb with alpha transparency */
.e { color: hsl(16 100% 60%); }           /* hue, saturation, lightness */

Modern Color Functions

oklch() and color-mix(), which offer more predictable, perceptually accurate results.

.modern {
  color: oklch(70% 0.15 50); /* lightness, chroma, hue - perceptually uniform */
}

.mixed {
  background: color-mix(in oklch, blue 60%, white); /* blends two colors directly in CSS */
}

Parameters and values

  • hex (#rrggbb): Hexadecimal color, most common legacy format
  • rgb() (r g b / alpha): Red, green, blue, with optional alpha
  • hsl() (hue sat light / alpha): Often easier to reason about for adjusting shades
  • oklch() (lightness chroma hue): Modern, perceptually uniform color space

Best practices

  • Use hsl() when you need to programmatically create color variations (lighter/darker shades of the same hue) - adjusting lightness alone is intuitive
  • Reach for oklch() in new projects for more perceptually accurate and predictable color mixing and adjustments
  • Use the modern space-separated rgb()/hsl() syntax with a slash for alpha (rgb(0 0 0 / 50%)) rather than the older comma-separated rgba()
  • Store brand colors as CSS custom properties rather than repeating hex codes throughout a stylesheet

At a glance

Purpose
Presentation and layout
File extension
.css
Runs in
Web browsers
Usually used with
HTML and JavaScript

Specifications & further reading

Related CSS documentation

Background Properties
Background properties control an element's background color and image. background-image sets one or more images, background-size controls their scaling, background-position controls placement, and background-repeat controls tiling. Multiple backgrounds can be layered by comma-separating values.Gradients
CSS gradients generate smooth transitions between colors without needing an image file. linear-gradient() transitions along a straight line/angle, radial-gradient() transitions outward from a center point, and conic-gradient() transitions around a center point like a color wheel. Gradients are used as background-image values.Border Properties
border draws a line around an element's edge, controlled by width, style, and color, which can be set together via the border shorthand or individually per side (border-top, border-right, etc). border-radius rounds the corners, accepting one value for all corners or up to four for individual control.box-shadow
box-shadow adds one or more drop shadows to an element's box, accepting horizontal offset, vertical offset, blur radius, optional spread radius, and color. The inset keyword flips the shadow to render inside the element instead of outside. Multiple shadows can be layered by comma-separating values, useful for realistic elevation effects.