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

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

Beispielergebnisse

1 Beispiele

Ein Markenblau in OKLCH umwandeln und Gamut prüfen

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

Color converter with OKLCH, P3, and gamut diagnostics.
Eingabeparameter anzeigen
{ "colorInput": "#3b82f6", "inputFormat": "auto", "clipMode": "auto" }

Wichtige Fakten

Kategorie
Design & Farbe
Eingabetypen
text, select, number
Ausgabetyp
html
Sample-Abdeckung
1
API verfügbar
Yes

Ü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

  • •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.

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.
Problem
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'.
Beispielkonfiguration
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.
Problem
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.
Beispielkonfiguration
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.

Mit Samples testen

design
Farbcode-Beispiele
Sammlung von Farbcodes in verschiedenen Formaten (Hex, RGB, HSL, benannte Farben) für Validierungstests
title token color
sample

Verwandte Hubs

Farbraum-Konvertierung fur Web und Druck
Gebundelte Werkzeuge fur Farbraum-Konvertierung zwischen Web und Druck in einem Hub.
Generatoren fur CSS-Effekte, Paletten und Design-Tokens
Gebundelte Werkzeuge fur CSS-Visualeffekte, Palettenaufbau und Design-Token-Generierung in einem Hub.
Tools fuer Web-Accessibility-Audits und lesbare Farbpruefung
Pruefen Sie WCAG-Probleme, Screenreader-Reihenfolge, Kontrastfehler, Risiken bei Farbsehschwaechen und zugaengliche Farbwahl in einem Hub fuer Web-Accessibility-Workflows.
Farbdesign- & Farbraum-Konvertierungswerkzeuge
Farbkonverter, Palettengeneratoren, Harmonie-Tools, Barrierefreiheitsprüfer und Farbanpassungswerkzeuge an einem Ort für Designer und Entwickler vergleichen.

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.

API-Dokumentation

Request-Endpunkt

POST /de/api/tools/oklch-color-converter

Request-Parameter

Parameter-Name Typ Erforderlich Beschreibung
colorInput text Nein -
inputFormat select Nein -
L number Nein -
C number Nein -
H number Nein -
clipMode select Nein -

Antwortformat

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

MCP-Dokumentation

Fügen Sie dieses Tool zu Ihrer MCP-Server-Konfiguration hinzu: 

{
  "mcpServers": {
    "elysiatools-oklch-color-converter": {
      "name": "oklch-color-converter",
      "description": "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",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=oklch-color-converter",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Sie können mehrere Tools verketten, z.B.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, maximal 20 Tools.

Wenn Sie auf Probleme stoßen, kontaktieren Sie uns bitte bei [email protected]