CSS Color Function Generator

Your design system uses #3b82f6 as the primary blue. You need a hover state that’s 20% darker, a disabled state at 50% opacity, and a complementary color — all derived from that single hex value. In Sass, that’s darken() and adjust-hue(). But CSS now has native relative color syntax (oklch(from var(--brand) calc(l - 0.2) c h)) that does the same thing without a preprocessor. The problem: there are 10 different CSS color functions across 3 specs, and knowing which one to use — and how to write the syntax — requires reading MDN pages you didn’t know existed.

Why This Generator (Not MDN or a Color Picker)

Standard color pickers give you one format (usually hex or rgb). MDN documents each color function on separate pages. This tool shows you a single color in every modern CSS format simultaneously — oklch(), oklab(), hsl(), hwb(), lab(), lch(), color(display-p3), color(srgb) — plus color-mix() blending and relative color syntax with live previews. Pick a color once, copy whichever format you need. All processing happens in your browser; no color data is sent anywhere.

What Are Modern CSS Color Functions?

CSS Color Level 4 and 5 introduced a family of color functions that go far beyond the classic #hex and rgb() syntax. Each function targets a specific color space — some optimized for perceptual uniformity, others for wide-gamut displays or design-system token generation.

Modern CSS now supports:

• oklch() — Perceptually uniform Lightness–Chroma–Hue. The best choice for design systems because equal chroma changes look equally vivid across all hues.
• oklab() — Perceptually uniform Lightness–a–b axes. Ideal for smooth color interpolation gradients.
• hsl() — Classic Hue–Saturation–Lightness. Familiar but not perceptually uniform — 50% lightness looks very different in yellow vs blue.
• hwb() — Hue–Whiteness–Blackness. Intuitive tinting and shading: add white or add black.
• lab() — CIE L*a*b* in the D50 reference space. Perceptually uniform, used in print workflows.
• lch() — CIE L*C*H* (cylindrical form of Lab). Same as Lab but expressed in Lightness–Chroma–Hue.
• color(display-p3 …) — Wide-gamut Display P3 space. Supported on modern Apple devices and screens.
• color(srgb …) — Normalized sRGB channels in 0–1 range. Useful for CSS custom property math.
• color-mix() — Blend two colors in a chosen color space at any ratio.
• Relative color syntax — Derive a new color from an existing one: lighten, darken, shift hue, reduce opacity — all in one CSS declaration.

How to Use This Tool

Formats Tab

1. Click the color swatch or use the hex input to choose any color.
2. All CSS color function representations update instantly below the picker.
3. Click Copy next to any format to copy it to your clipboard.
4. The color preview strip confirms the rendered output.

Color Mix Tab

1. Pick two colors using the color pickers.
2. Drag the percentage slider to choose how much of each color to blend.
3. Select the color space — OKLCH or OKLab produce the most perceptually consistent mixes; sRGB can produce muddy results in the middle.
4. Copy the generated color-mix() declaration.

Relative Color Tab

1. Pick a base color.
2. Choose an operation: lighten, darken, saturate, desaturate, shift hue, or set opacity.
3. Adjust the amount slider.
4. Copy the generated relative color syntax — it works natively in CSS without JavaScript.

All processing happens entirely in your browser. No color data is sent to any server.

Understanding Color Spaces

OKLCH — The Modern Default

oklch() uses three channels: L (lightness 0–1), C (chroma, roughly saturation), and H (hue angle 0–360). It is perceptually uniform, meaning that stepping L from 0.4 to 0.5 looks like the same brightness jump regardless of hue or chroma. This makes it the best choice for:

• Design-system color palettes (predictable shading steps)
• CSS custom property tokens
• Relative color syntax (the from keyword)

OKLab — Smooth Gradients

oklab() uses L (lightness), a (green–red axis), and b (blue–yellow axis). Because it is perceptually linear, color-mix() in oklab space avoids the grey desaturation that plagues sRGB mixes.

HSL vs OKLCH

Display P3

color(display-p3 …) addresses screens that display a wider gamut than sRGB — most modern Apple devices, many Android phones, and newer monitors. A P3 red is about 50% more saturated than sRGB red. Use this space when targeting high-end displays.

CIE Lab and LCH

lab() and lch() are the CSS representations of the classic CIE 1976 L*a*b* color space referenced against D50 illuminant. They are the industry standard in print color management. In CSS they behave like perceptually uniform spaces but were standardized before OKLCH; OKLCH is generally preferred in new work because its hue is more stable across lightness levels.

color-mix() — Blending Colors in CSS

/* Blend brand-blue with white, 70% blue, in OKLCH */
background: color-mix(in oklch, #3b82f6 70%, white);

/* 50/50 mix of two custom properties in OKLab */
color: color-mix(in oklab, var(--primary) 50%, var(--secondary));

Color space matters for mixing:

• oklch / oklab — smooth, perceptually consistent results
• srgb — can look dull or grey in the middle; familiar but not recommended for gradients
• hsl — intermediate hues shift unpredictably
• display-p3 — richer midpoint colors on wide-gamut displays

Relative Color Syntax

Relative color syntax (CSS Color Level 5) lets you derive a new color from an existing one by operating on individual channels. No Sass, no JavaScript — pure CSS.

/* Lighten a color by 15% using OKLCH */
color: oklch(from var(--brand) calc(l + 0.15) c h);

/* Darken */
background: oklch(from #3b82f6 calc(l - 0.2) c h);

/* Shift hue by 180° (complementary color) */
border-color: oklch(from var(--primary) l c calc(h + 180));

/* Desaturate (reduce chroma) */
fill: oklch(from currentColor l calc(c - 0.1) h);

/* Set opacity to 50% */
box-shadow: 0 4px 12px oklch(from #3b82f6 l c h / 50%);

Browser Support

For older browsers, provide a hex or rgb fallback above the modern declaration:

background: #3b82f6; /* fallback */
background: oklch(0.6038 0.1581 261.81); /* modern */

Frequently Asked Questions

Should I replace hsl() with oklch() in my codebase? Not necessarily for existing code. OKLCH is recommended for new design systems because it is perceptually uniform. For existing HSL values, a gradual migration is fine — they both work in all modern browsers.

Why does color-mix() in srgb look grey in the middle? The sRGB midpoint of two complementary colors (e.g. red and cyan) passes through a grey region. OKLCH and OKLab avoid this by interpolating through a perceptually consistent path.

Is relative color syntax safe to use in production? It has broad support in evergreen browsers (Chrome 119+, Firefox 128+, Safari 16.2+). For older browsers use @supports or a Sass/PostCSS fallback.

What is the difference between oklab and oklch? They encode the same color space. OKLab uses Cartesian coordinates (a, b axes), OKLch uses cylindrical coordinates (chroma, hue). OKLCH is more intuitive for design work; OKLab is better for mathematical interpolation.

Does this tool send my colors to a server? No. All conversion math runs entirely in your browser using JavaScript. No data leaves your device.