CSS Color Converter for Developers

CSS Color Converter for Developers

CSS supports five distinct color syntaxes in active use.

Legacy stylesheets use HEX and rgb() almost exclusively. Modern design systems add hsl() for maintainable tokens. CSS Color Level 4 introduces oklch() as the perceptually uniform format recommended for new color scales.¹ Moving a color value between these syntaxes is a daily task for any developer who works across tools with different defaults, and the math behind OKLCH conversion is complex enough that doing it manually is impractical.

CSS color formats and their use cases

HEX is the most portable CSS color format, and every browser, tool, and email client that processes CSS accepts it. RGB is the format browsers use internally for computed styles and the one returned by DevTools, canvas APIs, and JavaScript getComputedStyle(). HSL is designed for human adjustment because you can hold the hue angle fixed while varying lightness to generate shade ramps. OKLCH is the CSS Color Level 4 format with perceptual uniformity, meaning equal numeric steps produce roughly equal perceived differences and making it the best choice for building accessible color scales. Furthermore, oklch() is now supported natively in Chrome, Firefox, Safari, and Edge without polyfills.²

Converting for specific CSS use cases

Inline SVG color attributes accept HEX or rgb() but oklch() is not yet reliably parsed by SVG viewers outside modern browsers. CSS custom properties accept any valid color value, including oklch(). CSS color-mix() and relative color syntax require at least one operand in the same color space, making OKLCH or HSL the better choices for dynamic mixing. The output format choice therefore depends on where the value will be used, so you can pick the CSS color syntax your target accepts instead of defaulting to readability. Storing the canonical value in OKLCH and converting to HEX for compatibility is a sound pattern for modern CSS design systems, especially when a token pipeline can emit both formats from a single source definition.

Alpha channels and modern CSS color functions

Alpha is handled differently across CSS color formats. HEX supports it through an optional 8-digit form (#rrggbbaa), RGB uses rgba() with a fourth 0–1 value, and CSS Color Level 4 introduces a slash-separated alpha syntax for HSL, OKLCH, and the newer rgb() variant.³ The slash form looks like hsl(217 91% 60% / 0.5) or oklch(0.612 0.212 261.5 / 0.5). The legacy comma syntax (rgba(r, g, b, a)) is still required for some CSS 2.1 contexts, so you often need both forms in production. Building on this, CSS custom properties that define alpha-enabled tokens should use the Level 4 slash syntax to stay compatible with color-mix() and future color functions.

CSS Color Level 4 relative color syntax in practice

CSS Color Level 4 relative color syntax derives a new color from an existing one by specifying which channels to modify. The expression color(from var(--color-brand) oklch calc(l * 0.85) c h) produces a darker variant by reducing lightness to 85% of the original while keeping chroma and hue identical. This syntax works in any rule that accepts a color value, including background, border, box-shadow, and gradient color stops. All modern browsers support it as of 2023.

Chaining relative color operations

Chaining lets you derive an entire shade and tint family from a single base token by composing multiple relative color expressions in the same stylesheet. Starting from --color-primary: oklch(0.612 0.212 261.5), define --color-primary-light as color(from var(--color-primary) oklch calc(l + 0.18) calc(c * 0.8) h) and --color-primary-dark as color(from var(--color-primary) oklch calc(l - 0.18) calc(c * 0.9) h). Each derived value references the base token through var(), so changing --color-primary updates all variants automatically. This replaces the preprocessor loops or manual calculations that design token systems previously needed to generate shade scales.

Chaining also keeps the family coherent when the base changes, because every derived shade is computed from the live token rather than from a snapshot value. If a designer retunes the brand hue, the light and dark variants follow automatically instead of needing a separate pass through a conversion tool. That live dependency is the main reason to build shade families this way: the spreadsheet of hand-computed triples it replaces was always one edit behind the base color.

When to use OKLCH versus HSL in CSS today

HSL remains the better choice when you need to support browsers older than 2023, when your team is not familiar with perceptual color models, or when you are writing one-off CSS that does not go through a design token pipeline. OKLCH is the better choice for new design systems, for any project targeting modern browsers, and for workflows that require perceptual consistency across hue families. Both formats are valid CSS; the choice depends on your browser support requirements and whether perceptual uniformity matters for your use case.

Mixing OKLCH and HSL in the same stylesheet

You can use OKLCH for design tokens and HSL for one-off values in the same stylesheet without conflict. CSS does not require all colors to be in the same format. A practical pattern defines all semantic tokens in OKLCH (--color-primary: oklch(0.612 0.212 261.5)) and allows HSL for quick prototyping or third-party component overrides. The only place format consistency matters is inside color-mix() or relative color syntax, which require both operands to be in the same color space or to specify the target space explicitly.

Converting colors at build time versus runtime

Converting HEX to OKLCH at build time (via PostCSS or a design token compiler) produces static oklch() values in the output CSS, with no runtime conversion cost. Converting at runtime (via JavaScript in the browser) is necessary when the input color comes from user interaction, a theme editor, or an API response. For most design systems, build-time conversion is the right choice: it emits plain CSS, works without JavaScript, and adds zero runtime overhead. Reserve runtime conversion for interactive color pickers, theme preview tools, and other UX features that need instant feedback.

PostCSS plugins for build-time OKLCH conversion

postcss-preset-env includes a Color Level 4 transform that converts oklch() to HEX for older browsers while preserving the original oklch() for modern ones. If your source CSS uses HEX and you want to convert to OKLCH at build time, a custom PostCSS plugin or a Style Dictionary transform handles the conversion. Style Dictionary's "css/oklch" transform reads HEX input tokens and writes oklch() output, which postcss-preset-env then processes into a dual-declaration with HEX fallback.

When to use this

Use this when writing CSS and you need a color value in a format that a specific CSS function, SVG attribute, or browser API expects, particularly when your stylesheet mixes legacy HEX tokens with modern oklch() design tokens.

Examples

#c8ff00

oklch(0.960 0.241 128.2)

rgb(59, 130, 246)

hsl(217, 91%, 60%)