OKLCH zu CSS-String
Helligkeit 0.7, Chroma 0.15 und Farbton 180 ergeben oklch(0.7000 0.1500 180.00) oder, wenn Sie Prozent bevorzugen, oklch(70.0000% 0.1500 180.00). So sind alle Tokens und Stylesheets gleich geschrieben, mit denselben Nachkommastellen. Gratis in Ihrem Browser.
- Kostenlos
- Läuft in Ihrem Browser
- Ohne Anmeldung
- Ihre Daten bleiben auf Ihrem Gerät
Im Browser ausführen – kostenlos
Rechenbeispiel
- L
- 0,7
- C
- 0,15
- H
- 180
- L gerundet
- 0,7
- C gerundet
- 0,15
- H gerundet
- 180
- Dezimalstellen von L
- 4
OKLCH ist der wahrnehmungsorientierte Farbraum hinter dem modernen CSS Color Module Level 4: Gestalter setzen Helligkeit, Chroma und Farbton unabhängig, während der Browser Werte außerhalb des Gamuts mappt. Designsysteme, Token-Pipelines und Dokumentationsgeneratoren brauchen einen deterministischen Weg, numerische OKLCH-Komponenten in eine einfügefertige oklch()-Funktionszeichenkette zu verwandeln, die in jeder Umgebung gleich validiert. Diese Fähigkeit akzeptiert Helligkeit im Einheitsintervall, nichtnegatives Chroma, Farbton in Grad und optionalen Alphakanal; sie rundet jede Komponente auf feste Dezimalstellen und gibt sowohl die Form mit Einheitshelligkeit als auch die Form mit prozentualer Helligkeit der CSS-Funktion aus.
Was OKLCH ist und warum Designer es nutzen
OKLCH beschreibt eine Farbe mit drei verständlichen Größen: Helligkeit von Schwarz bis Weiß, Chroma als Maß dafür, wie bunt die Farbe ist, wobei null ein reines Grau bedeutet, und Farbton als Winkel auf dem Farbkreis. Anders als bei HSL wirken gleich große Helligkeitsschritte für das Auge gleichmäßiger. Deshalb speichern viele Designsysteme ihre Markenreihen inzwischen in OKLCH, und moderne Browser verstehen die Schreibweise oklch() direkt, ohne Umweg über Hex.
So entsteht die Schreibweise und typische Fehler
Das Werkzeug prüft zuerst die Werte: Helligkeit zwischen 0 und 1, Chroma nicht negativ, Farbton als beliebiger Winkel in Grad. Dann rundet es mit festen Nachkommastellen, standardmäßig vier für Helligkeit und Chroma und zwei für den Farbton, und schreibt die Farbe einmal mit Dezimal- und einmal mit Prozenthelligkeit. Häufige Fehler sind Helligkeit in Prozent statt als Wert bis 1 einzugeben oder zu erwarten, dass hier ein Hexcode entsteht; dafür ist ein eigener Umrechner da.
Was OKLCH ist und warum eine CSS-oklch()-Zeichenkette zählt
OKLCH trennt Farbe in drei wahrnehmungsrelevante Achsen: L für die Helligkeit von Schwarz zu Weiß auf einer annähernd gleichmäßigen Skala, C für Chroma (wie bunt die Probe ist; null bedeutet vollständig achromatisch) und H für den Farbtonwinkel in Grad um das Farbrad. Anders als bei veraltetem HSL wirken gleiche Helligkeitsschritte in OKLCH dem menschlichen Auge oft gleichmäßiger; deshalb speichern Designsysteme, die von Hex und HSL weg migrieren, Markenrampen oft zuerst in OKLCH.
Das CSS Color Module Level 4 stellt diesen Raum direkt mit der Funktion oklch() bereit, sodass ein Stylesheet oklch(0.72 0.14 250) oder die äquivalente Prozentform oklch(72% 0.14 250) deklarieren kann, ohne eine sRGB-Zwischenkonversion, die den Gamut zu früh beschneiden würde. Optionale Decität nutzt die moderne Slash-Syntax oklch(L C H / A), abgestimmt auf andere CSS-Farbfunktionen.
Eingabevertrag, Rundungsregeln und Antwortform
Optionales Alpha zwischen null und eins aktiviert Slash-Deckkraft in der ausgegebenen Zeichenkette. Beispiel: l gleich 0.7, c gleich 0.15, h gleich 180 ergibt oklch(0.7000 0.1500 180.00) und oklch(70.0000% 0.1500 180.00). Mit Alpha 0.5 erscheint die Slash-Form: oklch(0.7000 0.1500 180.00 / 0.5000).
Der Farbton wird nicht in den Bereich null bis dreihundertsechzig gewickelt, damit beabsichtigte Mehrfachumdrehungen oder negative Winkel in CSS überleben, das jeden Winkeltyp akzeptiert. Kombinieren Sie diesen Formatierer mit einem separaten Konverter, wenn Sie Hex oder sRGB brauchen; diese Fähigkeit validiert und serialisiert OKLCH nur für CSS.
Wo ein OKLCH-zu-CSS-Formatierer echten Nutzen stiftet
Design-Token-Repositories und style-dictionary-Pipelines wandeln strukturierte Farbobjekte in CSS-Custom-Properties um; ein gemeinsamer Formatierer hält jedes Paket im Monorepo bei derselben oklch()-Grammatik statt ad-hoc-Vorlagen. Komponentenbibliotheken und Storybook-Docs können Live-Swatches mit numerischen L-, C- und H-Steuerungen zeigen und das exakte css-Feld in Snippets kopieren. Barrierefreiheits- und Theming-Werkzeuge, die helle und dunkle Rampen in OKLCH erzeugen, brauchen einen letzten Schritt, der niemals illegales CSS erfindet.
Fehlgeschlagene Validierung wird nicht berechnet.
Anwendungsfälle
Storybook- und Komponenten-Dokumentation
Steuern Sie L-, C- und H-Regler in einer Live-Demo und kopieren Sie das exakte css-Feld in Code-Snippets, die zu Produktions-Stylesheets passen.
Theme- und Rampen-Generatoren
Nach Berechnung der OKLCH-Schritte für Hell- und Dunkelmodus formatieren Sie jeden Stopp als gültiges CSS-Color-Level-4-oklch() mit optionalem Slash-Alpha für transluzente Flächen.
Häufige Fragen
Wie formatiere ich OKLCH als CSS-oklch()-Zeichenkette?
Senden Sie endliche Zahlen l in [0,1], c ≥ 0 und h in Grad. Optionales Alpha ergänzt Slash-Deckkraft.
Welche Bereiche gelten für L, C, H und Alpha?
Helligkeit muss in [0, 1] liegen, Chroma nichtnegativ, Farbton jeder endliche Gradwinkel und Alpha (falls gesendet) in [0, 1].
Wie wird die Rundung gesteuert?
Standard sind vier Dezimalstellen für L und C sowie zwei für H. Gedruckte Tokens nutzen stets diese exakte Breite für stabile Goldens.
Wandelt das Werkzeug OKLCH in Hex oder RGB um?
Nein. Es validiert und formatiert OKLCH nur zu modernen CSS-oklch()-Zeichenketten. Nutzen Sie eine separate Farbumwandlungs-Fähigkeit, wenn Sie sRGB-Kanäle oder Hex brauchen.
Wie füge ich einer oklch()-Farbe Transparenz hinzu?
Geben Sie eine Deckkraft zwischen 0 und 1 an; sie wird nach einem Schrägstrich geschrieben. Mit Helligkeit 0.7, Chroma 0.15, Farbton 180 und Deckkraft 0.5 erhalten Sie oklch(0.7000 0.1500 180.00 / 0.5000).
Verwandte Tools
Für Entwickler — API-Zugang
Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.
Endpunkt
Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.
Aufruf aus Ihrem 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)Beispiel-Anfrage
{
"l": 0.7,
"c": 0.15,
"h": 180
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.oklch_to_css",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.
Preis
Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.
Fehler
| HTTP | Code | Bedeutung |
|---|---|---|
401 | unauthorized | Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer). |
402 | insufficient_balance | Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht. |
404 | unknown_type | Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog. |
429 | rate_limited | Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt. |
Technische Hinweise
Ungültige Bereiche scheitern mit invalid_input statt stiller Unsinnsausgabe.
Was OKLCH ist und warum eine CSS-oklch()-Zeichenkette zählt
Werkzeuge, die Tokens, Theme-JSON oder generiertes CSS bauen, müssen daher eine byte-stabile Zeichenkette erzeugen: dieselben L, C und H liefern immer dieselben Dezimalen, Abstände und Klammern.
Eingabevertrag, Rundungsregeln und Antwortform
Senden Sie einen JSON-Körper mit den erforderlichen endlichen Zahlen l (Helligkeit im geschlossenen Intervall von null bis eins), c (Chroma größer oder gleich null) und h (Farbton in Grad, jeder endliche Winkel). Optionale Ganzzahlen l_decimals, c_decimals und h_decimals (jeweils null bis zehn) überschreiben die Standardwerte von vier, vier und zwei Dezimalstellen; Alpha wird, falls vorhanden, stets mit vier Stellen gedruckt. Jedes Feld darf als JSON-Zahl oder als numerische Zeichenkette ankommen; fehlende Felder, nicht-endliche Werte, Booleans sowie L oder Alpha außerhalb des Bereichs scheitern mit invalid_input und Feldnamen, und negatives Chroma wird ebenso abgelehnt. Diese Validierungsfehler werden nicht berechnet. Bei Erfolg spiegelt der Körper die Rohkomponenten, die gerundeten Komponenten, die genutzten Dezimalbudgets, has_alpha, ein css-Feld mit der oklch()-Zeichenkette bei Einheitshelligkeit, ein css_percent-Feld mit L als Prozent gleicher Präzision sowie method-, formula- und message-Zeichenketten für die Oberfläche.
Wo ein OKLCH-zu-CSS-Formatierer echten Nutzen stiftet
Weil die Implementierung reines Parse-Tier-A ist, kostet jeder erfolgreiche Aufruf den veröffentlichten Basispreis $0.002 ohne Modell-Tokens und ohne ausgehendes Netz. Halten Sie Anfragen klein, pinnen Sie css und css_percent in Tests, und Sie erhalten reproduzierbare moderne CSS-Farbliterale für Designsysteme, Edge-Worker und Dokumentationsgeneratoren, ohne eine volle Farblabor-Bibliothek nur zum Formatieren aufzusetzen.
Integrationsbeispiele
Design-Token- und CSS-Variablen-Pipelines
Serialisieren Sie OKLCH-Markenrampen in stabile oklch()-Custom-Properties für style-dictionary, Theo oder eigenes Theme-JSON ohne Gleitkomma-Stringdrift zwischen CI-Maschinen.
Technische Fragen
Was kostet das OKLCH-zu-CSS-String-Werkzeug?
Das Browser-Werkzeug ist kostenlos. API-Anfragen nutzen vorab bezahltes KIT-Guthaben zu $0.002 pro erfolgreichem Aufruf; ungültige Eingabe wird nicht berechnet.