What is OKLCH and why should I use it for CSS?

OKLCH is a polar form of the OKLab perceptual color space introduced in CSS Color Level 4. Its three components are Lightness (0–1), Chroma (roughly saturation, 0–0.4+), and Hue (0–360°). Because OKLab is perceptually uniform, equal numeric steps in OKLCH look like equal steps of brightness or saturation to the human eye — unlike HSL, where a 10° hue shift looks dramatically different depending on which part of the spectrum you are in. Modern browsers (Chrome 111+, Firefox 113+, Safari 15.4+) support oklch() natively, making it ideal for design tokens, Tailwind v4 themes, and accessible contrast work.

How do I use the output as a CSS custom property?

In the "CSS Variable" row, type your preferred variable name (e.g. color-brand-primary) and the row updates to --color-brand-primary: #xxxxxx;. Copy the line and paste it inside a :root { } block in your stylesheet. You can then use var(--color-brand-primary) anywhere in your CSS. If you prefer an oklch() value in the variable, copy the OKLCH row value and manually write --color-brand-primary: oklch(...); — Tailwind v4 supports oklch CSS variables natively for theming.

How do I use the Tailwind output?

The Tailwind row shows an arbitrary-value class like bg-[#06b6d4]. Switch the prefix selector to text, border, ring, fill, or stroke for the class that matches your use case, then copy and paste it directly into your JSX className or HTML class attribute. Arbitrary-value syntax works in Tailwind v2, v3, and v4 with no additional config — as long as JIT mode is enabled (which is the default in v3+).

Which color formats does the input field recognise?

The tool auto-detects four formats: hex strings (#rgb, #rrggbb, with or without the # prefix), rgb() and rgba() function notation, hsl() and hsla() function notation (both comma-separated and modern space-separated variants), and oklch() with decimal or percentage lightness. If the input doesn't match any recognised format an error badge appears; fix the syntax or pick a colour from the native colour picker instead.

Does alpha / transparency affect the conversion?

The current tool focuses on opaque colours. When you use the colour picker or type a hex code the alpha channel is treated as fully opaque (100%). rgba() and hsla() values with alpha are parsed but the alpha component is ignored for the conversion outputs. Full alpha support across all output formats (including oklch() / a) is planned for a future update.

Copying a Figma color into CSS as oklch()

You pick a swatch in Figma, get a hex code like #7c3aed, and need it as oklch() for a CSS Color Level 4 stylesheet. Paste the hex here, read oklch(0.4457 0.2457 293.8) from the OKLCH row, and copy it straight into your :root block — no manual matrix math needed.

Building a Tailwind v4 design token file

Tailwind v4 lets you theme via CSS variables using oklch. You have a brand palette in hex and need to fill in --color-primary through --color-accent. For each swatch paste the hex, grab the CSS variable row (customising the variable name), and build your tokens.css in seconds instead of converting each colour by hand.

Checking whether a designer's oklch() value renders correctly

A designer sends oklch(0.72 0.15 200) in a spec doc. You paste it into the input, see the hex, RGB, and HSL equivalents alongside the preview swatch, and instantly verify it is indeed that teal-green shade before wiring it up in code.

CSS Color Format Converter — HEX, RGB, HSL, OKLCH, CSS Variable & Tailwind

Convert any color between HEX, RGB, HSL, OKLCH, CSS variable, and Tailwind — with live preview.

Runs locally
Category Color & Design
Best for Moving from a visual idea to reusable color values.

Pick a color

Color input

Detected:hex

Preview

Variable nameClass prefix

HEX

RGB

HSL

OKLCH

CSS Var

Tailwind

What this tool does

Paste any CSS color in HEX, RGB, HSL, or OKLCH format and instantly see every other representation side-by-side: a hex string, rgb() and hsl() function calls, the modern oklch() form (CSS Color Level 4), a ready-to-paste CSS custom property, and a Tailwind arbitrary-value class. A colour picker lets you visually choose any shade, and a live preview swatch confirms the result at a glance. The CSS variable name and the Tailwind class prefix (bg, text, border, ring, fill, stroke) are both editable so you can copy the exact line you need. Every value has its own copy button. The tool auto-detects the input format so you never have to specify it manually. All conversions run client-side with no server round-trip.

Tool details

Input: Text + Numbers + Structured content; The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output: Live result + Copy + Preview; The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy: Browser-side processing; The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share: Shareable URL state; Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget: Initial JS <= 22 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Color & Design · Developer; Category and role tags drive related tools, internal links, and quick fit checks.

How to use

1. Input

Paste or drop your content into the tool panel.
2. Process

Click the button. All processing is local in your browser.
3. Copy / Download

Copy the result or download to disk in one click.

How CSS Color Format Converter fits into your work

Use it while choosing, checking, converting, or documenting colors for real interface work.

Color jobs

Moving from a visual idea to reusable color values.
Checking contrast and accessibility before a UI ships.
Keeping brand, design, and implementation color decisions aligned.

Color checks

Verify contrast against the actual background, not just a sample swatch.
Check dark and light themes separately when both exist.
Copy the final format your design system or codebase expects.

Good next steps

These links move the current task into a more complete workflow.

Real-world use cases

Copying a Figma color into CSS as oklch()
You pick a swatch in Figma, get a hex code like #7c3aed, and need it as oklch() for a CSS Color Level 4 stylesheet. Paste the hex here, read oklch(0.4457 0.2457 293.8) from the OKLCH row, and copy it straight into your :root block — no manual matrix math needed.
Building a Tailwind v4 design token file
Tailwind v4 lets you theme via CSS variables using oklch. You have a brand palette in hex and need to fill in --color-primary through --color-accent. For each swatch paste the hex, grab the CSS variable row (customising the variable name), and build your tokens.css in seconds instead of converting each colour by hand.
Checking whether a designer's oklch() value renders correctly
A designer sends oklch(0.72 0.15 200) in a spec doc. You paste it into the input, see the hex, RGB, and HSL equivalents alongside the preview swatch, and instantly verify it is indeed that teal-green shade before wiring it up in code.

Common pitfalls

Pasting oklch() with percentage lightness (oklch(72% 0.15 200)) instead of the 0–1 decimal form — the input accepts both but the output always uses the 0–1 form per the CSS Color Level 4 spec.
Setting the CSS variable name with spaces or invalid chars; use lowercase letters, digits, and hyphens only (e.g. color-brand-primary).
Expecting Tailwind arbitrary-value classes (bg-[#hex]) to override a global CSS variable you set elsewhere — they have equal specificity, so the one that appears later in the stylesheet wins.

Privacy

All color conversions run entirely in your browser — no color value you enter is ever sent to a server. The current color is encoded in the URL only when you share the link, so sensitive brand colors stay off the network by default.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role

CSS Color Format Converter — HEX, RGB, HSL, OKLCH, CSS Variable & Tailwind

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How CSS Color Format Converter fits into your work

Color jobs

Color checks

Good next steps

Real-world use cases

Copying a Figma color into CSS as oklch()

Building a Tailwind v4 design token file

Checking whether a designer's oklch() value renders correctly

Common pitfalls

Privacy

FAQ

Color Converter

CSS Gradient Generator

CSS Formatter & Minifier

PX REM EM Converter

CSS Border Radius Generator

CSS Box Shadow Generator

CSS Design Token Contrast Matrix

Classroom Color Wheel

CSS Clip-Path Generator

Color Blindness Simulator

Color Contrast Checker

Color Mixer