CSS Reference

CSS Color Formats

Complete guide to CSS color formats — HEX, RGB, HSL, OKLCH, named colors, transparency, and color-mix().

Overview

CSS supports many color formats, each with different strengths. Hexadecimal (#RRGGBB) is compact and widely used. RGB (rgb(R, G, B)) maps directly to screen output. HSL (hsl(H, S%, L%)) is intuitive for creating palettes. Newer formats like OKLCH provide perceptually uniform color manipulation. Understanding when to use each format helps create accessible, maintainable designs.

Syntax

color: <color-value>

Values

Hex

`#RRGGBB` or `#RGB` (short). 8-digit for alpha: `#RRGGBBAA`. Example: `#ff6600`.

rgb()

`rgb(255, 102, 0)` or modern syntax `rgb(255 102 0)`. Range: 0-255 per channel.

hsl()

`hsl(24, 100%, 50%)`. Hue: 0-360°, Saturation: 0-100%, Lightness: 0-100%.

oklch()

`oklch(0.7 0.15 50)`. Perceptually uniform — consistent lightness perception.

Named colors

148 named colors: `tomato`, `coral`, `slateblue`, `transparent`, etc.

color-mix()

`color-mix(in srgb, #ff0000 50%, #0000ff)`. Blends two colors in a given color space.

currentColor

Inherits the current `color` property value. Useful for SVG icons and borders.

Browser Support

HEX, RGB, HSL: universal. OKLCH: Chrome 111+, Firefox 113+, Safari 15.4+. color-mix(): Chrome 111+, Firefox 113+, Safari 16.2+.

Try it visually

Use our visual color generator to create and preview CSS code in real-time.

Open CSS Color Formats Tool

Frequently Asked Questions

Use HSL for design tokens and palette creation (easy to adjust lightness/saturation). Use HEX for static values in code. Use OKLCH if you need perceptually uniform scales.

Use the / alpha syntax: `rgb(255 0 0 / 0.5)`, `hsl(0 100% 50% / 0.5)`, or 8-digit hex: `#ff000080`.

A keyword that resolves to the element's computed `color` property. Useful for making borders, shadows, and SVGs inherit the text color.