Colour Formats in CSS: HEX, RGB, HSL and OKLCH Explained
CSS supports more colour formats than ever in 2026. This guide explains HEX, RGB, RGBA, HSL, HSLA, and the modern OKLCH format — and when to use each one.
CSS in 2026 supports more color formats than ever. Choosing the right one for your use case can make your code more maintainable and your designs more consistent. Here's a complete guide to every major CSS color format.
HEX Colors
#FF5733 — The most familiar format. Two hex digits each for red, green, and blue.#RGB shorthand (e.g., #F53) works when both digits are the same. Add two more digits for alpha: #FF573380 (50% opacity). Best for: copying from design tools, static colors.
RGB and RGBA
rgb(255, 87, 51) andrgba(255, 87, 51, 0.5). Values range 0–255 for channels, 0–1 for alpha. Modern CSS also accepts: rgb(255 87 51 / 50%). Best for: when you need to programmatically manipulate channel values.
HSL and HSLA
hsl(11, 100%, 60%)— Hue (0–360°), Saturation (0–100%), Lightness (0–100%). This is the most intuitive format for humans: "make it 20% lighter" means increase L by 20. Best for: design systems where you need programmatic color variations.
OKLCH: The Modern Standard
oklch(63% 0.2 28) — Lightness, Chroma (saturation), Hue. OKLCH is perceptually uniform — equal numerical changes produce equal perceived changes. This makes it ideal for design systems and generating accessible color palettes. Supported in all modern browsers since 2023.
CSS Custom Properties for Color Systems
:root {
--color-primary: oklch(55% 0.2 250);
--color-primary-light: oklch(75% 0.15 250);
--color-primary-dark: oklch(35% 0.25 250);
}Convert between color formats with our Color Converter tool.