Elysia Tools

Durchsuche Tools, Beispiele, visuelle Erklärungen und Themenguides an einem klaren Ort.

Beliebte Kategorien

Themen

Sprache
ZHESPTRUFRDEEN

Elysia Tools

Mobile Navigation

Design

OKLCH-Farbkonverter

· Zuletzt aktualisiert：2026-06-18

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

Einzelheiten

Wobei dieses Tool hilft

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().

Ausführung

Dieses Tool ausführen

Fülle das Formular aus, starte das Tool und prüfe das Ergebnis an einem Ort.

Beispiele

Beispiele zu diesem Tool

Verwandt

Mit verwandten Tools und Themen fortfahren

Verfasst vom Elysia Tools Team
Mathematik502
Farbe214
HTML/CSS86
Hue55
Farbraum53
RGB50
CSS48
HEX40
Lightness34
HSL26
sRGB22
Chroma21

Leitfaden zur Tool-Nutzung

Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.

Wichtige Fakten

Kategorie
Design
Eingabetypen
text, select, number
Ausgabetyp
html
Sample-Abdeckung
4
API bereit
Ja

Überblick

Der OKLCH-Farbkonverter ermöglicht die präzise, bidirektionale Umrechnung von Farbwerten zwischen HEX, RGB, HSL, OKLCH und Display-P3 basierend auf den CSS Color 4 Spezifikationen. Das Tool analysiert die Farbräume sRGB sowie Display-P3 und bietet automatische Gamut-Prüfungen sowie mathematisch optimierte Vorschläge zur Chroma-Reduktion für Farben außerhalb des Standard-Farbraums.

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.

So funktioniert es

  1. 1Geben 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.
  2. 2Wählen Sie optional das Eingabeformat und den gewünschten Referenz-Gamut für die Farbbeschneidung (sRGB oder Display-P3) aus.
  3. 3Das Tool berechnet in Echtzeit die entsprechenden Werte für alle unterstützten Farbräume wie XYZ D65, OKLab und lineares sRGB.
  4. 4Falls 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.

Beispiele

1. Markenblau in OKLCH konvertieren und Gamut prüfen

UI/UX Designer

Hintergrund

Ein Designer möchte das bestehende Markenblau (#3b82f6) in das moderne OKLCH-Format überführen, um es in einem neuen CSS-Designsystem zu nutzen.

Aufgabe

Der genaue OKLCH-Wert muss ermittelt und geprüft werden, ob die Farbe im Standard-sRGB-Gamut liegt.

Verwendung

Geben Sie '#3b82f6' in das Farbeingabefeld ein und belassen Sie das Eingabeformat auf 'Auto'.

colorInput: '#3b82f6', inputFormat: 'auto', clipMode: 'auto'

Ergebnis

Das Tool liefert den exakten OKLCH-Wert oklch(0.62 0.19 256) und bestätigt, dass die Farbe innerhalb des sRGB-Gamuts liegt.

2. P3-Farbe für sRGB-Bildschirme anpassen

Frontend-Entwickler

Hintergrund

Ein Entwickler hat eine leuchtende P3-Farbe vorliegen, die auf Standard-Monitoren ohne Farbverfälschung dargestellt werden soll.

Aufgabe

Die Farbe liegt außerhalb des sRGB-Gamuts und muss farbgetreu beschnitten werden.

Verwendung

Geben Sie die P3-Farbe ein und wählen Sie als Referenz-Gamut 'sRGB (beschneiden)' aus.

FAQ

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.

Start
Werkzeuge3197
Beispiele593
Visualisierungen461
Dateibetrachter103
Themen229
Schlagwörter333
Bilder, Audio & Video655

Werkzeuge für Bild-, Audio- und Videobearbeitung, Konvertierung und Optimierung

Mathe, Datum & Finanzen644

Rechner, Zahlenwerkzeuge, Datumslogik, Statistik und Finanztools

Design & Farbe296

Werkzeuge für Farben, Layouts, Grafiken, visuelle Gestaltung und Designhilfen

Text & Schreiben209

Werkzeuge für Schreiben, Bereinigung, Formatierung, Extraktion und Textanalyse

Entwicklung & Web193

Entwicklerwerkzeuge, Netzwerk-Utilities, Web-Debugging und Automatisierungshelfer

Konvertierung & Kodierung175

Werkzeuge für Format-, Datei-, Archiv-, Einheiten- und Kodierungskonvertierung

UI-Screenshot strukturieren, prüfen und an die Entwicklung übergeben
Klavierskizze erstellen, MIDI prüfen und Hördemo übergeben
Retro-Spieltexturen prüfen und Ressourcen übergeben
Screenshot-Anleitungen prüfen und Schulungsunterlagen übergeben
Responsive Seitenänderungen prüfen und Bildnachweise übergeben

© 2026 Elysia Tools. Alle Rechte vorbehalten.

DokumentationTarifeÜber unsNutzungsbedingungenDatenschutzerklärungCookiesKontakt
Validierung

Farbcode-Beispiele

Sammlung von Farbcodes in verschiedenen Formaten (Hex, RGB, HSL, benannte Farben) für Validierungstests

Python

Web Python Bildverarbeitung Beispiele

Web Python Bildverarbeitungsbeispiele mit PIL/Pillow einschließlich Lesen, Speichern, Skalieren und Formatkonvertierung

Java

Android Java Bildverarbeitungsbeispiele

Android Java Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung

Kotlin

Android Kotlin Bildverarbeitungsbeispiele

Android Kotlin Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung

Design

Farbraumkonverter

Konvertiert Farben zwischen HEX, RGB, HSL, CIELAB und Display-P3 mit CSS-Ausgabe und Gamut-Pruefung.

Design

CMYK-Farbkonverter

Konvertiert Farben zwischen HEX, RGB, HSL und CMYK.

Design

Bild-Farbpaletten-Extraktor

Laedt ein Bild hoch, extrahiert dominante Farben und exportiert codefertige Tokens mit Kontrastpruefung

Design

Geteiltes Komplementär-Farbwerkzeug

Harmonischen Kontrast mit geteilten komplementären Farbschemata unter Verwendung einer Grundfarbe und zwei benachbarten Farben zu ihrem Komplement erstellen

colorInput: 'color(display-p3 0 0.9 0)', clipMode: 'srgb'

Ergebnis

Das Tool berechnet den nächstgelegenen sRGB-konformen Farbwert durch Reduzierung des Chroma-Werts, sodass die Farbe auf allen Displays konsistent aussieht.