HEX-zu-OKLCH-Konverter

Was ist ein HEX-zu-OKLCH-Konverter?

// sRGB hex → OKLCH per W3C CSS Color 4 + Ottosson 2020
// References: https://www.w3.org/TR/css-color-4/#color-conversion-code
//             https://bottosson.github.io/posts/oklab/
// Worked example: #3b82f6 (Tailwind blue-500) → oklch(0.629 0.193 263.4)
function hexToOklch(hex) {
  const h = hex.trim().replace(/^#/, '');
  const srgb = [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16) / 255);
  // sRGB → linear-sRGB (CSS Color 4 §11.2 piecewise gamma)
  const lin = srgb.map(v => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
  const [lr, lg, lb] = lin;
  // linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
  const x = 0.4124564 * lr + 0.3575761 * lg + 0.1804375 * lb;
  const y = 0.2126729 * lr + 0.7151522 * lg + 0.0721750 * lb;
  const z = 0.0193339 * lr + 0.1191920 * lg + 0.9503041 * lb;
  // XYZ D65 → LMS (Ottosson 2020), cube-root, → OKLAB
  const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
  const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
  const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z);
  const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
  const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
  const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;
  // OKLAB → OKLCH (Cartesian to polar)
  const C = Math.sqrt(a * a + b * b);
  const H = (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
  return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`;
}
console.log(hexToOklch('#3b82f6')); // → oklch(0.629 0.193 263.4)

Kernfunktionen

Alternativen zum HEX-zu-OKLCH-Konverter

HEX-zu-OKLCH-Beispiele

#3b82f6

#FF5733

#FF1744

#0f172a

#3b82f6

Häufige HEX → OKLCH Konvertierungen (Tailwind v4)

Referenztabelle der 10 beliebtesten Mitteltönungen aus der Tailwind-v4-Standardpalette mit ihren HEX- und OKLCH-Entsprechungen. Die Werte entsprechen der von Tailwind v4 veröffentlichten Paletten-Präzision (drei Nachkommastellen bei L und C, ganzzahlig oder eine Nachkommastelle bei H).

So nutzen Sie den HEX-zu-OKLCH-Konverter

1. 1

   Einen HEX-Code in das HEX-Feld einfügen

   Legen Sie einen beliebigen HEX-Wert in die HEX-Eingabe — mit oder ohne führendes `#`, als 3-stellige Kurzform (`#F73`), 6-stellige Vollform (`#3b82f6`), 4-stellige Alpha-Kurzform (`#F738`) oder 8-stellige Alpha-Vollform (`#FF573380`). Der Parser normalisiert alle fünf Eingabeformen zur selben internen Farbe, bevor OKLCH abgeleitet wird. Groß-/Kleinschreibung ist egal (`#3b82f6` und `#3B82F6` werden identisch geparst). Ungültige Zeichen oder falsche Stellenzahlen erzeugen einen dezenten Inline-Fehler; gültiger HEX aktualisiert jedes andere Formatfeld in Echtzeit, einschließlich OKLCH.

2. 2

   Das OKLCH-Tripel aus dem OKLCH-Feld ablesen

   Das OKLCH-Feld zeigt den Wert in der modernen Form von CSS Color 4: `oklch(0.629 0.193 263.4)` für eine deckende Farbe, `oklch(0.629 0.193 263.4 / 0.5)` für eine mit Alpha. L wird auf drei Nachkommastellen gerundet (entspricht der von Tailwind v4 veröffentlichten Präzision), C auf drei Nachkommastellen, H auf eine Nachkommastelle in Grad. Die interne OKLCH-Source-of-Truth des Tools bedeutet, dass die zugrundeliegende Float-Präzision über jedes andere Feld erhalten bleibt — Rundläufe zurück nach HEX bleiben bit-stabil, anders als bei klassischen HSL-Pivot-Konvertern, die pro Rundlauf um ein bis zwei Grad driften.

3. 3

   Auf Kopieren klicken, um die OKLCH-Zeichenkette zu übernehmen

   Jede Formatkarte hat rechts einen Kopieren-Knopf. Ein Klick und der Wert landet in der Zwischenablage — die Beschriftung blinkt kurz „Kopiert!“, damit Sie es sehen. Die kopierte Zeichenkette folgt der kanonischen CSS-Color-4-Syntax (`oklch(0.629 0.193 263.4)`), bereit, in einen Tailwind-v4-`@theme`-Block oder eine shadcn/ui-CSS-Variablendefinition zu fallen. Für plattformspezifische Ausgabe (CSS Custom Property, Tailwind-v4-Token, SwiftUI, Compose, Flutter) nutzen Sie den Abschnitt Als Code kopieren unter dem Picker — diese Snippets geben das Format aus, das jede Plattform nativ erwartet.

4. 4

   Die Display-P3-/Rec2020-Farbraum-Badges prüfen

   Drei Farbraum-Badges (sRGB, Display P3, Rec2020) zeigen, ob die aktuelle Farbe innerhalb des reproduzierbaren Bereichs jedes Raumes liegt. Wird das sRGB-Badge rot, das P3-Badge aber grün, ist die Farbe ein Wide-Gamut-OKLCH, das auf Apple-Hardware (iPhone, iPad, MacBook ab 2017) gesättigt erscheint, auf einem klassischen 24-Bit-Monitor jedoch entsättigt wird. Der **An sRGB ausrichten**-Knopf nutzt binäre Chroma-Reduktion (informatives Verfahren aus CSS Color 4 §13), um die Farbe in den sRGB-Farbraum zu schrumpfen, während L und H erhalten bleiben, und liefert einen HEX-Fallback, den Sie über `@supports not (color: oklch(0 0 0))` ausliefern können.

5. 5

   Ebenfalls sichtbar: RGB, HSL, OKLAB, HSV, HWB, CMYK, benannte Farbe

   Derselbe HEX, den Sie einfügen, leuchtet auch in den anderen acht Formatfeldern auf — RGB für Canvas-Aufrufe und Hardware, HSL für klassische CSS-Variablen, OKLAB für Paletten-Mathematik und Farbsehschwäche-Matrizen, HSV und HWB für Designer-Farbwähler-Workflows, CMYK für Druckschätzungen und der nächstgelegene benannte CSS-Farbname für Dokumentations-Fließtext. Sie sind nie nur auf HEX → OKLCH festgelegt. Der Picker (SL-Quadrat + Farbton-Schieberegler + Alpha-Schieberegler) steuert alle neun simultan, und in Chromium-Browsern tastet der EyeDropper-Knopf jeden Bildschirmpixel ab, auch außerhalb des Browsers.

Häufige HEX-/OKLCH-Fehler

OKLCH C = 0,3 setzen in der Erwartung „30 % Sättigung“:
oklch(0.7 0.3 250) → kann sRGB für Blautöne überschreiten
Wide-Gamut-Farbe wird auf klassischen Displays entsättigt gerendert.

C als absolute Chroma behandeln, Farbraum-Badges prüfen:
oklch(0.7 0.15 250) → komfortabel in sRGB für dieses L+H-Paar
Die Badges nutzen, um das maximale C zu finden, das in den Zielfarbraum passt.

HSL-L-Prozente direkt in OKLCH kopieren:
hsl(220 50% 30%) als oklch(0.30 0.10 220) portiert
Die beiden Farben wirken sichtbar unterschiedlich in der Helligkeit.

OKLCH aus dem ursprünglichen HEX neu ableiten, HSL nicht portieren:
HEX-Quelle → OKLCH-Konvertierung → oklch(0.34 0.08 254)
Die perzeptuelle L bleibt korrekt; die Palette wirkt gleichmäßig.

oklch(0.7 0.4 30) ohne Prüfung des sRGB-Farbraums ausliefern:
P3-Displays rendern gesättigtes Rot; sRGB-Displays rendern entsättigt
Markenfarbe wirkt über Nutzerhardware hinweg inkonsistent.

sRGB-Farbraum-Badge prüfen, bei Bedarf an sRGB ausrichten, mit @supports schichten:
@supports (color: oklch(0 0 0)) { --primary: oklch(0.7 0.4 30); }
@supports not (color: oklch(0 0 0)) { --primary: #ef6b50; }
P3-Hardware erhält den Wide-Gamut-Wert; sRGB-Hardware erhält den ausgerichteten Fallback.

Markenfarbe nur in OKLCH definieren:
:root { --primary: oklch(0.629 0.193 263.4); }
IE 11 und altes iOS-Safari rendern überhaupt keine Farbe.

Mit @supports für eleganten Fallback schichten:
:root { --primary: #3b82f6; }
@supports (color: oklch(0 0 0)) { :root { --primary: oklch(0.629 0.193 263.4); } }
Moderne Browser erhalten OKLCH; klassische Browser erhalten den HEX-Fallback.

lch() durch oklch() ersetzen in der Erwartung des gleichen Ergebnisses:
lch(60% 50 240) ≠ oklch(0.6 0.15 240) — komplett unterschiedliche Farben
Über Räume hinweg kopiert, ist der Wert lautlos falsch.

Einen Raum wählen und darin bleiben:
oklch(0.629 0.193 263.4) für moderne Designsysteme
oder lch(60% 50 240) — aber Funktionsnamen nicht ohne Neukonvertierung tauschen

Wer nutzt HEX zu OKLCH

Frontend-Entwickler migrieren zu Tailwind-v4-OKLCH-Tokens

Tailwind v4 hat sich im Januar 2025 für seine Standardpalette auf OKLCH festgelegt. Eine v3-Codebasis mit HEX-basierten Markenfarben zu migrieren bedeutet, jeden HEX in OKLCH zu konvertieren und das Ergebnis in den neuen `@theme`-Block fallen zu lassen. Fügen Sie jeden HEX hier ein, kopieren Sie den `oklch()`-Wert, definieren Sie `--color-primary: oklch(0.629 0.193 263.4)` und Konsorten. Die Live-Farbraum-Badges markieren alle Farben, die sRGB überschreiten, sodass Sie entscheiden können, ob Sie den Wide-Gamut-Wert für Display-P3-Nutzer behalten oder an sRGB ausrichten.

shadcn/ui-Theme-Autoren bauen eigene Paletten

Das CSS-Variablen-Theme von shadcn/ui verwendet OKLCH für jedes Token (`--background`, `--foreground`, `--primary` usw.). Eigene Themes leiten sich von einem Basis-Marken-HEX ab, indem nach OKLCH konvertiert und dann L für die hellen/dunklen Varianten variiert wird. Marken-HEX einfügen, OKLCH-Tripel ablesen, den Rest des Themes durch Verschieben von L bei konstantem C und H aufbauen. Entspricht exakt dem kanonischen shadcn-Workflow.

Designsystem-Autoren erzeugen perzeptuell gleichmäßige Rampen

Erzeugen Sie eine Rampe 50/100/200/.../900, indem Sie den L-Kanal in gleichen OKLCH-Schritten verschieben, während Sie C und H konstant halten. Der visuelle Abstand zwischen benachbarten Stops wirkt über alle Farbtöne hinweg identisch — genau das, was eine Markenfarbenpalette wirklich braucht. Tailwind v4 nutzt exakt diese Konstruktion für seine Standardpalette, und shadcn/ui spiegelt sie. Jeden Marken-HEX einfügen, OKLCH ablesen, die Rampe algorithmisch oder über das Panel Helle Tönungen/Dunkle Tönungen/Töne unter dem Picker erzeugen.

Accessibility-Engineers verifizieren Kontrast im OKLCH-Raum

WCAG 2.1 und APCA bewerten beide gegen die aufgelöste sRGB-Farbe, nicht gegen das OKLCH-Tripel — aber die OKLCH-L einer Markenfarbe zu kennen, macht das Kontrast-Tuning vorhersehbar: L um 0,1 anheben, um AA gegen Weiß zu bestehen, L um 0,1 absenken, um AA gegen Schwarz zu bestehen. Die simultane OKLCH-+-WCAG-+-APCA-Ansicht macht die Beziehung sichtbar. Marken-HEX einfügen, die Kontrast-Badges beobachten, L in OKLCH justieren (vorhersehbarer als HSL), bis das Paar beide Metriken besteht.

Webentwickler bauen Wide-Gamut-Farb-Tokens für moderne Displays

Die meisten Apple-Geräte seit 2017 (und viele moderne Android-Geräte) rendern Display P3 nativ. Marken-Akzentfarben in OKLCH zu definieren, erlaubt es, P3-exklusive gesättigte Rot- und Grüntöne anzusprechen, die kein HEX-Code kodieren kann. Einen bestehenden HEX einfügen, um sein OKLCH abzulesen, dann den C-Kanal über die sRGB-Decke hinausschieben, um die zusätzliche P3-Sättigung zu beanspruchen. Die Farbraum-Badges bestätigen, dass der neue Wert in P3 passt (und auf sRGB-only-Bildschirmen über Browser-Chroma-Kompression elegant zurückfällt).

Dozenten erklären perzeptuelle vs. geometrische Helligkeit

Die simultane OKLCH-+-HSL-Ansicht macht den Unterschied zwischen perzeptueller und geometrischer Helligkeit offensichtlich. Fügen Sie ein gesättigtes Grün und ein gesättigtes Blau bei gleichem HSL-L=50 % ein; die OKLCH-L-Werte unterscheiden sich merklich, weil OKLCH die tatsächlich wahrgenommene Helligkeit misst. Ziehen Sie am HSL-Farbton-Schieberegler und beobachten Sie, wie OKLCH-L wandert, während Sie HSL-L konstant halten — die Kurve ist die Gamma-Eigenheit visualisiert. Eine kursfertige Demonstration, warum Designsysteme auf OKLCH migriert sind.

Open-Source-Maintainer modernisieren Token-Dokumentationen

Ältere Designsystem-Dokumentationen listen Markenfarben typischerweise nur als HEX-Codes auf. Die Modernisierung auf OKLCH bedeutet, dieselbe Farbe in beiden Räumen zu zeigen — den HEX für die Code-Block-Kompatibilität, das OKLCH für die Spezifikationstabelle und die moderne Token-Definition. Jeden HEX einfügen, die OKLCH-Ausgabe kopieren, die Dokumentation aktualisieren. Der teilbare URL-Hash erlaubt es Mitwirkenden außerdem, in einem GitHub-Issue eindeutig auf die genaue Farbe zu verlinken, um die es geht.

HEX-zu-OKLCH-Mathematik & Pipeline

HEX → OKLCH ist eine 7-Schritt-Pipeline

Die Konvertierung läuft durch fünf Zwischendarstellungen: HEX → ganzzahliges sRGB → normalisiertes sRGB (0–1) → lineares sRGB (gamma-dekodiert) → CIE XYZ D65 → OKLAB → OKLCH. Jeder Schritt ist eine wohldefinierte Matrix oder stückweise Funktion aus einer Primärquelle. Das Tool führt die vollständige Pipeline bei jedem Tastenanschlag aus; die Mathematik ist schnell genug (Mikrosekunden), dass kein Debouncing nötig ist. Das Anzeigen des Zwischen-RGB-Tupels neben OKLCH bedeutet, dass Sie einen unerwarteten OKLCH-Wert durch Inspizieren der RGB-Kanäle debuggen können.

CSS-Color-4-§11.2-Gammafunktion

Die sRGB-→-lineares-sRGB-Konvertierung nutzt die stückweise Funktion aus CSS Color 4 §11.2: `v ≤ 0.04045 ? v/12.92 : ((v + 0.055) / 1.055)^2.4`. Die stückweise Form (mit einem kleinen linearen Segment nahe null) vermeidet die numerische Instabilität der reinen Exponentenform bei sehr dunklen Farben. Es ist dieselbe Funktion, die ICC-Profile zum Kodieren von sRGB verwenden, und dieselbe Funktion, die Browser intern beim Rendern von HEX-Codes nutzen. Die Umkehrung für OKLCH → HEX wendet dieselbe Funktion rückwärts an: `v ≤ 0.0031308 ? v * 12.92 : 1.055 * v^(1/2.4) - 0.055`.

CSS-Color-4-§15.1-Matrix: lineares sRGB ↔ XYZ D65

Die Matrix aus CSS Color 4 §15.1 konvertiert lineares sRGB nach CIE XYZ unter dem D65-Weißpunkt: `X = 0.4124564 R + 0.3575761 G + 0.1804375 B`, `Y = 0.2126729 R + 0.7151522 G + 0.0721750 B`, `Z = 0.0193339 R + 0.1191920 G + 0.9503041 B`. Die Y-Zeile gibt die sRGB-Leuchtdichteformel. Es ist dieselbe Matrix, die in jeder Farbmanagement-Bibliothek verwendet wird, darunter ICC, Adobe Color Engine und die Open-Source-Pipeline LCMS. Die inverse Matrix für OKLCH → HEX wendet die §15.1-Inverse an.

Ottosson-2020-OKLAB-Matrizen und Kubikwurzel-Schritt

Die XYZ-D65-→-OKLAB-Konvertierung nutzt zwei Matrizen und einen Kubikwurzel-Schritt, die in Björn Ottossons OKLAB-Papier von 2020 veröffentlicht wurden. Die erste Matrix transformiert XYZ in einen LMS-Zapfenantwortraum (lose modelliert nach der Empfindlichkeit der menschlichen L-/M-/S-Zapfen). Jeder Kanal wird kubikwurzelt, um den Dynamikumfang nicht-linear zu komprimieren (der Schritt, der die perzeptuelle Uniformität korrigiert). Die zweite Matrix transformiert die kubikwurzelten LMS-Werte in die L-/a-/b-Koordinaten von OKLAB. Alle drei Operationen verwenden die exakten Werte, die in der Referenzimplementierung des Papiers veröffentlicht sind; keine Neuableitungen oder Rundungen. Die Umkehrung für OKLCH → HEX wendet diese Matrizen rückwärts an.

OKLAB ↔ OKLCH ist kartesisch nach polar

Die `a`- und `b`-Achsen von OKLAB bilden eine Chroma-Ebene senkrecht zur L-Achse. OKLCH kodiert diese Ebene polar: `C = sqrt(a² + b²)` (euklidischer Abstand zu Grau), `H = atan2(b, a) * 180 / π` (Winkel in Grad, in den Bereich 0–360° gewickelt). Die Umkehrung: `a = C * cos(H * π / 180)`, `b = C * sin(H * π / 180)`. Die polare Form wird gegenüber OKLAB für die Design-Token-Speicherung bevorzugt, weil Hue eine stabile Achse ist — das Drehen von Hue crossfaded nicht versehentlich durch Grau, wie es das Drehen von `a` oder `b` in OKLAB tun kann.

Farbraum-Erkennung über Kanal-Bereichsprüfung

Eine Farbe gilt als im Farbraum eines Zielraums (sRGB, Display P3, Rec2020), wenn jeder Kanal nach Konvertierung in die Primärfarben dieses Raumes innerhalb von `[-ε, 1 + ε]` liegt, wobei `ε = 1e-7` Float-Präzisionsrauschen rund um die Grenzen auffängt. Das Farbraum-Badge für jeden Raum wird rot, wenn ein Kanal den Bereich überschreitet. OKLCH ist farbraum-unbeschränkt — `oklch(0.7 0.4 30)` ist eine gültige Koordinate, kann aber den 256-Werte-pro-Kanal-Byte-Raum von sRGB überschreiten. Die Prüfung läuft bei jedem Tastenanschlag; in Kombination mit An sRGB ausrichten fängt das die häufigste Einführungs-Falle ab (Wide-Gamut-OKLCH, das auf klassischen Bildschirmen nicht korrekt angezeigt wird).

An-sRGB-ausrichten-binäre-Chroma-Reduktion

An sRGB ausrichten entspricht dem informativen Farbraum-Mapping-Algorithmus in CSS Color 4 §13: L und H bei den aktuellen Werten fixiert halten, mit binärer Suche in C ∈ [0, currentC] das größte C suchen, dessen sRGB-Konvertierung im Farbraum bleibt. Die Suche läuft höchstens 30 Iterationen (Präzision ~10⁻⁹), was für visuelle Genauigkeit mehr als genug ist. Das Erhalten von L und H bedeutet, dass die ausgerichtete Farbe sich als dieselbe Farbtonfamilie bei derselben Helligkeit liest — sie verliert nur Sättigung. Wir clippen RGB-Kanäle nicht direkt, weil das den Farbton merklich verzerrt (besonders bei Blautönen, die in Richtung Violett clippen).

Best Practices für HEX-/OKLCH-Workflows

OKLCH als kanonisches Token-Format in neuem Code verwenden

Für jedes Designsystem, das 2025 oder später ausgeliefert wird, definieren Sie Markenfarben und Paletten-Rampen in OKLCH. Die L-Achse liefert automatisch perzeptuell gleichmäßige Rampen; die Chroma-Achse kann Wide-Gamut-Farben adressieren, die HEX nicht kodieren kann. Behalten Sie einen HEX-Fallback für ältere Browser über `@supports not (color: oklch(0 0 0))` oder Build-Zeit-PostCSS, aber machen Sie OKLCH zur Source-of-Truth in Ihrem Token-Speicher. Tailwind v4 und shadcn/ui liefern beide so aus; neue Projekte können ihrem Beispiel ohne Reibung folgen.

Rampen erzeugen durch Verschieben von L bei konstantem C und H

Die kanonische OKLCH-Rampenkonstruktion: C und H fixieren, L in gleichen Schritten verschieben. Eine 9-stufige Rampe `oklch(L 0.15 263)` für L = 0,1, 0,2, …, 0,9 erzeugt visuell gleichmäßige Abstände über alle Schritte. Genau das tut Tailwind v4 intern. Verschieben Sie C nicht parallel zu L, es sei denn, Sie wollen, dass die chromatische Intensität der Rampe sich bewusst ändert (selten). Lassen Sie H nicht über die Schritte driften — schon eine 5°-Drift lässt die Rampe ungeordnet wirken.

Die Präzision von Tailwind v4 treffen: 3 Nachkommastellen bei L+C, 1 bei H

Die Standardpalette von Tailwind v4 veröffentlicht OKLCH-Werte mit drei Nachkommastellen bei L und C und einer Nachkommastelle bei H — `oklch(0.629 0.193 263.4)` für blue-500. Diese Präzision in eigenen Tokens zu treffen, bedeutet, dass Einfügen-in-die-Konfiguration-Workflows identische Werte zu denen erzeugen, die Tailwind ausliefert, und Diff-Tools keine vermeintlichen Unterschiede melden. Die Standardrundung des Tools folgt dieser Konvention; das Kopieren-Einfügen in einen `@theme`-Block ist bit-exakt.

Wide-Gamut-OKLCH durch die Display-P3-Farbraumprüfung schicken

Wenn Sie auf moderne Apple-Hardware abzielen (iPhone, iPad, MacBook ab 2017) oder HDR-fähige Inhalte ausliefern, erlauben die Farbraum-Badges, C über die sRGB-Decke hinauszuschieben, um die zusätzliche P3-Sättigung zu beanspruchen. Browser-gesteuerte Chroma-Kompression verhindert, dass die Farbe auf sRGB-only-Bildschirmen clippt. Richten Sie nicht standardmäßig vorab an sRGB aus, es sei denn, Sie wissen, dass Ihre gesamte Zielgruppe auf klassischen Displays sitzt — das verliert 30 %+ der Sättigung, die P3-Hardware rendern kann.

Einen HEX-Fallback über @supports für Vor-2023-Browser bereitstellen

Auch wenn die Evergreen-Browser-Unterstützung für `oklch()` inzwischen bei über 94 % liegt, braucht der lange Schwanz (IE 11, altes Android-Chrome, eingebettete Webviews) weiterhin einen Fallback. Wickeln Sie Tokens in `@supports (color: oklch(0 0 0))` und liefern Sie im alternativen Zweig eine HEX-Variante. Die Ausgabe von An sRGB ausrichten ist genau dieser Fallback — automatisch aus dem aktuellen OKLCH-Tripel erzeugt, wobei L und H erhalten bleiben. Build-Zeit-PostCSS-Plugins wie `postcss-oklab-function` können zur Übersetzungszeit auch die sRGB-Näherung einfügen.

Sowohl OKLCH als auch den Quell-HEX in Ihren Tokens dokumentieren

Wenn Sie eine CSS-Variable wie `--color-primary: oklch(0.629 0.193 263.4)` ausliefern, ergänzen Sie einen Kommentar mit dem Quell-HEX: `/* Quelle: #3b82f6 (Tailwind blue-500) */`. Wenn jemand sechs Monate später eine verwandte Tönung ableiten oder den Wert gegen ein Marken-Richtlinien-PDF prüfen muss, bewahrt der Quell-HEX die vollständige Provenienzspur. OKLCH allein ist aussagekräftig, aber schwerer auf den ersten Blick zu erkennen; der Quell-HEX ist die Kennung, nach der die meisten Teamkolleg:innen zuerst suchen werden.

Den URL-Hash nutzen, um Live-Farbentscheidungen zu teilen

Jede Farbänderung aktualisiert den URL-Hash automatisch als `#hex=3b82f6` oder `#oklch=...`. Kopieren Sie die URL in einen Slack-Thread oder ein GitHub-Issue und wer sie öffnet, landet bei derselben Farbe mit demselben OKLCH-Tripel. Das ist zuverlässiger, als eine OKLCH-Zeichenkette in den Chat zu kopieren — Empfänger vertippen sich manchmal bei den Nachkommastellen oder kopieren die falsche Präzision — und erlaubt einem Design-Review-Thread, sich auf eine exakte Farbe zu beziehen statt auf „das Markenblau, das wir am Dienstag besprochen haben“. Der Hash wird niemals an den Server übertragen.

Häufig gestellte Fragen