Welche Farbformate gibt dieser Converter aus?

Er zeigt HEX(A), RGB(A), HSL(A), HWB, LAB, LCH, OKLCH und OKLAB gleichzeitig, plus die nächste benannte CSS-Farbe, für jede Farbe, die du eingibst.

Was ist OKLCH und warum sollte ich dazu konvertieren?

OKLCH ist ein wahrnehmungsgleichmäßiger Farbraum, in dem sich Helligkeit, Chroma und Farbton vorhersehbar verhalten. Designer migrieren Paletten dorthin, weil das Interpolieren und Aufhellen von Farben in OKLCH gleichmäßiger aussieht als in HSL oder RGB.

Wie wird die nächste benannte Farbe gewählt?

Deine Farbe wird über den Abstand in RGB gegen die 148 benannten CSS-Farben verglichen, und die nächste Entsprechung wird zurückgegeben. Wenn nichts wirklich nah ist, sagt das Tool das, statt einen irreführenden Namen vorzuschlagen.

Behält der Converter den Alpha-Kanal?

Ja. Eine transluzente Farbe wird als HEXA (#rrggbbaa), als rgba()/hsla() und mit einem `/ 0.5`-Alpha-Anhang bei HWB, LAB, LCH, OKLCH und OKLAB gezeigt. Deckende Farben lassen das Alpha ganz weg.

Kann ich einen oklch()- oder lab()-Wert als Eingabe einfügen?

Ja. Die Eingabe akzeptiert jede CSS-Farb-Syntax, einschließlich oklch(), oklab(), lab(), lch() und hwb(), und konvertiert sie in jedes andere Format so, wie sie HEX oder rgb() verarbeitet.

Werden die Farben, die ich eingebe, an einen Server gesendet?

Nein. Das Parsen und jede Konvertierung laufen lokal in deinem Browser, sodass die Farben, die du tippst oder einfügst, niemals dein Gerät verlassen und nicht zu ArrayKit hochgeladen werden.

Color Format Converter

Gib eine Farbe in beliebiger CSS-Syntax ein und sieh sie zugleich als HEX, RGB, HSL, HWB, LAB, LCH, OKLCH und OKLAB, mit Live-Farbfeld. Alles wird in deinem Browser konvertiert.

Der Color Format Converter parst und konvertiert jede Farbe lokal in deinem Browser. Die Werte, die du tippst oder einfügst, verlassen niemals dein Gerät und nichts wird zu ArrayKit hochgeladen.

CSS Color Converter öffnen

Über Color Format Converter

Der Color Format Converter nimmt eine einzelne Farbe, geschrieben in beliebiger CSS-Syntax — ein HEX wie #7c3aed, einen rgb()- oder hsl()-Wert, hwb(), lab(), lch(), oklch(), oklab() oder eine benannte Farbe wie rebeccapurple — und zeigt sie gleichzeitig in jeder anderen Notation. Du erhältst HEX(A), RGB(A), HSL(A), HWB, LAB, LCH, OKLCH und OKLAB, plus die nächste benannte CSS-Farbe und ein Live-Farbfeld, jedes bereit zum Kopieren. Gebaut für Designer und Frontend-Entwickler, die eine Palette in moderne Räume wie OKLCH migrieren, eine Farbe über ein Design-Tool und ein Stylesheet abgleichen oder prüfen, wie ein Wert in einem wahrnehmungsgleichmäßigen Raum aussieht. Alpha wird durchgängig erhalten. Jedes Parsen und jede Konvertierung läuft lokal in deinem Browser, sodass die Farben, die du eingibst, niemals dein Gerät verlassen.

Funktionen

Gib eine Farbe in beliebiger CSS-Syntax ein — HEX, rgb(), hsl(), hwb(), lab(), lch(), oklch(), oklab() oder eine benannte Farbe
Sieh HEX(A), RGB(A), HSL(A), HWB, LAB, LCH, OKLCH und OKLAB nebeneinander, aktualisiert beim Tippen
Kopieren mit einem Klick für jedes einzelne Format
Live-Farbfeld auf einem Schachbrett, sodass Transparenz offensichtlich ist
Nächste benannte CSS-Farbe für jede Eingabe angezeigt
Alpha wird über HEXA, rgba()/hsla() und die moderne `/ a`-Syntax erhalten
OKLCH- und OKLAB-Ausgabe zum Migrieren von Paletten in wahrnehmungsgleichmäßige Räume
Läuft vollständig in deinem Browser — die Farben, die du eingibst, werden niemals hochgeladen

So verwendest du Color Format Converter

Tippe oder füge eine Farbe in beliebigem CSS-Format in das Eingabefeld
Lies das Live-Farbfeld, um zu bestätigen, dass du die richtige Farbe eingegeben hast
Kopiere die Notation, die du brauchst — HEX, RGB, HSL, HWB, LAB, LCH, OKLCH oder OKLAB
Hol dir die nächste benannte Farbe, wenn du eine lesbare Beschriftung möchtest

Beispiel

Eingabe

#7c3aed

Ausgabe

rgb(124, 58, 237)
hsl(262, 83%, 58%)
oklch(0.5413 0.2466 292.94)

Ein HEX wächst zugleich in jede CSS-Farbnotation.

Häufige Fehler & Fehlerbehebung

Die Eingabe zeigt "Couldn’t parse that color." — Prüfe, ob die Syntax einer echten CSS-Farbe entspricht — z. B. #7c3aed, rgb(124 58 237), hsl(262 83% 58%) oder ein gültiger Farbname. Überflüssige Zeichen oder ein fehlendes % brechen das Parsen.
OKLCH- oder LCH-Werte sehen nach einem HEX-Hin-und-Zurück leicht anders aus. — Das Konvertieren durch einen breiteren Raum und zurück rundet jeden Kanal, sodass ein Wert um einen Punkt oder zwei abweichen kann. Das Farbfeld bleibt visuell identisch.
Die nächste benannte Farbe sagt, dass nichts nah ist. — Es gibt nur 148 CSS-Namen, sodass eine individuelle Markenfarbe oft keine nahe Entsprechung hat. Verwende stattdessen den HEX- oder OKLCH-Wert statt eines Namens.
Alpha ist aus der Ausgabe verschwunden. — Alpha wird nur gezeigt, wenn es unter 1 liegt. Eine vollständig deckende Farbe gibt einfaches #rrggbb, rgb() und hsl() ohne Alpha-Anhang aus.

Häufig gestellte Fragen

Welche Farbformate gibt dieser Converter aus?: Er zeigt HEX(A), RGB(A), HSL(A), HWB, LAB, LCH, OKLCH und OKLAB gleichzeitig, plus die nächste benannte CSS-Farbe, für jede Farbe, die du eingibst.
Was ist OKLCH und warum sollte ich dazu konvertieren?: OKLCH ist ein wahrnehmungsgleichmäßiger Farbraum, in dem sich Helligkeit, Chroma und Farbton vorhersehbar verhalten. Designer migrieren Paletten dorthin, weil das Interpolieren und Aufhellen von Farben in OKLCH gleichmäßiger aussieht als in HSL oder RGB.
Wie wird die nächste benannte Farbe gewählt?: Deine Farbe wird über den Abstand in RGB gegen die 148 benannten CSS-Farben verglichen, und die nächste Entsprechung wird zurückgegeben. Wenn nichts wirklich nah ist, sagt das Tool das, statt einen irreführenden Namen vorzuschlagen.
Behält der Converter den Alpha-Kanal?: Ja. Eine transluzente Farbe wird als HEXA (#rrggbbaa), als rgba()/hsla() und mit einem `/ 0.5`-Alpha-Anhang bei HWB, LAB, LCH, OKLCH und OKLAB gezeigt. Deckende Farben lassen das Alpha ganz weg.
Kann ich einen oklch()- oder lab()-Wert als Eingabe einfügen?: Ja. Die Eingabe akzeptiert jede CSS-Farb-Syntax, einschließlich oklch(), oklab(), lab(), lch() und hwb(), und konvertiert sie in jedes andere Format so, wie sie HEX oder rgb() verarbeitet.
Werden die Farben, die ich eingebe, an einen Server gesendet?: Nein. Das Parsen und jede Konvertierung laufen lokal in deinem Browser, sodass die Farben, die du tippst oder einfügst, niemals dein Gerät verlassen und nicht zu ArrayKit hochgeladen werden.