HTML-Farben – Tabelle aller CSS-Farbnamen

Finde HTML-Farbnamen und ihre Codes: Suche nach Name oder Farbton, sortiere nach Helligkeit und kopiere HEX oder RGB per Klick.

Die Farbnamen und Werte folgen der CSS Color Module Specification. Zusätzlich sind die deutschen Bezeichnungen Übersetzungen bzw. Richtwerte. Im Web funktionieren alle Namen in allen aktuellen Browsern.

Die Tabelle zeigt alle 148 in CSS definierten Farbnamen wie tomato, skyblue oder rebeccapurple mit Farbmuster, HEX-Code, RGB-Wert und – wo üblich – deutschem Namen. Du kannst nach Name oder Code suchen, nach Alphabet, Farbton oder Helligkeit sortieren und Werte mit einem Klick kopieren. Farbnamen sind in HTML und CSS überall nutzbar, zum Beispiel color: tomato;.

Wie du HTML-Farbnamen verwendest

In HTML und CSS kannst du Farben als Namen statt als Hex- oder RGB-Wert angeben: color: tomato; oder background: skyblue;. Die Namen sind Schlüsselwörter, Groß- und Kleinschreibung spielt keine Rolle. Es gibt 148 benannte Farben (140 klassische, dazu die Grau-Varianten mit Doppelschreibweise wie gray/grey und rebeccapurple, das 2014 zu Ehren von Rebecca Meyer aufgenommen wurde), außerdem transparent und currentcolor. Für Feinabstimmung sind Hex- und RGB-Werte flexibler, Namen dagegen gut lesbar und für Prototypen praktisch.

Grundfarben im Überblick

NameDeutschHEXRGB
aquaAqua#00FFFF0, 255, 255
beigeBeige#F5F5DC245, 245, 220
blackSchwarz#0000000, 0, 0
blueBlau#0000FF0, 0, 255
brownBraun#A52A2A165, 42, 42
coralKoralle#FF7F50255, 127, 80
crimsonKarmesinrot#DC143C220, 20, 60
fuchsiaFuchsia#FF00FF255, 0, 255
goldGold#FFD700255, 215, 0
grayGrau#808080128, 128, 128
greenGrün#0080000, 128, 0
indigoIndigo#4B008275, 0, 130
ivoryElfenbein#FFFFF0255, 255, 240
khakiKhaki#F0E68C240, 230, 140
lavenderLavendel#E6E6FA230, 230, 250
limeLimette#00FF000, 255, 0
maroonKastanienbraun#800000128, 0, 0
navyMarineblau#0000800, 0, 128
oliveOliv#808000128, 128, 0
orangeOrange#FFA500255, 165, 0
pinkRosa#FFC0CB255, 192, 203
purpleLila#800080128, 0, 128
redRot#FF0000255, 0, 0
salmonLachs#FA8072250, 128, 114
silverSilber#C0C0C0192, 192, 192
skyblueHimmelblau#87CEEB135, 206, 235
tealPetrol#0080800, 128, 128
tomatoTomatenrot#FF6347255, 99, 71
turquoiseTürkis#40E0D064, 224, 208
violetViolett#EE82EE238, 130, 238
whiteWeiß#FFFFFF255, 255, 255
yellowGelb#FFFF00255, 255, 0

Alle 148 CSS-Farben (Liste)

NameHEXRGB
aliceblue#F0F8FF240, 248, 255
antiquewhite#FAEBD7250, 235, 215
aqua#00FFFF0, 255, 255
aquamarine#7FFFD4127, 255, 212
azure#F0FFFF240, 255, 255
beige#F5F5DC245, 245, 220
bisque#FFE4C4255, 228, 196
black#0000000, 0, 0
blanchedalmond#FFEBCD255, 235, 205
blue#0000FF0, 0, 255
blueviolet#8A2BE2138, 43, 226
brown#A52A2A165, 42, 42
burlywood#DEB887222, 184, 135
cadetblue#5F9EA095, 158, 160
chartreuse#7FFF00127, 255, 0
chocolate#D2691E210, 105, 30
coral#FF7F50255, 127, 80
cornflowerblue#6495ED100, 149, 237
cornsilk#FFF8DC255, 248, 220
crimson#DC143C220, 20, 60
cyan#00FFFF0, 255, 255
darkblue#00008B0, 0, 139
darkcyan#008B8B0, 139, 139
darkgoldenrod#B8860B184, 134, 11
darkgray#A9A9A9169, 169, 169
darkgreen#0064000, 100, 0
darkgrey#A9A9A9169, 169, 169
darkkhaki#BDB76B189, 183, 107
darkmagenta#8B008B139, 0, 139
darkolivegreen#556B2F85, 107, 47
darkorange#FF8C00255, 140, 0
darkorchid#9932CC153, 50, 204
darkred#8B0000139, 0, 0
darksalmon#E9967A233, 150, 122
darkseagreen#8FBC8F143, 188, 143
darkslateblue#483D8B72, 61, 139
darkslategray#2F4F4F47, 79, 79
darkslategrey#2F4F4F47, 79, 79
darkturquoise#00CED10, 206, 209
darkviolet#9400D3148, 0, 211
deeppink#FF1493255, 20, 147
deepskyblue#00BFFF0, 191, 255
dimgray#696969105, 105, 105
dimgrey#696969105, 105, 105
dodgerblue#1E90FF30, 144, 255
firebrick#B22222178, 34, 34
floralwhite#FFFAF0255, 250, 240
forestgreen#228B2234, 139, 34
fuchsia#FF00FF255, 0, 255
gainsboro#DCDCDC220, 220, 220
ghostwhite#F8F8FF248, 248, 255
gold#FFD700255, 215, 0
goldenrod#DAA520218, 165, 32
gray#808080128, 128, 128
green#0080000, 128, 0
greenyellow#ADFF2F173, 255, 47
grey#808080128, 128, 128
honeydew#F0FFF0240, 255, 240
hotpink#FF69B4255, 105, 180
indianred#CD5C5C205, 92, 92
indigo#4B008275, 0, 130
ivory#FFFFF0255, 255, 240
khaki#F0E68C240, 230, 140
lavender#E6E6FA230, 230, 250
lavenderblush#FFF0F5255, 240, 245
lawngreen#7CFC00124, 252, 0
lemonchiffon#FFFACD255, 250, 205
lightblue#ADD8E6173, 216, 230
lightcoral#F08080240, 128, 128
lightcyan#E0FFFF224, 255, 255
lightgoldenrodyellow#FAFAD2250, 250, 210
lightgray#D3D3D3211, 211, 211
lightgreen#90EE90144, 238, 144
lightgrey#D3D3D3211, 211, 211
lightpink#FFB6C1255, 182, 193
lightsalmon#FFA07A255, 160, 122
lightseagreen#20B2AA32, 178, 170
lightskyblue#87CEFA135, 206, 250
lightslategray#778899119, 136, 153
lightslategrey#778899119, 136, 153
lightsteelblue#B0C4DE176, 196, 222
lightyellow#FFFFE0255, 255, 224
lime#00FF000, 255, 0
limegreen#32CD3250, 205, 50
linen#FAF0E6250, 240, 230
magenta#FF00FF255, 0, 255
maroon#800000128, 0, 0
mediumaquamarine#66CDAA102, 205, 170
mediumblue#0000CD0, 0, 205
mediumorchid#BA55D3186, 85, 211
mediumpurple#9370DB147, 112, 219
mediumseagreen#3CB37160, 179, 113
mediumslateblue#7B68EE123, 104, 238
mediumspringgreen#00FA9A0, 250, 154
mediumturquoise#48D1CC72, 209, 204
mediumvioletred#C71585199, 21, 133
midnightblue#19197025, 25, 112
mintcream#F5FFFA245, 255, 250
mistyrose#FFE4E1255, 228, 225
moccasin#FFE4B5255, 228, 181
navajowhite#FFDEAD255, 222, 173
navy#0000800, 0, 128
oldlace#FDF5E6253, 245, 230
olive#808000128, 128, 0
olivedrab#6B8E23107, 142, 35
orange#FFA500255, 165, 0
orangered#FF4500255, 69, 0
orchid#DA70D6218, 112, 214
palegoldenrod#EEE8AA238, 232, 170
palegreen#98FB98152, 251, 152
paleturquoise#AFEEEE175, 238, 238
palevioletred#DB7093219, 112, 147
papayawhip#FFEFD5255, 239, 213
peachpuff#FFDAB9255, 218, 185
peru#CD853F205, 133, 63
pink#FFC0CB255, 192, 203
plum#DDA0DD221, 160, 221
powderblue#B0E0E6176, 224, 230
purple#800080128, 0, 128
rebeccapurple#663399102, 51, 153
red#FF0000255, 0, 0
rosybrown#BC8F8F188, 143, 143
royalblue#4169E165, 105, 225
saddlebrown#8B4513139, 69, 19
salmon#FA8072250, 128, 114
sandybrown#F4A460244, 164, 96
seagreen#2E8B5746, 139, 87
seashell#FFF5EE255, 245, 238
sienna#A0522D160, 82, 45
silver#C0C0C0192, 192, 192
skyblue#87CEEB135, 206, 235
slateblue#6A5ACD106, 90, 205
slategray#708090112, 128, 144
slategrey#708090112, 128, 144
snow#FFFAFA255, 250, 250
springgreen#00FF7F0, 255, 127
steelblue#4682B470, 130, 180
tan#D2B48C210, 180, 140
teal#0080800, 128, 128
thistle#D8BFD8216, 191, 216
tomato#FF6347255, 99, 71
turquoise#40E0D064, 224, 208
violet#EE82EE238, 130, 238
wheat#F5DEB3245, 222, 179
white#FFFFFF255, 255, 255
whitesmoke#F5F5F5245, 245, 245
yellow#FFFF00255, 255, 0
yellowgreen#9ACD32154, 205, 50

Tipps zur Farbwahl

  • Verwende Farbnamen vor allem in Prototypen und Beispielen; für Markenfarben sind genaue Hex-Werte besser.
  • Prüfe Text-/Hintergrundkombinationen auf Kontrast (mind. 4,5:1) – nicht jede Farbe aus der Liste ist als Textfarbe geeignet.
  • „Web-safe“-Farben (216 Farben) sind ein Relikt aus Zeiten mit 256-Farben-Monitoren und heute unbedeutend.
  • Mit dem Farbcode-Umrechner wandelst du jede Farbe in HSL, HSV oder CMYK um.

Wofür du die HTML-Farben-Tabelle brauchst

Die Tabelle ist das Nachschlagewerk, wenn im Code ein Farbname stehen soll und der passende gerade nicht einfällt. Du schreibst eine CSS-Klasse, willst keinen Hexwert hineinschreiben, und findest über die Suche nach Farbton oder Helligkeit einen Namen wie cadetblue oder thistle, dessen Wert du mit einem Umschalt-Klick mitkopierst. Wer eine hellere Variante seiner Hintergrundfarbe sucht, sortiert nach Helligkeit und arbeitet sich von unten nach oben durch, statt zwanzig Werte im Farbwähler auszuprobieren.

Auch in der Zusammenarbeit hilft die Liste: Statt einem Kollegen „das etwas dunklere Blau“ zu schicken, nennst du den Namen samt HEX-Wert, der in jeder CSS-Datei gleich aussieht. Für Anleitungen, Tutorials und Unterrichtsmaterial sind die Namen lesbarer als Zahlenfolgen, und die deutsche Entsprechung steht in Klammern daneben. Den passenden Namen zu einem konkreten Code liefert der Farbnamen-Finder.

Mögliche Fehler und schnelle Lösungen

  • Die Suche meldet „Keine Treffer.“ – Ursache: Der Begriff war zu lang oder in einer Form, die die Tabelle nicht abgleicht. Fix: Einen Teilstück suchen, etwa coral statt coralpink, oder den Code mit Raute eingeben.
  • Ein Klick kopiert den Namen, du wolltest den Code – Ursache: Der normale Klick übernimmt den Farbnamen, wie die Zeile unter der Suche anzeigt. Fix: Umschalt-Klick ausführen, dann steht der HEX-Wert in der Zwischenablage.
  • Nach „Nach Farbton“ stehen graue Töne am Ende – Ursache: Fast farblose Töne besitzen keinen Farbton und werden deshalb ans Ende gesetzt. Fix: Grautöne über die Suche holen, nicht über die Reihenfolge.
  • Die Sortierung „Nach Helligkeit“ zeigt nur dunkle Farben – Ursache: Sie ordnet aufsteigend, also von dunkel nach hell. Fix: Zum Ende der Liste scrollen für die hellsten Töne.
  • Bei einer Farbe fehlt die deutsche Bezeichnung – Ursache: Nicht jede der 148 Farben hat eine gebräuchliche deutsche Entsprechung. Fix: Den englischen Namen verwenden, er gilt in HTML und CSS genauso.

Für wen sich die Tabelle lohnt

Zuerst nutzen sie Einsteigerinnen und Einsteiger, die HTML und CSS lernen und Farbnamen lieber lesen als Zahlenfolgen zerlegen. Aber auch erfahrene Frontend-Entwickler greifen zur Liste, wenn sie in fremden Codes auf einen Namen treffen und den zugehörigen Wert suchen. Redaktionen sowie Dozentinnen brauchen die Bezeichnungen, wenn sie in Beschreibungen und Unterlagen verständliche Farbbegriffe verwenden wollen; wer ein Farbsystem durchgeht, sortiert nach Farbton und sieht den Kreis in einer Reihe.

Die Tabelle ist ein Nachschlagewerk, kein Gestaltungswerkzeug: Sie berechnet weder Kontraste noch Harmonien. Für die Prüfung einer Kombination gehst du zum Kontrast-Checker, für die Umrechnung eines Codes in CMYK oder HSL zum Farbcode-Umrechner.

Datenschutz & Prüfung: Dieses Tool arbeitet vollständig lokal in deinem Browser – Eingaben und Dateien werden nicht hochgeladen oder gespeichert. Funktion geprüft: Oktober 2026.

Passende Tools

Design

Farbcode-Umrechner (HEX, RGB, HSL, CMYK)

Farben umrechnen: HEX, RGB, HSL, HSV und CMYK – mit Farbwähler, Namen und Kontrastwerten.

Zum Tool Design

Kontrast-Checker (WCAG)

Farbkontrast nach WCAG prüfen: Kontrastverhältnis, AA/AAA für Text und UI-Elemente – mit Verbesserungsvorschlag.

Zum Tool Design

Farbnamen-Finder

Zu einer Farbe den passenden Namen finden: nächster CSS-Farbname und deutsche Farbbezeichnung.

Zum Tool

Häufige Fragen

Wie viele HTML-Farbnamen gibt es?

148 benannte Farben in CSS (einschließlich rebeccapurple und Doppelnamen wie gray/grey), dazu die Schlüsselwörter transparent und currentcolor.

Was ist der HEX-Code von Rot?

#FF0000 – Rot voll, Grün und Blau null. Blau ist #0000FF und Grün (lime) #00FF00; das CSS-„green“ ist dunkler (#008000).

Warum ist „green“ dunkler als „lime“?

Historisch: In CSS steht green für #008000, das reine Grün heißt lime (#00FF00).

Was ist rebeccapurple?

Eine 2014 ergänzte Farbe (#663399), benannt zum Gedenken an Rebecca Meyer, die Tochter des CSS-Experten Eric Meyer.

Kann ich die Farben in Word oder Photoshop verwenden?

Ja, über den HEX- oder RGB-Wert. Die Namen selbst gelten nur in HTML und CSS.

Werden Suchanfragen gespeichert?

Nein, alles läuft lokal.

Alle Tools an einem Ort

Über 100 Rechner für Alltag, Mathematik, Finanzen und mehr – kostenlos, ohne Anmeldung und mit sichtbarem Rechenweg.

Alle Tools ansehen Alle Kategorien