CSS Color Formats Guide
A complete reference for every CSS color format — with syntax, use cases, and conversion tips.
HEX (#RRGGBB)
The most common web color format. Six hexadecimal digits represent red, green, and blue values. Also supports shorthand (#RGB) and alpha (#RRGGBBAA).
/* Standard */ color: #ff6600; /* Shorthand */ color: #f60; /* With alpha */ color: #ff660080;RGB and RGBA
Red, green, and blue channels from 0 to 255. RGBA adds an alpha channel for opacity. Familiar to anyone who works with design tools.
color: rgb(255, 102, 0); color: rgba(255, 102, 0, 0.5);HSL and HSLA
Hue (0-360°), saturation (0-100%), and lightness (0-100%). More intuitive for humans — you pick the hue first, then adjust intensity and brightness.
color: hsl(24, 100%, 50%); color: hsla(24, 100%, 50%, 0.5);OKLCH
A modern, perceptually-uniform color space. OKLCH produces smoother gradients and more consistent lightness than HSL. It's ideal for generating color scales and design systems.
color: oklch(0.65, 0.15, 36);LAB
A device-independent color space designed to approximate human vision. L (lightness), a (green-red axis), b (blue-yellow axis).
color: lab(65%, 45, 40);Named Colors
CSS defines 148 named colors from "aliceblue" to "yellowgreen." The Color Workbench identifies the closest named color for any hex value with a confidence score.
When to Use Each Format
- HEX: Design tokens, static values, copying from design tools
- RGB: When you need to programmatically adjust color channels
- HSL: Creating color scales, adjusting lightness/saturation independently
- OKLCH: Modern design systems, perceptual color scales, gradients
- Named colors: Prototyping, common colors (white, black, transparent)
Using the Color Workbench
The Color Workbench converts between all major CSS color formats instantly. Enter any format in the input panel and see all others generated automatically. Use the export panel to generate CSS variables, SCSS variables, Tailwind config, and design tokens.