OKLCH to CSS string
Lightness 0.7, chroma 0.15 and hue 180 become oklch(0.7000 0.1500 180.00), or oklch(70.0000% 0.1500 180.00) if you prefer percentages. Every token and stylesheet gets the same spelling with the same decimals. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- L
- 0.7
- C
- 0.15
- H
- 180
- L rounded
- 0.7
- C rounded
- 0.15
- H rounded
- 180
- L decimals
- 4
OKLCH is the perceptual color space behind modern CSS Color Module Level 4, letting designers set lightness, chroma, and hue independently while browsers gamut-map out-of-range values. Design systems, token pipelines, and documentation generators need a deterministic way to turn numeric OKLCH components into a paste-ready oklch() function string that validates the same way in every environment. This capability accepts lightness in the unit interval, non-negative chroma, hue in degrees, and an optional alpha channel, then rounds each component to fixed decimal places and emits both a unit-lightness form and a percentage-lightness form of the CSS function.
What OKLCH is and why a CSS oklch() string matters
OKLCH separates color into three perceptually meaningful axes: L for lightness from black to white on a roughly uniform scale, C for chroma (how colorful the sample is, with zero meaning fully achromatic), and H for hue angle in degrees around the color wheel. Unlike legacy HSL, equal steps in OKLCH lightness tend to look more even to human eyes, which is why design systems migrating off hex and HSL often store brand ramps in OKLCH first.
CSS Color Module Level 4 exposes that space directly with the oklch() function, so a stylesheet can declare oklch(0.72 0.14 250) or the equivalent percentage form oklch(72% 0.14 250) without an intermediate sRGB conversion that would clip gamut early. Optional opacity uses the modern slash syntax oklch(L C H / A), matching other CSS color functions.
What to enter and how values are rounded
Optional alpha in zero to one enables slash opacity in the emitted string. Example: l equals 0.7, c equals 0.15, h equals 180 yields oklch(0.7000 0.1500 180.00) and oklch(70.0000% 0.1500 180.00). With alpha 0.5 the slash form appears: oklch(0.7000 0.1500 180.00 / 0.5000).
Hue is not wrapped into zero through three hundred sixty so that intentional multi-turn or negative angles survive into CSS, which accepts any angle type. Pair this formatter with a separate converter if you need hex or sRGB; this capability only validates and serializes OKLCH for CSS.
Where an OKLCH-to-CSS formatter earns its keep
Design-token repositories and style-dictionary pipelines convert structured color objects into CSS custom properties; a shared formatter keeps every package and monorepo package on the same oklch() grammar instead of ad-hoc string templates. Component libraries and Storybook docs can show live swatches driven by numeric L, C, and H controls while copying the exact css field into snippets. Accessibility and theming tools that generate light and dark ramps in OKLCH need a final step that never invents illegal CSS.
Failed validation does not consume balance.
What you can do with it
Storybook and component docs
Drive L, C, H knobs in a live demo and copy the exact css field into code snippets that match what production stylesheets will use.
Theme and ramp generators
After computing OKLCH steps for light and dark modes, format each stop as valid CSS Color Level 4 oklch() with optional slash alpha for translucent surfaces.
FAQ
How do I format OKLCH as a CSS oklch() string?
Send finite numbers l in [0,1], c ≥ 0, and h in degrees. Optional alpha adds slash opacity.
What ranges are valid for L, C, H, and alpha?
Lightness must be in [0, 1], chroma must be non-negative, hue any finite degree angle, and alpha (if sent) in [0, 1].
How is rounding controlled?
Defaults are four decimals for L and C and two for H. Printed tokens always use that exact width for stable goldens.
Does the tool convert OKLCH to hex or RGB?
No. It only validates and formats OKLCH into modern CSS oklch() strings. Use a separate color-conversion capability if you need sRGB channels or hex.
How do I add transparency to an oklch() color?
Add an opacity value from 0 to 1 and it is written after a slash. With lightness 0.7, chroma 0.15, hue 180 and opacity 0.5 you get oklch(0.7000 0.1500 180.00 / 0.5000).
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.
Call it from your stack
curl -X POST https://api.kit.forhosting.com/color/oklch-to-css \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"l":0.7,"c":0.15,"h":180}'const res = await fetch("https://api.kit.forhosting.com/color/oklch-to-css", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"l": 0.7,
"c": 0.15,
"h": 180
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/oklch-to-css",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"l": 0.7,
"c": 0.15,
"h": 180
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/oklch-to-css", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"l":0.7,"c":0.15,"h":180}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"l":0.7,"c":0.15,"h":180}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/oklch-to-css", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"l": 0.7,
"c": 0.15,
"h": 180
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.oklch_to_css",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
Invalid ranges fail with invalid_input instead of producing silent nonsense.
What OKLCH is and why a CSS oklch() string matters
Tooling that builds tokens, theme JSON, or generated CSS must therefore produce a byte-stable string: the same L, C, and H always yield the same decimals, spacing, and parentheses. This endpoint standardizes that contract: validate ranges, round with fixed precision, and return both the unit-L and percentage-L CSS forms so consumers can pick the house style without reimplementing formatting rules.
Input contract, rounding rules, and response shape
POST a JSON body with required finite numbers l (lightness in closed interval zero to one), c (chroma greater than or equal to zero), and h (hue in degrees, any finite angle). Optional integers l_decimals, c_decimals, and h_decimals (each zero through ten) override the defaults of four, four, and two decimal places respectively; alpha always prints to four places when present. Each field may arrive as a JSON number or as a numeric string; missing fields, non-finite values, booleans, and out-of-range L or alpha fail with invalid_input naming the field, and negative chroma is rejected the same way. Those validation failures are not billed. On success the body echoes the raw components, the rounded numeric components, the decimal budgets used, has_alpha, a css field with the unit-lightness oklch() string, a css_percent field with L written as a percentage of the same precision, plus method, formula, and message strings for UI copy.
Where an OKLCH-to-CSS formatter earns its keep
Keep requests small, pin the css and css_percent strings in tests, and you get reproducible modern CSS color literals for design systems, edge workers, and documentation generators without standing up a full color-science library for a formatting job.
Integration use cases
Design-token and CSS variable pipelines
Serialize OKLCH brand ramps into stable oklch() custom properties for style-dictionary, Theo, or hand-rolled theme JSON without floating-point string drift across CI machines.
Technical questions
What does the OKLCH to CSS string tool cost?
The browser tool is free. API requests use prepaid KIT balance at $0.002 per successful call; invalid input is not billed.