HTML-Farben
HTML-Farben mit Farbnamen, Hex-Codes (#RRGGBB, #RGB, #RRGGBBAA), rgb()/rgba() und hsl()/hsla() festlegen. Beispiele, Farbnamenstabelle und Kontrast-Tipps.
Farben in HTML werden mit CSS angewendet, entweder inline über das style-Attribut oder in einem Stylesheet. Farben werden nie direkt in HTML gesetzt — stattdessen wird eine CSS-Eigenschaft wie color (Textfarbe), background-color oder border-color verwendet und ihr ein Farbwert zugewiesen. Diese Seite behandelt alle Farbwertformate, die zur Verfügung stehen:
- Benannte Farben — Schlüsselwörter wie
red,tomatooderrebeccapurple. - Hexadezimal —
#RRGGBB, die Kurzform#RGBund das 8-stellige#RRGGBBAA(mit Alpha). rgb()/rgba()— Rot-, Grün- und Blaukanal (plus optionale Deckkraft).hsl()/hsla()— Farbton, Sättigung, Helligkeit (plus optionale Deckkraft).
Alle diese Formate sind austauschbar: #FF0000, red, rgb(255, 0, 0) und hsl(0, 100%, 50%) beschreiben alle dasselbe reine Rot. Für eine ausführlichere Referenz auf der CSS-Seite, siehe die Kapitel CSS color und CSS background-color.
Hex-Farbcodes
Ein Hex-Farbcode ist ein Hex-Triplet, das drei separate Werte darstellt, die die Intensität der Komponentenfarben definieren. Er wird in hexadezimaler (Hex-)Notation für eine Mischung aus Rot-, Grün- und Blau-Farbwerten angegeben. Der niedrigste Wert, der einer der Lichtquellen zugewiesen werden kann, ist 0 (Hex 00). Der höchste Wert ist 255 (Hex FF).
Hex-Werte werden als sechsstellige Zahlen geschrieben und beginnen mit einem #-Zeichen. Buchstaben in einer hexadezimalen Ziffer können groß- oder kleingeschrieben werden. Um beispielsweise die Farbe Weiß anzugeben, kann man #FFFFFF oder #ffffff schreiben.
Es gibt zwei weitere Hex-Formen, die es wert sind, gekannt zu werden:
- Kurzform
#RGB— wenn jeder Kanal ein wiederholtes Paar verwendet, kann er zusammengefasst werden.#FF0000wird zu#F00, und#FFCC00wird zu#FC0. Der Browser erweitert jede Ziffer durch Verdopplung. - 8-stelliges
#RRGGBBAA— fügt ein abschließendes Paar für den Alpha-Kanal (Deckkraft) hinzu, von00(vollständig transparent) bisFF(vollständig undurchsichtig). Beispielsweise ist#1c87c980das Blau#1c87c9bei ungefähr 50% Deckkraft.
Um einem Textelement eine Farbe hinzuzufügen, verwenden Sie das style-Attribut (wobei die color-Eigenschaft Ihr Hex-Code ist) oder entsprechende CSS-Eigenschaften wie color: oder background-color:.
Beispiel der background-color-Eigenschaft mit dem „hex"-Wert:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #1c87c9;
color: #d5dce8;
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This is a text in grey, and the background is blue</p>
</div>
<p style="color:#8ebf42;"> This is a text in green</p>
</body>
</html>Ergebnis
Sie können unser Color Picker-Werkzeug verwenden, um Millionen von Farben zu durchsuchen und ihre Hex-, RGB- und HSL-Werte zu kopieren.
HTML-Farbnamen
Um das Textelement mit einem HTML-Farbnamen einzufärben, geben Sie den Namen der Farbe (zum Beispiel blue) anstelle des Hex-Codes aus dem vorherigen Schritt ein.
Beispiel der color-Eigenschaft mit dem „Farbname"-Wert:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: blue;
color: white;
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This is a text in grey, and the background is blue</p>
</div>
<p style="color:blue;"> This is a text in blue</p>
</body>
</html>RGB-Farbwerte
Ein rgb()-Wert mischt roten, grünen und blauen Kanal, jeweils von 0 bis 255 — genau dasselbe Modell wie Hex, aber in Dezimalschreibweise. rgb(255, 0, 0) ist Rot, rgb(0, 0, 0) ist Schwarz und rgb(255, 255, 255) ist Weiß.
Um einem Textelement eine Farbe hinzuzufügen, verwenden Sie das style-Attribut (wobei die color-Eigenschaft Ihr RGB-Wert ist) oder entsprechende CSS-Eigenschaften.
Beispiel der background-color-Eigenschaft mit dem „RGB"-Wert:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color:rgb(25,25,112);
color: rgb(169,169,169);
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This is a text in grey, and the background is blue</p>
</div>
<p style="color:rgb(25,25,112);"> This is a text in blue</p>
</body>
</html>RGBA: Deckkraft hinzufügen
rgba() erweitert rgb() um einen vierten Wert, den Alpha-Kanal, der die Deckkraft von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig) steuert. Dies ist nützlich für getönte Überlagerungen oder halbtransparente Hintergründe, bei denen die darunter liegende Ebene durchscheinen soll.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: rgba(25, 25, 112, 0.5);
color: rgb(33, 33, 33);
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This box uses a semi-transparent navy background</p>
</div>
</body>
</html>Im modernen CSS ist rgb(25 25 112 / 50%) die äquivalente leerzeichengetrennte Syntax, und das 8-stellige Hex #19197080 erfüllt dieselbe Aufgabe.
HSL- und HSLA-Farbwerte
hsl() beschreibt eine Farbe so, wie viele Designer über sie nachdenken — durch Farbton (hue), Sättigung (saturation) und Helligkeit (lightness) — was es einfach macht, eine Familie verwandter Farbtöne durch Anpassen eines einzigen Werts zu erstellen.
- Farbton ist ein Winkel auf dem Farbrad von
0bis360:0(und360) ist Rot,120ist Grün,240ist Blau. - Sättigung ist ein Prozentwert:
0%ist Grau,100%ist die lebendigste Version des Farbtons. - Helligkeit ist ein Prozentwert:
0%ist Schwarz,50%ist die „normale" Farbe,100%ist Weiß.
hsla() fügt einen Alpha-Kanal für die Deckkraft hinzu, genau wie rgba().
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.solid {
background-color: hsl(210, 79%, 46%);
color: white;
padding: 22px;
}
.faded {
background-color: hsla(210, 79%, 46%, 0.4);
padding: 22px;
}
</style>
</head>
<body>
<div class="solid"><p>hsl background</p></div>
<div class="faded"><p>hsla background with 40% opacity</p></div>
</body>
</html>Da Helligkeit und Sättigung unabhängig vom Farbton sind, eignet sich HSL hervorragend zum Erstellen von Hover- oder „dunkleren/helleren" Varianten einer Markenfarbe: Farbton beibehalten, Helligkeit verringern.
Farbe und Barrierefreiheit
Farbe betrifft auch die Lesbarkeit. Die Web Content Accessibility Guidelines (WCAG) erfordern ein Kontrastverhältnis von mindestens:
- 4,5:1 für normalen Fließtext gegenüber seinem Hintergrund (AA-Stufe).
- 3:1 für großen Text (etwa 18pt / 24px oder 14pt / 19px fett) sowie für UI-Komponenten und Grafiken.
Zwei Konsequenzen, die es wert sind, beachtet zu werden:
- Verlassen Sie sich niemals allein auf Farbe, um Informationen zu vermitteln — markieren Sie beispielsweise Pflichtfelder oder Fehlerzustände in Formularen zusätzlich mit Text oder einem Symbol, damit farbenblinde Nutzer und Screenreader-Nutzer nicht ausgeschlossen werden.
- Überprüfen Sie Ihre Kombinationen. Ein helles Grau auf Weiß mag elegant aussehen, erfüllt aber möglicherweise nicht das Mindestkontrastverhältnis von 4,5:1. Verwenden Sie unseren Color Contrast Checker, um ein Vordergrund-/Hintergrundpaar zu testen, bevor Sie es einsetzen.
Die 216-Farben-„websichere" Palette, die ältere Anleitungen aufführen (Farben, die nur aus den Hex-Paaren
00,33,66,99,CC,FFbestehen), war ein Workaround für Displays, die auf 256 Farben beschränkt waren. Moderne Bildschirme stellen Millionen von Farben dar, sodass diese Palette veraltet ist und Sie jeden Wert wählen sollten, der zu Ihrem Design passt.
Liste der HTML-Farbnamen:
Hier ist eine Liste einiger der Standard-HTML-Farbnamen:
| Farbname | Hexadezimalwert |
|---|---|
| AliceBlue | #F0F8FF |
| AntiqueWhite | #FAEBD7 |
| Aqua | #00FFFF |
| Aquamarine | #7FFFD4 |
| Azure | #F0FFFF |
| Beige | #F5F5DC |
| Bisque | #FFE4C4 |
| Black | #000000 |
| BlanchedAlmond | #FFEBCD |
| Blue | #0000FF |
| BlueViolet | #8A2BE2 |
| Brown | #A52A2A |
| BurlyWood | #DEB887 |
| CadetBlue | #5F9EA0 |
| Chartreuse | #7FFF00 |
| Chocolate | #D2691E |
| Coral | #FF7F50 |
| CornflowerBlue | #6495ED |
| Cornsilk | #FFF8DC |
| Crimson | #DC143C |
| Cyan | #00FFFF |
| DarkBlue | #00008B |
| DarkCyan | #008B8B |
| DarkGoldenRod | #B8860B |
| DarkGray | #A9A9A9 |
| DarkGrey | #A9A9A9 |
| DarkGreen | #006400 |
| DarkKhaki | #BDB76B |
| DarkMagenta | #8B008B |
| DarkOliveGreen | #556B2F |
| DarkOrange | #FF8C00 |
| DarkOrchid | #9932CC |
| DarkRed | #8B0000 |
| DarkSalmon | #E9967A |
| DarkSeaGreen | #8FBC8F |
| DarkSlateBlue | #483D8B |
| DarkSlateGray | #2F4F4F |
| DarkSlateGrey | #2F4F4F |
| DarkTurquoise | #00CED1 |
| DarkViolet | #9400D3 |
| DeepPink | #FF1493 |
| DeepSkyBlue | #00BFFF |
| DimGray | #696969 |
| DimGrey | #696969 |
| DodgerBlue | #1E90FF |
| FireBrick | #B22222 |
| FloralWhite | #FFFAF0 |
| ForestGreen | #228B22 |
| Fuchsia | #FF00FF |
| Gainsboro | #DCDCDC |
| GhostWhite | #F8F8FF |
| Gold | #FFD700 |
| GoldenRod | #DAA520 |
| Gray | #808080 |
| Grey | #808080 |
| Green | #008000 |
| GreenYellow | #ADFF2F |
| HoneyDew | #F0FFF0 |
| HotPink | #FF69B4 |
| IndianRed | #CD5C5C |
| Indigo | #4B0082 |
| Ivory | #FFFFF0 |
| Khaki | #F0E68C |
| Lavender | #E6E6FA |
| LavenderBlush | #FFF0F5 |
| LawnGreen | #7CFC00 |
| LemonChiffon | #FFFACD |
| LightBlue | #ADD8E6 |
| LightCoral | #F08080 |
| LightCyan | #E0FFFF |
| LightGoldenRodYellow | #FAFAD2 |
| LightGray | #D3D3D3 |
| LightGrey | #D3D3D3 |
| LightGreen | #90EE90 |
| LightPink | #FFB6C1 |
| LightSalmon | #FFA07A |
| LightSeaGreen | #20B2AA |
| LightSkyBlue | #87CEFA |
| LightSlateGray | #778899 |
| LightSlateGrey | #778899 |
| LightSteelBlue | #B0C4DE |
| LightYellow | #FFFFE0 |
| Lime | #00FF00 |
| LimeGreen | #32CD32 |
| Linen | #FAF0E6 |
| Magenta | #FF00FF |
| Maroon | #800000 |
| MediumAquaMarine | #66CDAA |
| MediumBlue | #0000CD |
| MediumOrchid | #BA55D3 |
| MediumPurple | #9370DB |
| MediumSeaGreen | #3CB371 |
| MediumSlateBlue | #7B68EE |
| MediumSpringGreen | #00FA9A |
| MediumTurquoise | #48D1CC |
| MediumVioletRed | #C71585 |
| MidnightBlue | #191970 |
| MintCream | #F5FFFA |
| MistyRose | #FFE4E1 |
| Moccasin | #FFE4B5 |
| NavajoWhite | #FFDEAD |
| Navy | #000080 |
| OldLace | #FDF5E6 |
| Olive | #808000 |
| OliveDrab | #6B8E23 |
| Orange | #FFA500 |
| OrangeRed | #FF4500 |
| Orchid | #DA70D6 |
| PaleGoldenRod | #EEE8AA |
| PaleGreen | #98FB98 |
| PaleTurquoise | #AFEEEE |
| PaleVioletRed | #DB7093 |
| PapayaWhip | #FFEFD5 |
| PeachPuff | #FFDAB9 |
| Peru | #CD853F |
| Pink | #FFC0CB |
| Plum | #DDA0DD |
| PowderBlue | #B0E0E6 |
| Purple | #800080 |
| Red | #FF0000 |
| RosyBrown | #BC8F8F |
| RoyalBlue | #4169E1 |
| SaddleBrown | #8B4513 |
| Salmon | #FA8072 |
| SandyBrown | #F4A460 |
| SeaGreen | #2E8B57 |
| SeaShell | #FFF5EE |
| Sienna | #A0522D |
| Silver | #C0C0C0 |
| SkyBlue | #87CEEB |
| SlateBlue | #6A5ACD |
| SlateGray | #708090 |
| SlateGrey | #708090 |
| Snow | #FFFAFA |
| SpringGreen | #00FF7F |
| SteelBlue | #4682B4 |
| Tan | #D2B48C |
| Teal | #008080 |
| Thistle | #D8BFD8 |
| Tomato | #FF6347 |
| Turquoise | #40E0D0 |
| Violet | #EE82EE |
| Wheat | #F5DEB3 |
| White | #FFFFFF |
| WhiteSmoke | #F5F5F5 |
| Yellow | #FFFF00 |
| YellowGreen | #9ACD32 |
Diese Farbnamen können in HTML- und CSS-Code verwendet werden, um die Farbe von Text, Hintergründen, Rahmen und anderen Elementen festzulegen. Für eine tiefergehende Betrachtung der CSS-Seite lesen Sie die Kapitel CSS color, CSS background-color und CSS-Farbnamen.