Farbcode umrechnen: RGB, Hex und HSL
#9146FFrgb(145, 70, 255)hsl(264.32, 100%, 63.73%)Die 15 Farben aus dem Twitch-Chat
Trag ein, was du hast. Das Feld nimmt einen Hex-Code, einen RGB-Wert, eine HSL-Angabe oder einen CSS-Farbnamen und gibt dir die übrigen Schreibweisen zurück. Wer lieber aussucht statt tippt, nimmt das Farbfeld daneben.
Dazu kommt, was viele Umrechner weglassen: Die drei Proben zeigen dieselbe Farbe als Text auf Weiß, als Text auf Schwarz und als Fläche, mit dem Kontrastwert daneben. Gerechnet wird alles im Browser, es geht nichts an einen Server.
Welche Schreibweisen erkannt werden
Das Feld ist absichtlich nachsichtig, damit du nichts umformen musst:
- Hex mit oder ohne Raute, sechsstellig (
#9146FF) oder dreistellig (#F0A) - Hex mit Transparenz, acht- oder vierstellig. Der Transparenzwert bleibt erhalten und wird in die Kontrastwerte eingerechnet
- RGB als
rgb(145, 70, 255)oder einfach145, 70, 255 - HSL als
hsl(264.32, 100%, 63.73%) - alle CSS-Farbnamen, von
rebeccapurplebispapayawhip, also auch die fünfzehn aus dem Twitch-Chat
Groß- und Kleinschreibung ist egal. Moderne CSS-Schreibweisen wie rgb(255 0 0 / 50%) versteht das Feld ebenfalls, denn für alles jenseits der einfachen Fälle fragt es den Browser selbst.
Wie die Umrechnung funktioniert
Ein Hex-Code ist nichts anderes als ein RGB-Wert in einer anderen Zahlenbasis. Jede Farbe besteht aus drei Anteilen für Rot, Grün und Blau, jeder davon zwischen 0 und 255. Hexadezimal geschrieben braucht ein Wert bis 255 genau zwei Stellen, deshalb sind es sechs.
#9146FF zerfällt also in 91, 46 und FF. Umgerechnet ins Zehnersystem sind das 145, 70 und 255, und genau das steht in der RGB-Zeile.
Die Kurzschreibweise mit drei Stellen verdoppelt jede einzelne: #F0A meint #FF00AA. Sie funktioniert deshalb nur für Farben, bei denen beide Stellen eines Paars gleich sind.
HSL beschreibt dieselbe Farbe anders, nämlich über Farbton, Sättigung und Helligkeit. Das ist praktisch, wenn du eine Farbe heller oder blasser machen willst, ohne den Farbton zu verändern: Du änderst dann nur die dritte Zahl.
Warum der Kontrast dabeisteht
Eine Farbe ist nicht für sich gut oder schlecht, sondern nur im Verhältnis zu dem, worauf sie liegt. Ein dunkles Blau, das auf Weiß gut aussieht, verschwindet auf schwarzem Grund fast vollständig.
Der Wert daneben ist das Kontrastverhältnis nach den Web-Richtlinien für Barrierefreiheit (WCAG). Es reicht von 1:1 (zwei identische Farben) bis 21:1 (Schwarz auf Weiß). Die Stufen:
| Verhältnis | Erfüllt |
|---|---|
| ab 7:1 | AAA für normalen Text |
| ab 4,5:1 | AA für normalen Text |
| ab 3:1 | AA, aber nur für großen Text |
| darunter | reicht für keine Stufe |
„Groß" heißt dabei mindestens 18 pt normal oder 14 pt fett, in CSS also rund 24 beziehungsweise 18,67 Pixel.
Ein bestandener Kontrastwert ist übrigens keine Garantie für Lesbarkeit. Er sagt nur, dass sich Vorder- und Hintergrund ausreichend unterscheiden. Schriftart, Größe und Laufweite entscheiden mit.
Das betrifft nicht nur Webseiten. Wer seine Chatfarbe bei Twitch oder Discord setzt, sieht an den beiden Proben sofort, ob der Name im hellen und im dunklen Design lesbar bleibt. Genau daran scheitern viele Farben, die isoliert betrachtet gut aussehen.
Die fünfzehn Twitch-Farben
Unter dem Werkzeug stehen die fünfzehn Farben, die Twitch ohne Zusatzabo für den Chat anbietet. Ein Klick übernimmt sie, dann siehst du den Hexwert und wie sie sich auf beiden Hintergründen schlägt.
Wie du deine Namensfarbe im Chat setzt und wofür du einen eigenen Hexwert brauchst, steht im Beitrag zu Twitch Chat-Farbe ändern.
Häufige Fragen
Wie rechne ich RGB in Hex um?
Trag den RGB-Wert ins Feld ein, etwa rgb(145, 70, 255) oder nur 145, 70, 255. Der Hex-Code steht sofort in der ersten Zeile.
Wie rechne ich Hex in RGB um?
Genauso, nur andersherum: Hex-Code eintragen, die RGB-Zeile zeigt das Ergebnis. Beide Richtungen laufen über dasselbe Feld.
Was ist ein Hex-Farbcode?
Eine Schreibweise für Farben mit den Ziffern 0 bis 9 und den Buchstaben A bis F. Je zwei Stellen stehen für Rot, Grün und Blau.
Wie viele Stellen hat ein Hex-Code?
Sechs für die Farbe selbst, acht wenn eine Transparenz dazukommt. Daneben gibt es die Kurzformen mit drei und vier Stellen, bei denen jede Stelle verdoppelt wird.
Wie finde ich den Farbcode einer Farbe heraus?
Wenn du die Farbe vor dir hast, nimm das Farbfeld und zieh sie zusammen. Kennst du einen Wert in einem anderen Format, trag ihn ein und lies die übrigen ab.
Welchen Kontrast braucht Text mindestens?
4,5:1 für normalen Text, 3:1 für große oder fette Schrift. Die Werte stammen aus den Richtlinien für barrierefreie Webinhalte.
Funktioniert Hex auch mit Transparenz?
Ja, dann hat der Code acht Stellen, in der Kurzform vier. Der Wert bleibt in der Ausgabe erhalten und fließt in die Kontrastzahlen ein: Eine halbtransparente Farbe wird vor der Rechnung mit dem jeweiligen Hintergrund verrechnet.
Was ist der Hex-Code von Twitch-Lila?
#9146FF. Das ist die Markenfarbe und nicht Teil der fünfzehn Chat-Farben, als eigener Wert lässt sie sich mit Turbo oder Prime trotzdem setzen.
Werden meine Eingaben übertragen?
Nein. Die Umrechnung passiert vollständig in deinem Browser, es geht keine Anfrage an einen Server.
Erik
Digital Creator aus Köln. Auf Technikshavo zeige ich seit Jahren, wie Programme wirklich funktionieren: über 1.000 Videos und mehr als 600 Artikel mit zusammen über 15 Millionen Aufrufen. Ein Teil der Themen kommt als Frage aus der Community. Erst der Text zum Nachlesen, dann das Video zum Mitmachen.
Mehr über Erik →