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.

Elysia Tools

Mobile Navigation

Design

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

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.

Vorbereitete Beispielausführungen

Klicken Sie auf ein Beispiel, um das Formular automatisch auszufüllen. Dateien müssen weiterhin hochgeladen werden.

1 Beispiele

Ein Markenblau in OKLCH umwandeln und Gamut prüfen

Zeigt HEX/RGB/HSL/OKLCH/Display-P3 mit Gamut-Diagnose.

<div>Color converter with OKLCH, P3, and gamut diagnostics.</div>

Eingaben

Fülle die erforderlichen Felder aus und starte das Tool.

6 Optionen

InhaltHaupteingaben einfügen oder eingeben.1

FarbeingabetextOptionales Feld

EinstellungenFormate, Bereiche, Zahlen und Modi anpassen.5

EingabeformatselectOptionales FeldHelligkeit L (%)numberOptionales FeldChroma CnumberOptionales FeldFarbton H (°)numberOptionales FeldReferenz-GamutselectOptionales Feld

Ergebnis

Bereit zum Start

Nach dem Ausführen erscheinen hier Dateien, Text, strukturierte Daten oder Stream-Ausgaben.

Beispiele

Beispiele zu diesem Tool

Verwandt

OKLCH-Farbkonverter

Wobei dieses Tool hilft

Dieses Tool ausführen

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Beispiele zu diesem Tool

Mit verwandten Tools und Themen fortfahren

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

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

Wichtige Fakten

Überblick

Wann verwenden

So funktioniert es

Anwendungsfälle

Beispiele

1. Markenblau in OKLCH konvertieren und Gamut prüfen

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

FAQ

Farbcode-Beispiele

Web Python Bildverarbeitung Beispiele

Android Java Bildverarbeitungsbeispiele

Android Kotlin Bildverarbeitungsbeispiele

Farbraumkonverter

CMYK-Farbkonverter

Bild-Farbpaletten-Extraktor

Geteiltes Komplementär-Farbwerkzeug

Farbraum-Konvertierung fur Web und Druck

Generatoren fur CSS-Effekte, Paletten und Design-Tokens

Tools fuer Web-Accessibility-Audits und lesbare Farbpruefung

Farbdesign- & Farbraum-Konvertierungswerkzeuge