Farbformat-Konverter

Colour Format Converter

Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.

Liest jede CSS-Farbe – Hex, `rgb()`, `hsl()`, `lab()`, `oklch()`, ein Schlüsselwort – und zeigt sie auf einmal in jeder Notation, auf hellem und auf dunklem Grund. Es sagt außerdem, wenn eine Farbe außerhalb von sRGB liegt und welche die nächste erreichbare ist.

🔒 Läuft vollständig in Ihrem Browsercolorconvertoklchhex

Jede CSS-Farbe

Gelesen als HEX · nächstes Schlüsselwort ist mediumslateblue (#7b68ee), ΔEok 0,050

Auf Hell

Text in dieser Farbe

Fließtext daneben, zum Vergleich.

Ein gefüllter Block, mit der Untergrundfarbe als Schrift.

Auf Dunkel

Text in dieser Farbe

Fließtext daneben, zum Vergleich.

Ein gefüllter Block, mit der Untergrundfarbe als Schrift.

Dieselbe Farbe in jeder Schreibweise
HEX	`#5b6cff`Was jedes Designwerkzeug kopiert.
RGB	`rgb(91 108 255)`Die Kanäle, wie ein Display sie bekommt.
HSL	`hsl(233.78 100% 67.84%)`Eine Umsortierung von sRGB. Seine „Helligkeit“ ist nicht wahrnehmungsbezogen.
HWB	`hwb(233.78 35.69% 0%)`Dasselbe Farbrad, beschrieben als Farbton plus Weiß und Schwarz.
LAB	`lab(50.851% 29.157 -76.75)`CIE Lab*, auf D50 bezogen, wie CSS es festlegt.
LCH	`lch(50.851% 82.102 290.8)`Lab* in Polarform. Das Chroma reicht bis etwa 150.
OKLAB	`oklab(60.153% 0.0114 -0.2164)`Kartesisches OKLab. Der euklidische Abstand ist hier der wahrgenommene Abstand.
OKLCH	`oklch(60.153% 0.2167 273.01)`Das, was als Voreinstellung taugt — siehe die Anmerkung unten.

Warum OKLCH die Voreinstellung sein sollte

Die Interpolation bleibt gesättigt. Eine gerade Linie zwischen zwei Farben führt in sRGB nah an der Neutralachse vorbei, deshalb wird ein Verlauf von Blau nach Gelb in der Mitte grau. In OKLCH läuft der Weg um das Farbrad herum, und die Mitte behält ihr Chroma. Das ist der größte sichtbare Unterschied und der Grund, warum CSS in oklch bekommen hat.
Helligkeit heißt Helligkeit. Zwei HSL-Farben bei 50% können sich in der wahrgenommenen Helligkeit um das Dreifache unterscheiden — hsl(60 100% 50%) ist Gelb und hsl(240 100% 50%) ist Marineblau. Das L in OKLCH ist an der Wahrnehmung geeicht, also hat eine darauf gebaute Skala von 50 bis 950 gleichmäßige Schritte statt einer Kante in der Mitte.
Abstand heißt Unterschied. Der euklidische Abstand in OKLab ist ein brauchbares ΔE, und genau das lässt „nächste benannte Farbe“ oben sinnvolle Antworten geben, wo ein RGB-Abstand ein tiefes Violett darkslateblue nennt.

Diese Farbe ist L 60,2 %, C 0,2167, H 273,0°. Halten Sie L und H fest und bewegen nur C, bekommen Sie die Tonwertreihe; halten Sie L und C fest und bewegen H, bekommen Sie eine harmonische Palette. In HSL geht beides nicht.

So funktioniert es

Fügen Sie die Farbe ein
Jede Notation. Die Zeile unter dem Feld sagt, als welche sie gelesen wurde, und nennt das nächste CSS-Schlüsselwort mit dem wahrnehmungsbezogenen Abstand dazu.
Sehen Sie sich beide Gründe an
Eine Farbe ist ohne die Fläche, auf der sie sitzt, nur halb bestimmt. Ein Mittelblau, das auf Weiß selbstbewusst wirkt, wirkt auf dunklem Grund unbeleuchtet, und keine Notation zeigt das.
Kopieren Sie die Notation, die Sie brauchen
Jede Zeile hat ihren eigenen Kopierknopf und eine Zeile, die sagt, wofür dieser Farbraum ist. Die Zeile, die Ihrer Eingabe entspricht, ist hervorgehoben.

Häufige Fragen

Warum empfiehlt die Seite ständig OKLCH?

Drei prüfbare Gründe. Die Interpolation bleibt gesättigt, ein Verlauf von Blau nach Gelb wird also in der Mitte nicht grau. Seine Helligkeit ist wahrnehmungsbezogen, eine Skala von 50 bis 950 hat also gleichmäßige Schritte. Und Abstand darin ist wahrgenommener Unterschied, und das ist es, was „nächste benannte Farbe“ sinnvolle Antworten geben lässt.

Was bedeutet „außerhalb von sRGB“ für meine Farbe?

Dass die exakte Farbe Kanalwerte unter 0 oder über 1 braucht, die ein Display nicht erzeugen kann. Das Farbfeld zeigt die nächste Farbe, die es kann – gefunden, indem Helligkeit und Farbton gehalten und das Chroma gesenkt wird, was nur die Sättigung aufgibt, die der Bildschirm nie hatte. Ein P3-Display kann mehr davon zeigen.

Ist HSL-Helligkeit dasselbe wie OKLCH-Helligkeit?

Nein, und das ist die Falle. `hsl(60 100% 50%)` ist ein leuchtendes Gelb und `hsl(240 100% 50%)` ein Marineblau – dieselbe „Helligkeit“, wahrgenommene Helligkeit um den Faktor drei verschieden. HSL ist eine Umordnung von sRGB, kein wahrnehmungsbezogener Farbraum.

Sind LAB und OKLAB dasselbe?

Verschiedene Räume mit derselben Idee. CIE L*a*b* stammt von 1976 und hat bekannte Ungleichmäßigkeiten, besonders im Blau, wo bei einer Helligkeitsänderung eine Farbtonverschiebung auftritt. OKLab wurde an neuere Daten angepasst, um genau das zu beheben, und deshalb ist es das, das sich zu verwenden lohnt.

Eingabe aus

Farbpalette extrahieren

Palette Extractor

Zieht eine Palette aus N Farben aus einem Bild und exportiert sie als Hex, CSS-Variablen oder ASE-Farbfelder.

Läuft vollständig in Ihrem Browser

Durchschnitts- und Hauptfarbe

Average & Dominant Colour

Liefert eine repräsentative Farbe für ein Bild – Mittelwert, Median oder häufigste Farbe – als Farbwert.

Läuft vollständig in Ihrem Browser

Farbwähler

Colour Picker

Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.

Läuft vollständig in Ihrem Browser

CSS-Verlaufsgenerator

CSS Gradient Builder

Baut lineare, radiale und konische Verläufe mit verschiebbaren Stopps und gibt das CSS aus, in sRGB oder OKLCH.

Läuft vollständig in Ihrem Browser

Danach

Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.

Druckfarben-Konverter

Print Colour Converter

Wandelt RGB mit der einfachen Formel in CMYK um (ohne ICC- oder Papierprofil) und markiert gesättigte Farben, die eine Vierfarbdruckmaschine abstumpfen wird.

Läuft vollständig in Ihrem Browser

Farbwähler

Colour Picker

Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.

Läuft vollständig in Ihrem Browser

Farbabstufungen

Tint & Shade Scale

Erzeugt aus einer Farbe eine Helligkeitsskala von 50 bis 950 mit wahrnehmungsgleichen Schritten, fertig als Design-Tokens.

Läuft vollständig in Ihrem Browser

Nächste Tailwind-Farbe

Nearest Tailwind Colour

Findet zu jeder Farbe den nächstgelegenen Eintrag der Tailwind-Palette und zeigt den wahrnehmbaren Abstand.

Läuft vollständig in Ihrem Browser

Kontrast prüfen

Contrast Checker

Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.

Läuft vollständig in Ihrem Browser

Palettengenerator

Palette Generator

Baut aus einer Grundfarbe eine harmonische Palette nach Komplementär-, Triaden- und Analogregeln.

Läuft vollständig in Ihrem Browser