Color Models

OKLCH

Ein moderner wahrnehmungsgleichmäßiger Farbraum, der Helligkeit, Chroma und Farbton verwendet und als Verbesserung von CIELAB für digitale Designprozesse entwickelt wurde.

OKLCH is based on the Oklab color space created by Bjorn Ottosson in 2020. It uses L for lightness (0-1), C for chroma (colorfulness), and H for hue angle (0-360). OKLCH improves on CIELAB by providing better perceptual uniformity, especially in the blue region where CIELAB has known issues. CSS Color Level 4 includes oklch() as a native function, making it increasingly relevant for web development. OKLCH is particularly powerful for generating consistent color palettes because equal chroma values produce colors that look equally vivid regardless of hue.

Ausprobieren

Farbkonverter

Konvertieren Sie sofort zwischen den Farbformaten HEX, RGB, HSL, HSV, CMYK und OKLCH.

Ähnliche Artikel

CSS color-mix(): Farben nativ im Browser mischen

Lernen Sie CSS color-mix() zum nativen Mischen von Farben im Browser. Meistern Sie Syntax, Farbräume, praktische Anwendungsfälle und erstellen Sie dynamische Paletten ohne JavaScript.

Einen Farbwähler als Web Component von Grund auf bauen

Baue einen barrierefreien Farbwähler als Web Component. Implementiere Canvas-Rendering, Farbton-Schieberegler, Alpha-Kanäle und Custom Events mit Shadow DOM.

Perzeptuelle Farbräume: Lab, LCH, Oklab, OKLCH

Erkunde perzeptuell gleichmäßige Farbräume – CIE Lab, LCH, Oklab und OKLCH. Lerne, wie jeder konzipiert wurde, wo er glänzt und welchen du für CSS und Designarbeit verwenden solltest.

Farbe für Data Storytelling: Über Standard-Diagrammfarben hinaus

Data Storytelling jenseits der Standard-Diagrammfarben. Sequenzielle, divergierende und kategoriale Paletten, Barrierefreiheit in der Datenviz und D3/Chart.js-Farbskalen.

Smaragd vs. Jade vs. Waldgrün: Ein Vergleichsleitfaden

Vergleiche Smaragd (#50C878), Jade (#00A86B) und Waldgrün (#228B22). Lerne die visuellen Unterschiede und Hex-Code-Unterschiede zwischen diesen beliebten Grüntönen.

CSS light-dark()-Funktion: Natives Theme-Switching

Nutzen Sie CSS light-dark() für natives Theme-Switching. Ersetzen Sie JavaScript-Toggles und Media Queries durch eine einzige CSS-Funktion für Hell- und Dunkelmodus-Farben.