Farbkonverter

Über Farbformate

Dieselbe Farbe lässt sich als HEX (#ff6600), RGB (rgb(255, 102, 0)) oder HSL (hsl(24, 100%, 50%)) schreiben — drei verschiedene Arten, dieselbe Farbe zu beschreiben, jede für eine andere Situation geeignet.

HEX hat eine kompakte Kurzform: ein 3-stelliger Code wie #f60 entspricht exakt dem 6-stelligen #ff6600 — jede Ziffer wird einfach verdoppelt —, und eine 8-stellige Form wie #ff6600cc fügt einen Alphakanal auf dieselbe Weise hinzu wie rgba() und hsla(). Dieses Tool akzeptiert die Kurzform als Eingabe und normalisiert sie, gibt aber immer die vollständige 6- oder 8-stellige Form aus, damit das Ergebnis eindeutig anderswo eingefügt werden kann. Eines tut es nicht: Farben auf barrierefreien Kontrast prüfen oder Farbenblindheit simulieren — das ist eine eigenständige, ebenso wichtige Designfrage, unabhängig von der Formatumwandlung.

Wo Sie darauf treffen

• Eine HEX-Farbe aus dem Design in das im Code bereits verwendete RGB oder HSL übersetzen
• Helligkeit oder Sättigung anpassen, was in HSL deutlich einfacher nachzuvollziehen ist als in RGB
• Eine Farbe aus den berechneten Stilen eines Browsers auslesen und in eine Designvorgabe umwandeln
• Prüfen, wie ein CSS-Farbwert tatsächlich aussieht, bevor man sich dafür entscheidet

Häufige Fragen

Warum gibt es HSL, wenn RGB doch schon funktioniert?
RGB beschreibt eine Farbe als Rot-/Grün-/Blau-Lichtintensitäten, was schlecht dazu passt, wie Menschen über Farbe denken. HSL trennt Farbton, Sättigung und Helligkeit, sodass „dunkler machen“ oder „kräftiger machen“ nur eine Zahl statt drei neu berechneter Werte erfordert.

Was bedeutet der Alphawert in rgba()/hsla()?
Das ist die Deckkraft, von 0 (vollständig transparent) bis 1 (vollständig deckend). Dieses Tool erhält sie über alle Formate hinweg — auch als 8-stelliges HEX —, wenn Ihre Eingabe einen Alphawert enthält.

Werden benannte CSS-Farben wie „tomato“ unterstützt?
Noch nicht — nur HEX-, RGB(A)- und HSL(A)-Eingaben. Suchen Sie zuerst den HEX-Wert der benannten Farbe, wenn Sie damit beginnen.

Ist #f60 dieselbe Farbe wie #ff6600?
Ja, exakt. Die 3-stellige HEX-Kurzform verdoppelt jede Ziffer, um die vollständige Form zu erhalten: f wird zu ff, 6 wird zu 66, 0 wird zu 00. Es ist rein eine kürzere Schreibweise für bestimmte Farben — nur solche, bei denen jeder Kanal zufällig aus einer wiederholten Ziffer besteht —, kein anderer oder ungenauerer Farbraum. Dieses Tool akzeptiert beide Längen und gibt immer die vollständige 6- oder 8-stellige Form aus.