# OKLCH-Farbkonverter Bidirektionale Umrechnung zwischen HEX, RGB, HSL, OKLCH und Display-P3 nach CSS Color 4, mit Helligkeit-/Chroma-/Farbton-Werten, sRGB- und Display-P3-Gamut-Prüfung und Vorschlag zum Beschneiden außerhalb des Gamuts > Kanonische Seite: https://elysiatools.com/de/tools/oklch-color-converter - **Kategorie:** Design - **Schlagwörter:** oklch, farbraum, p3, gamut, konvertieren ## Überblick Füge eine beliebige Farbe ein (HEX, rgb(), hsl() oder oklch()) oder setze OKLCH L/C/H direkt. Das Tool rechnet zwischen allen modernen Farbräumen nach den CSS-Color-4-Matrizen um und liefert: - HEX, sRGB 8-bit, lineares sRGB, HSL, XYZ D65, OKLab und OKLCH-Werte - Display-P3-Darstellung - Ob die Farbe innerhalb von sRGB liegt, innerhalb von Display-P3 aber außerhalb von sRGB, oder außerhalb beider - Einen Vorschlag zur Chroma-Reduktion (der nächstgelegene im-Gamut OKLCH), wenn die Farbe außerhalb von sRGB liegt Warum OKLCH: Sein L-Kanal entspricht der wahrgenommenen Helligkeit und C/h sind Chroma und Farbton, sodass das Ändern von Helligkeit oder Sättigung den Farbton nicht verschiebt (anders als bei HSL). Damit ist OKLCH der beste Raum für wahrnehmungsgerechte Paletten. Die Ausgaben sind kopierfertiges CSS, einschließlich `color(display-p3 ...)` und `oklch()`. ## Eingaben - **Farbeingabe** (text): #3b82f6 · rgb(59 130 246) · hsl(217 91% 60%) · oklch(0.62 0.19 256) - **Eingabeformat** (select) - **Helligkeit L (%)** (number): 0–100 (OKLCH 0–1) - **Chroma C** (number): e.g. 0.19 (typically 0–0.4) - **Farbton H (°)** (number): 0–360 - **Referenz-Gamut** (select) ## Wann verwenden - Wenn moderne Web-Farben für CSS Color 4 in das wahrnehmungsbasierte OKLCH-Format oder Display-P3 konvertiert werden müssen. - Wenn überprüft werden soll, ob eine Wide-Gamut-Farbe (P3) innerhalb des Standard-sRGB-Farbraums darstellbar ist. - Wenn Farbpaletten mit konsistenter wahrgenommener Helligkeit erstellt werden sollen, ohne dass sich beim Ändern der Sättigung der Farbton verschiebt. ## Funktionsweise - Geben Sie eine Farbe als HEX, rgb(), hsl() oder oklch() in das Eingabefeld ein oder steuern Sie die Regler für Helligkeit (L), Chroma (C) und Farbton (H) direkt an. - Wählen Sie optional das Eingabeformat und den gewünschten Referenz-Gamut für die Farbbeschneidung (sRGB oder Display-P3) aus. - Das Tool berechnet in Echtzeit die entsprechenden Werte für alle unterstützten Farbräume wie XYZ D65, OKLab und lineares sRGB. - Falls die Farbe außerhalb des sRGB-Gamuts liegt, wird automatisch ein optimierter Vorschlag zur Chroma-Reduktion generiert, um die Farbe sicher im Ziel-Farbraum darzustellen. ## Anwendungsfälle - Konvertierung von klassischen HEX- oder RGB-Werten in moderne CSS-konforme OKLCH-Deklarationen für Webprojekte. - Überprüfung von Wide-Gamut-Farben auf sRGB-Kompatibilität zur Vermeidung von Darstellungsfehlern auf älteren Bildschirmen. - Erstellung barrierefreier Farbpaletten durch gezielte Anpassung der wahrgenommenen Helligkeit (L) im OKLCH-Farbraum. ## Häufig gestellte Fragen ### Was ist der Vorteil von OKLCH gegenüber HSL? OKLCH basiert auf der menschlichen Farbwahrnehmung. Die Helligkeit (L) bleibt konstant, wenn man Chroma (C) oder Farbton (H) ändert, was bei HSL zu unerwünschten Farbtonverschiebungen führt. ### Was passiert, wenn eine Farbe außerhalb des sRGB-Gamuts liegt? Das Tool zeigt eine Warnung an und berechnet über eine Chroma-Reduktion den nächstgelegenen Farbwert, der innerhalb des sRGB-Farbraums darstellbar ist. ### Unterstützt der Konverter CSS Color Level 4? Ja, alle Umrechnungen und Ausgaben wie oklch() und color(display-p3 ...) entsprechen den offiziellen CSS Color 4 Spezifikationen. ### Kann ich die L-, C- und H-Werte auch einzeln anpassen? Ja, Sie können die Werte für Helligkeit (L), Chroma (C) und Farbton (H) über die numerischen Eingabefelder präzise einstellen. ### Welche Farbräume werden ausgegeben? Das Tool gibt HEX, sRGB 8-bit, lineares sRGB, HSL, XYZ D65, OKLab, OKLCH und Display-P3 aus. ## Ähnliche Tools - [Farbraumkonverter](https://elysiatools.com/de/tools/color-space-converter): Konvertiert Farben zwischen HEX, RGB, HSL, CIELAB und Display-P3 mit CSS-Ausgabe und Gamut-Pruefung. - [CMYK-Farbkonverter](https://elysiatools.com/de/tools/cmyk-converter): Konvertiert Farben zwischen HEX, RGB, HSL und CMYK. - [Bild-Farbpaletten-Extraktor](https://elysiatools.com/de/tools/image-color-palette-extractor): Laedt ein Bild hoch, extrahiert dominante Farben und exportiert codefertige Tokens mit Kontrastpruefung - [Geteiltes Komplementär-Farbwerkzeug](https://elysiatools.com/de/tools/color-split-complement): Harmonischen Kontrast mit geteilten komplementären Farbschemata unter Verwendung einer Grundfarbe und zwei benachbarten Farben zu ihrem Komplement erstellen - [CSS-Farbnamen-Resolver](https://elysiatools.com/de/tools/css-color-name-resolver): Löst jede Hex-Farbe zur nächstgelegenen benannten CSS-Farbe mit echter CIEDE2000-Distanz auf und zeigt die ganze Farbfamilie. - [CSS-Easing- und Animations-Visualisierer](https://elysiatools.com/de/tools/css-easing-visualizer): Visualisiert eine CSS-cubic-bezier-Easing-Kurve, zeigt Vorschau auf Position/Deckkraft/Skalierung, wählt Presets und exportiert CSS - [Tailwind-Farbpaletten-Sync](https://elysiatools.com/de/tools/tailwind-color-palette-sync): Gib HEX ein, wähle Namensschema (Skala 50–950 / Einzelname / Verschachtelung) und generiere das theme.extend.colors-Fragment für tailwind.config.ts mit WCAG AA/AAA-Leveln. Dark Mode optional. - [Absorbanz↔Transmission-Konverter (A = −log₁₀T)](https://elysiatools.com/de/tools/absorbance-transmittance-converter): Rechnet in beide Richtungen zwischen Absorbanz und Transmission um: A = −log₁₀(T), T = 10⁻ᴬ, %T = 100·T und A = 2 − log₁₀(%T). Akzeptiert Absorbanz A, Prozent-Transmission %T oder Bruchteil-Transmission T und liefert alle drei Darstellungen gleichzeitig. Richtwerte: A=0 → %T=100; A=1 → %T=10; A=0,301 → %T=50. Negative Absorbanz hieße %T > 100 %, in der Standard-Spektrophotometrie unmöglich, und wird abgelehnt. ## Beispiele - [Farbcode-Beispiele](https://elysiatools.com/de/samples/color-code): Sammlung von Farbcodes in verschiedenen Formaten (Hex, RGB, HSL, benannte Farben) für Validierungstests - [Web Python Bildverarbeitung Beispiele](https://elysiatools.com/de/samples/web-image-processing-python): Web Python Bildverarbeitungsbeispiele mit PIL/Pillow einschließlich Lesen, Speichern, Skalieren und Formatkonvertierung - [Android Java Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/android-image-processing-java): Android Java Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung - [Android Kotlin Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/android-image-processing-kotlin): Android Kotlin Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung