Diese HTML Farbtabelle ist eine schnelle Referenz für alle, die an Websites, Shopify Themes, Landing Pages, E Mail Templates oder Design Systemen arbeiten. Sie zeigt die gebräuchlichen englischen Farbnamen, die passenden Hexwerte und deutsche Farbnamen.
Wichtig für die Praxis: In modernem CSS kann man viele Farben direkt mit dem englischen Namen schreiben. Trotzdem sind Hexwerte meistens sauberer, weil sie eindeutiger, besser dokumentierbar und in Design Tools leichter wiederzufinden sind.
Das Wichtigste in Kürze
| Thema | Empfehlung |
|---|---|
| HTML Farbname | Für schnelle Tests geeignet, etwa red, black, white oder gold. |
| Hexwert | Für produktive Websites meistens die bessere Wahl, etwa #E30613. |
| RGB und HSL | Sinnvoll, wenn Transparenz, Zustände oder systematische Abstufungen gebaut werden. |
| Shopify Themes | Farben zentral in Theme Settings, CSS Variablen oder Design Tokens pflegen. |
| Barrierefreiheit | Kontrast immer prüfen, besonders bei Text auf farbigem Hintergrund. |
HTML Farbtabelle
| Farbe | Englischer Farbname | Hexwert | Deutscher Farbname |
|---|---|---|---|
| Black | #000000 |
Schwarz | |
| DarkSlateGray | #2F4F4F |
Dunkles Schiefergrau | |
| SlateGray | #708090 |
Schiefergrau | |
| LightSlateGray | #778899 |
Helles Schiefergrau | |
| LightSteelBlue | #B0C4DE |
Helles Stahlblau | |
| DimGray | #696969 |
Mattes Grau | |
| Gray | #808080 |
Grau | |
| DarkGray | #A9A9A9 |
Dunkelgrau | |
| Silver | #C0C0C0 |
Silber | |
| LightGray | #D3D3D3 |
Hellgrau | |
| Gainsboro | #DCDCDC |
Gainsboro Grau | |
| White | #FFFFFF |
Weiß | |
| Maroon | #800000 |
Kastanienbraun | |
| DarkRed | #8B0000 |
Dunkelrot | |
| FireBrick | #B22222 |
Ziegelrot | |
| Crimson | #DC143C |
Karmesinrot | |
| Red | #FF0000 |
Rot | |
| Tomato | #FF6347 |
Tomatenrot | |
| Coral | #FF7F50 |
Koralle | |
| IndianRed | #CD5C5C |
Indischrot | |
| LightCoral | #F08080 |
Helles Korallenrot | |
| DarkSalmon | #E9967A |
Dunkles Lachsrosa | |
| Salmon | #FA8072 |
Lachsrosa | |
| LightSalmon | #FFA07A |
Helles Lachsrosa | |
| OrangeRed | #FF4500 |
Orangerot | |
| DarkOrange | #FF8C00 |
Dunkelorange | |
| Orange | #FFA500 |
Orange | |
| Gold | #FFD700 |
Gold | |
| Yellow | #FFFF00 |
Gelb | |
| LemonChiffon | #FFFACD |
Zitronenchiffon | |
| LightGoldenrodYellow | #FAFAD2 |
Helles Goldgelb | |
| PapayaWhip | #FFEFD5 |
Papayacreme | |
| Moccasin | #FFE4B5 |
Mokassin | |
| PeachPuff | #FFDAB9 |
Pfirsich | |
| PaleGoldenrod | #EEE8AA |
Blasses Goldgelb | |
| Khaki | #F0E68C |
Khaki | |
| DarkKhaki | #BDB76B |
Dunkelkhaki | |
| Purple | #800080 |
Purpur | |
| Indigo | #4B0082 |
Indigo | |
| BlueViolet | #8A2BE2 |
Blauviolett | |
| DarkViolet | #9400D3 |
Dunkelviolett | |
| DarkOrchid | #9932CC |
Dunkle Orchidee | |
| MediumOrchid | #BA55D3 |
Mittlere Orchidee | |
| Orchid | #DA70D6 |
Orchidee | |
| Violet | #EE82EE |
Violett | |
| Plum | #DDA0DD |
Pflaume | |
| Pink | #FFC0CB |
Rosa | |
| LightPink | #FFB6C1 |
Hellrosa | |
| HotPink | #FF69B4 |
Knallrosa | |
| DeepPink | #FF1493 |
Tiefrosa | |
| MediumVioletRed | #C71585 |
Mittleres Violettrot | |
| Green | #008000 |
Grün | |
| DarkGreen | #006400 |
Dunkelgrün | |
| ForestGreen | #228B22 |
Waldgrün | |
| LimeGreen | #32CD32 |
Lindgrün | |
| Lime | #00FF00 |
Limettengrün | |
| LawnGreen | #7CFC00 |
Rasengrün | |
| Chartreuse | #7FFF00 |
Chartreuse | |
| GreenYellow | #ADFF2F |
Grüngelb | |
| PaleGreen | #98FB98 |
Blassgrün | |
| LightGreen | #90EE90 |
Hellgrün | |
| DarkSeaGreen | #8FBC8F |
Dunkles Seegrün | |
| MediumSeaGreen | #3CB371 |
Mittleres Seegrün | |
| SeaGreen | #2E8B57 |
Seegrün | |
| Olive | #808000 |
Oliv | |
| DarkOliveGreen | #556B2F |
Dunkles Olivgrün | |
| OliveDrab | #6B8E23 |
Olivbraun | |
| Navy | #000080 |
Marineblau | |
| DarkBlue | #00008B |
Dunkelblau | |
| MediumBlue | #0000CD |
Mittelblau | |
| Blue | #0000FF |
Blau | |
| RoyalBlue | #4169E1 |
Königsblau | |
| SteelBlue | #4682B4 |
Stahlblau | |
| CadetBlue | #5F9EA0 |
Kadettenblau | |
| DarkTurquoise | #00CED1 |
Dunkeltürkis | |
| MediumTurquoise | #48D1CC |
Mitteltürkis | |
| Turquoise | #40E0D0 |
Türkis | |
| Cyan | #00FFFF |
Cyan | |
| LightCyan | #E0FFFF |
Hellcyan | |
| Azure | #F0FFFF |
Azur | |
| Beige | #F5F5DC |
Beige | |
| Bisque | #FFE4C4 |
Biskuit | |
| BurlyWood | #DEB887 |
Sandbraun | |
| Tan | #D2B48C |
Hellbraun | |
| RosyBrown | #BC8F8F |
Rosenbraun | |
| Brown | #A52A2A |
Braun | |
| SaddleBrown | #8B4513 |
Sattelbraun | |
| Chocolate | #D2691E |
Schokolade | |
| Peru | #CD853F |
Peru Braun | |
| SandyBrown | #F4A460 |
Sandbraun |
Hexwert, Farbname oder CSS Variable?
Für schnelle Prototypen sind englische Farbnamen praktisch. In einem produktiven Shopify Theme sollten Farben aber zentral gepflegt werden. Der beste Weg ist meistens eine Kombination aus Theme Settings und CSS Variablen.
:root {
--color-brand: #E30613;
--color-ink: #14140F;
--color-sand: #F5F2EA;
}
.button-primary {
background: var(--color-brand);
color: #FFFFFF;
}
Der Vorteil: Wenn sich die Markenfarbe ändert, muss nicht jede einzelne Komponente angefasst werden. Ein Design System bleibt konsistent, Landing Pages driften nicht auseinander und die Pflege im Theme wird leichter.
Worauf Shopify Händler achten sollten
In Shopify entstehen Farbprobleme oft nicht im Code, sondern in der Pflege. Ein Hero Banner nutzt ein Rot aus dem Brand Manual, der Button ein anderes Rot aus einer App, ein Pop up ein drittes Rot aus dem Theme Editor. Nach einigen Monaten sieht ein Shop nicht mehr wie ein System aus, sondern wie eine Sammlung aus Einzelentscheidungen.
Für Shopify Themes gelten deshalb drei einfache Regeln:
| Regel | Warum sie wichtig ist |
|---|---|
| Farbwerte zentralisieren | Brand Farben, Textfarben, Border und Flächenfarben gehören in Theme Settings oder CSS Variablen. |
| Semantisch benennen | --color-success ist besser als --green, weil die Funktion wichtiger ist als die Farbe. |
| Kontrast testen | Gerade Sale Badges, Trust Elemente und Produkt Labels müssen auch mobil lesbar bleiben. |
Kontrast ist kein Design Detail
Farben sind nicht nur Branding. Farben entscheiden, ob ein Text lesbar ist, ob ein Button erkannt wird und ob ein Shop barrierearm funktioniert. Für normale Texte sollte der Kontrast mindestens 4,5 zu 1 betragen. Für große Texte reichen 3 zu 1. Buttons, Badges und Formular Hinweise sollten zusätzlich im echten mobilen Layout geprüft werden.
Ein häufiger Fehler: Weißer Text auf hellem Bild, rote Schrift auf rosa Fläche, graue Microcopy auf beigem Hintergrund. Das sieht im Figma Entwurf oft elegant aus, fällt aber auf einem älteren Smartphone Display sofort auseinander.
Praktische Farbgruppen für Webdesign
| Zweck | Typische Werte |
|---|---|
| Primärer Text | #111111, #14140F, #1F2937 |
| Sekundärer Text | #52525A, #6B7280, #71717A |
| Hintergrund hell | #FFFFFF, #FAFAFA, #F5F2EA |
| Border | #E4E4E7, #D8D6D1, #E5E7EB |
| Fehler | #B91C1C, #DC2626, #E30613 |
| Erfolg | #15803D, #16A34A, #22C55E |
| Warnung | #B45309, #F59E0B, #FBBF24 |
FAQ
Was ist ein Hexwert?
Ein Hexwert ist eine sechsstellige Farbangabe für CSS und HTML. #000000 steht für Schwarz, #FFFFFF für Weiß, #FF0000 für Rot. Die ersten zwei Zeichen stehen für Rot, die nächsten zwei für Grün, die letzten zwei für Blau.
Kann man HTML Farbnamen direkt in CSS nutzen?
Ja. CSS unterstützt viele englische Farbnamen wie black, white, red, blue, gold, tomato oder royalblue. Für produktive Websites sind Hexwerte oder CSS Variablen aber meistens besser, weil sie exakter und leichter zu dokumentieren sind.
Welche Farben sind für Buttons am besten?
Buttons sollten sich klar vom Hintergrund abheben und genug Kontrast zum Button Text haben. Wichtiger als die konkrete Farbe ist die Rolle im System: Primary Button, Secondary Button, Fehler, Erfolg und Warnung sollten jeweils eindeutig unterscheidbar sein.
Warum ist die Farbtabelle für Shopify wichtig?
Shopify Shops werden oft über Theme Editor, Apps, Custom Liquid und Landing Page Builder gleichzeitig gepflegt. Eine zentrale Farblogik verhindert, dass Brand Farben auseinanderlaufen. Gerade bei D2C Marken wirkt ein konsistentes Farbsystem direkt auf Trust, Conversion Rate und Wiedererkennbarkeit.