Farbnamen und Hex-Codes

Finden Sie Hex-, RGB- und HSL-Werte zu jedem Farbnamen oder den nächstgelegenen Farbnamen zu einem Code. Mit Abstufungen und WCAG-Kontrast für 148 CSS-Farben.


Geben Sie einen Farbnamen ein oder fügen Sie einen Hex-, RGB- oder HSL-Wert ein. Alle vier Formate funktionieren.
Leeren

Alle benannten CSS-Farben

Alle 148 in CSS eingebauten Farbnamen mit ihren Hex- und RGB-Werten. Klicken Sie auf eine Zeile, um sie oben zu öffnen.

Wie Hex-Farbcodes funktionieren

Ein Hex-Code besteht schlicht aus drei Zahlen zur Basis 16: wie viel Rot, wie viel Grün und wie viel Blau, jeweils von 00 bis FF. #FFD700 bedeutet also Rot mit voller Stärke, Grün mit 215 von 255 und überhaupt kein Blau, was das Auge als Gold liest. Es zählen ausschließlich die zweistelligen Paare, weshalb #FFF und #FFFFFF beide Weiß ergeben.

Hex, RGB und HSL im Vergleich

Alle drei beschreiben dieselben Farben, sie transportieren nur unterschiedliche Informationen. Hex ist kompakt und in CSS die übliche Wahl. RGB sind dieselben Zahlen in Dezimalschreibweise, mit denen sich leichter rechnen lässt. HSL trennt den Farbton von Sättigung und Helligkeit, sodass sich eine Palette von Hand weit einfacher aufbauen lässt: Farbton beibehalten, Helligkeit ändern, und schon haben Sie eine passende Abstufung.

Warum Kontrast wichtig ist

Text muss sich ausreichend vom Hintergrund abheben, damit ihn auch Menschen mit eingeschränktem Sehvermögen oder auf einem dunklen Bildschirm lesen können. Die Richtlinien zur Barrierefreiheit fordern ein Verhältnis von 4,5 zu 1 für normalen Text (AA) und 7 zu 1 für die strengere Stufe AAA. Großer Text darf bei 3 zu 1 liegen. Dieses Werkzeug berechnet das Verhältnis sowohl gegen Weiß als auch gegen Schwarz, sodass Sie sofort sehen, was Sie darauflegen sollten.

Nützlich zu wissen

  • CSS kennt 148 benannte Farben, und mehrere davon sind Dubletten: grey und gray sowie aqua und cyan sind identisch.
  • Die Kurzschreibweise funktioniert nur, wenn sich jedes Paar wiederholt. #FFCC00 lässt sich also als #FC0 schreiben, #FFD700 dagegen nicht kürzen.
  • Zwei zusätzliche Hex-Ziffern legen die Transparenz fest, #FFD70080 ist somit Gold bei ungefähr halber Deckkraft.
  • Für eine Palette behalten Sie in HSL den Farbton bei und verändern nur die Helligkeit. Die Farben wirken dann immer verwandt.

Häufig gestellte Fragen

Die CSS-Farbe mit dem Namen gold ist #FFD700, also rgb(255, 215, 0). Es handelt sich um ein leuchtendes Gelbgold und nicht um einen metallischen Ton, denn eine einfarbige Fläche kann den Glanz echten Goldes nicht wiedergeben. Für eine metallischere Wirkung kombinieren Gestalter es meist mit dunkleren Goldtönen wie #B8860B, das in CSS darkgoldenrod heißt.

Geben Sie den Namen oben in das Feld ein, und Sie erhalten Hex-, RGB- und HSL-Werte auf einmal. Das funktioniert für alle 148 benannten CSS-Farben und auch umgekehrt: Fügen Sie einen Hex-Code ein, und Sie erfahren die nächstgelegene benannte Farbe samt genauem Abstand.

Sie enthalten exakt dieselbe Information in unterschiedlicher Schreibweise. Hex notiert jeden der drei Kanäle mit zwei Ziffern zur Basis 16, #FF7F50 ist also Rot 255, Grün 127, Blau 80. RGB schreibt genau diese Zahlen dezimal als rgb(255, 127, 80). Keines ist genauer; Hex lässt sich in CSS nur kürzer tippen.

Farbton, Sättigung und Helligkeit. Der Farbton ist die Position auf dem Farbkreis von 0 bis 360 Grad, die Sättigung gibt an, wie kräftig die Farbe ist, und die Helligkeit reicht von Schwarz bei 0% bis Weiß bei 100%. Für das Gestalten ist es das praktischste Format, denn wenn Sie den Farbton beibehalten und nur die Helligkeit ändern, entsteht eine Reihe von Abstufungen, die erkennbar zusammengehören.

Die CSS-Spezifikation enthält 148 benannte Farben, transparent eingeschlossen. Mehrere Namen verweisen auf identische Werte, insbesondere grey und gray, aqua und cyan sowie magenta und fuchsia. Die vollständige Liste mit Hex- und RGB-Werten finden Sie auf dieser Seite.

Die Richtlinien zur Barrierefreiheit verlangen mindestens 4,5 zu 1 für normalen Fließtext und 3 zu 1 für großen Text, was der Stufe AA entspricht. Die strengere Stufe AAA fordert 7 zu 1. Dieses Werkzeug berechnet das Verhältnis Ihrer Farbe gegenüber Weiß und Schwarz und zeigt an, welches besteht, sodass Sie sofort die lesbare Variante wählen können.

Ja. Ein achtstelliger Hex-Code hängt zwei Alpha-Ziffern an, wobei 00 vollständig transparent und FF vollständig deckend bedeutet. #FF000080 ist somit Rot bei etwa 50% Deckkraft. Alle aktuellen Browser unterstützen das, die ältere rgba()-Schreibweise ist allerdings weiterhin sehr verbreitet.

Weil die 148 benannten Farben nur eine winzige Auswahl aus den rund 16,7 Millionen sind, die ein Bildschirm darstellen kann. Liegt Ihr Wert nicht auf einem dieser exakten Punkte, sucht dieses Werkzeug die nächstgelegene benannte Farbe, indem es den Abstand zwischen beiden im RGB-Raum misst, und weist darauf hin, dass es sich um eine Annäherung und nicht um eine Übereinstimmung handelt.

Wie lautet der Hex-Code einer Farbe?

Geben Sie einen Farbnamen ein und erhalten Sie auf einen Schlag die Hex-, RGB- und HSL-Werte, oder fügen Sie einen beliebigen Code ein, um die nächstgelegene benannte CSS-Farbe zu finden. Gold ist #FFD700, coral ist #FF7F50 und teal ist #008080. Jedes Ergebnis zeigt zusätzlich Abstufungen, Aufhellungen und das Kontrastverhältnis gegenüber Schwarz und Weiß.