Farbkonverter

Eine Farbe, drei Dialekte

An einem normalen Arbeitstag kommt dieselbe Farbe in drei Kostümen an: Das Markenhandbuch gibt Ihnen einen HEX-Code, eine Canvas- oder Chart-Bibliothek will die RGB-Zahlen, und modernes CSS lässt sich am angenehmsten in HSL feinjustieren. Diese Seite hält alle drei im Gleichschritt — tippen Sie in das Feld, das zu dem passt, was Sie erhalten haben, und die anderen beiden schreiben sich beim Tippen selbst um, mit einem Farbfeld, das zeigt, wie die Zahlen tatsächlich aussehen. Auch die HEX-Kurzform funktioniert: Fügen Sie #f80 ein, und es wird zu #ff8800 erweitert, genau wie ein Browser es lesen würde. Es gibt keinen Farbwähler, mit dem man kämpfen müsste; hier geht es darum, einen Wert, den Sie bereits haben, präzise zu übersetzen.

Eine Palette mit HSL aufbauen

HSL macht sich bezahlt, sobald Sie Variationen einer Farbe brauchen statt der Farbe selbst. Halten Sie den Farbton fest und verschieben Sie nur die Helligkeit: Senken Sie sie um zehn Punkte für einen Hover-Zustand, erhöhen Sie sie um vierzig für einen getönten Hintergrund, und jede Variante bleibt erkennbar dieselbe Farbe — etwas, das durch direktes Bearbeiten von HEX-Ziffern kaum zu erreichen ist. Die Sättigung zu senken ergibt die gedämpfte, vergraute Version, die für deaktivierte Schaltflächen und dezente Rahmen funktioniert. Weil sich die Felder gegenseitig live aktualisieren, ist ein schneller Arbeitsablauf: Ihren Marken-HEX-Wert einfügen, das HSL ablesen, eine Zahl nachjustieren und den frischen HEX-Wert zurückkopieren — eine kleine Palette in unter einer Minute, ganz ohne Design-Software.

Ehrliche Grenzen, und ein benachbarter Trick

Zwei Dinge tut dieser Konverter bewusst nicht. Er hat keinen Alphakanal — das RGB-Feld spricht rgb(), nicht rgba() —, sodass Transparenz etwas ist, das Sie nachträglich in Ihrem CSS hinzufügen, wo sie hingehört. Und HSL-Werte werden zur besseren Lesbarkeit auf ganze Zahlen gerundet, was bedeutet, dass ein Rundgang von HEX zu HSL und zurück zu HEX um einen einzelnen Punkt abweichen kann — auf dem Bildschirm unsichtbar, aber wissenswert, wenn Sie Style-Dateien vergleichen. Das Tool ist kostenlos ohne Limit, wie alle unsere Entwicklertools. Eine Kombination, die man sich merken sollte: Sobald diese Seite Ihnen genau verraten hat, welche Farbe ein Logo-Hintergrund hat, kann unser Bildtransparenz-Tool genau diese Farbe aus dem Bild entfernen — ein praktischer Zweischritt bei der Vorbereitung von Grafiken für eine Website.

Drei Wege, dieselbe Farbe zu beschreiben

HEX und RGB beschreiben eine Farbe über die Intensität von Rot, Grün und Blau (nur in unterschiedlicher Schreibweise) — HSL beschreibt sie stattdessen über Farbton, Sättigung und Helligkeit, was für das manuelle Auswählen oder Anpassen eines Farbtons oft intuitiver ist.