OKLCH Farbwähler & Konverter

oklch

hex

rgba

hsl

Helligkeit

Chroma

Farbton

Alpha

Neu bei OKLCH? Erfahren Sie mehr in unseren
FAQ

OKLCH verstehen: Die Zukunft der Webfarben

Ein umfassender Leitfaden zum perzeptuell einheitlichen Farbraum, der das Webdesign revolutioniert

Was ist OKLCH?

OKLCH ist eine zylindrische Darstellung des OKLAB-Farbraums, entworfen von Björn Ottosson im Jahr 2020. Es steht für OK Helligkeit, Chroma und Farbton - bietet eine intuitivere Arbeitsweise mit Farben im Vergleich zu traditionellen RGB- oder HSL-Systemen.

Im Gegensatz zu RGB, das geräteorientiert ist, oder HSL, das perzeptuelle Mängel aufweist, basiert OKLCH auf Prinzipien des menschlichen Sehens. Es stellt sicher, dass gleiche numerische Änderungen gleiche perzeptuelle Änderungen erzeugen.

Warum OKLCH statt RGB und HSL wählen?

RGB-Einschränkungen

• Geräteabhängige Werte
• Nicht-intuitive Farbmischung
• Schwierig Varianten zu erstellen
• Schlecht für Barrierefreiheitsberechnungen

HSL-Mängel

• Falsche perzeptuelle Einheitlichkeit
• Helligkeit variiert mit Farbton
• Sättigung verhält sich unvorhersehbar
• Begrenzt auf sRGB-Gamut

OKLCH-Vorteile

• Echte perzeptuelle Einheitlichkeit
• Konsistente Helligkeit über Farbtöne
• Vorhersagbare Farbbeziehungen
• Breite Gamut-Unterstützung (P3, Rec2020)

Die Kraft der perzeptuellen Einheitlichkeit

Perzeptuelle Einheitlichkeit bedeutet, dass eine Änderung des gleichen numerischen Betrags unabhängig von der Ausgangsfarbe eine ähnliche perzeptuelle Änderung erzeugt. Dies ist entscheidend für:

Design-Konsistenz

Erstellen Sie Farbvarianten, die die gleiche wahrgenommene Helligkeit beibehalten, wichtig für Hover-Zustände, deaktivierte Zustände und Themenvariationen.

Barrierefreiheit

Sagen Sie Kontrastverhältnisse genau voraus und stellen Sie WCAG-Konformität sicher, indem Sie mit echten perzeptuellen Helligkeitswerten arbeiten.

Jenseits von sRGB: Breite Gamut-Farben

Moderne Displays unterstützen Farbgamuts weit über das traditionelle sRGB hinaus. OKLCH behandelt diese erweiterten Farbräume nahtlos:

sRGB

Standard-Gamut von allen Displays unterstützt

25% mehr Farben, häufig in Apple-Geräten

Rec2020

Zukunftssicherer Gamut für HDR-Displays

Mit OKLCH können Sie Farben angeben, die moderne Displays voll ausnutzen und gleichzeitig automatische Fallbacks für Standardbildschirme bieten.

OKLCH in der Praxis

Farbpaletten erstellen

/* Basisfarbe */
--primary: oklch(0.6 0.2 250);

/* Hellere Variante - nur L erhöhen */
--primary-light: oklch(0.8 0.2 250);

/* Dunklere Variante - nur L verringern */
--primary-dark: oklch(0.4 0.2 250);

/* Komplementär - 180 zum Farbton addieren */
--secondary: oklch(0.6 0.2 70);

Barrierefreiheit-First Design

/* WCAG AA Kontrast sicherstellen */
--text-on-light: oklch(0.3 0 0);     /* L=0.3 für dunklen Text */
--text-on-dark: oklch(0.9 0 0);      /* L=0.9 für hellen Text */

/* Konsistente wahrgenommene Helligkeit */
--success: oklch(0.7 0.15 140);      /* Grün */
--warning: oklch(0.7 0.15 90);       /* Gelb */
--error: oklch(0.7 0.15 30);         /* Rot */

Browser-Unterstützung & Migration

Aktuelle Unterstützung

OKLCH wird in allen modernen Browsern unterstützt:

• Chrome 111+ (März 2023)
• Firefox 113+ (Mai 2023)
• Safari 15.4+ (März 2022)
• Edge 111+ (März 2023)

Migrationsstrategie

/* Fallbacks für ältere Browser bereitstellen */
.element {
  /* Fallback für ältere Browser */
  background-color: rgb(0, 128, 255);
  
  /* Moderne Browser verwenden dies */
  background-color: oklch(0.65 0.2 240);
}

/* Oder @supports verwenden */
@supports (color: oklch(0 0 0)) {
  .element {
    color: oklch(0.7 0.15 180);
  }
}

Die Zukunft ist perzeptuell einheitlich

OKLCH repräsentiert einen Paradigmenwechsel in der Art, wie wir über Farbe im Web denken. Durch die Ausrichtung an der menschlichen Wahrnehmung statt an Gerätefähigkeiten ermöglicht es:

✓ Intuitivere Farbauswahl und -manipulation
✓ Bessere Barrierefreiheit durch vorhersagbare Helligkeit
✓ Zukunftssichere Designs, die mit Display-Technologie skalieren
✓ Konsistente Farbbeziehungen über verschiedene Farbtöne

Beginnen Sie heute mit unserem Farbwähler mit OKLCH und erleben Sie den Unterschied, den perzeptuelle Einheitlichkeit in Ihren Designs macht.

FAQ

OKLCH: Häufig gestellte Fragen

Erfahren Sie mehr über OKLCH und wie Sie diesen Farbwähler effektiv nutzen können.

Was ist OKLCH und warum sollte ich es verwenden?

OKLCH ist ein perzeptuell einheitlicher Farbraum, der das Erstellen harmonischer Farbpaletten erleichtert. Im Gegensatz zu RGB oder HSL behält die Anpassung der Helligkeit in OKLCH die wahrgenommene Helligkeit konsistent über alle Farbtöne bei.

Was sind P3- und Rec2020-Farbräume?

P3 und Rec2020 sind Wide-Gamut-Farbräume, die lebendigere Farben als Standard-sRGB anzeigen können. P3 wird häufig auf modernen Apple-Geräten und High-End-Displays unterstützt.

Warum werden einige Farben als 'nicht verfügbar' angezeigt?

Wenn Sie hochgesättigte Farben auswählen, können diese außerhalb des Bereichs liegen, den Ihr Display anzeigen kann. Der Wähler zeigt eine Fallback-Farbe an.

Wie verwende ich OKLCH-Farben in CSS?

Sie können OKLCH-Farben direkt in modernen Browsern mit der CSS-Syntax verwenden: color: oklch(0.7 0.1 180). Für ältere Browser-Unterstützung stellen Sie immer eine Fallback-Farbe im RGB- oder HEX-Format bereit.

Was ist der Unterschied zwischen Chroma und Sättigung?

Chroma in OKLCH repräsentiert die Farbigkeit oder Intensität einer Farbe auf perzeptuell einheitliche Weise. Im Gegensatz zur HSL-Sättigung bleiben Chroma-Werte über verschiedene Helligkeitsstufen konsistent.

Kann ich bestimmte Farben speichern oder mit Lesezeichen versehen?

Ja! Jede Farbauswahl aktualisiert automatisch den URL-Hash. Sie können jede Farbe mit einem Lesezeichen versehen oder die URL mit anderen teilen.

Was macht die 'Fallback'-Schaltfläche?

Wenn Sie eine Farbe außerhalb der Fähigkeiten Ihres Displays auswählen, zeigt der Wähler sowohl die beabsichtigte Farbe als auch eine Fallback-Version an.

Warum gibt es manchmal zwei Farbvorschau-Blöcke?

Wenn Sie eine Farbe außerhalb des sRGB-Farbraums auswählen, zeigt der Wähler zwei Vorschauen: links die tatsächliche Farbe (falls Ihr Display sie unterstützt) und rechts den sRGB-Fallback.

Wie arbeite ich mit transparenten Farben?

Verwenden Sie den Alpha-Schieberegler zur Steuerung der Transparenz. Der Alphakanal wird auf einem karierten Hintergrundmuster angezeigt.

Kann ich Farbwerte direkt eingeben statt die Schieberegler zu verwenden?

Absolut! Sie können Farben in jedem Format (OKLCH, HEX, RGB oder HSL) in die Formateingabefelder eingeben oder einfügen.

Wie weiß ich, ob mein Display P3 oder Rec2020 unterstützt?

Der Wähler erkennt automatisch die Fähigkeiten Ihres Displays. Wenn Sie 'P3 ist auf diesem Monitor nicht verfügbar' oder ähnliche Meldungen sehen, unterstützt Ihr Display diese breiteren Farbgamuts nicht.

Was ist der beste Workflow für die Erstellung barrierefreier Farbpaletten?

Beginnen Sie mit der Einstellung Ihres gewünschten Farbtons und passen Sie dann die Helligkeit an, um die WCAG-Kontrastanforderungen zu erfüllen.