Farbe/Farbangaben – SELFHTML-Wiki (2024)

15min
leicht
Grundkenntnisse in
  • HTML

Mit Farbangaben in HTML, CSS oder SVG kannst Du die Farbe der Füllung, aber auch der Konturlinie und der Textfarbe festlegen.

Dieses Tutorial ist für Anfänger gedacht, die bereits erste Schritte in HTML unternommen haben und nun auf der Suche nach „mehr Farben“ sind. Dabei werden in diesem Artikel die Farbnamen und andere Schlüsselwörter zur Farbangabe behandelt.

Fortgeschrittenen dienen die Tabelle der Farbnamen zur schnellen Übersicht.

Inhaltsverzeichnis

  • 1 Farbangaben
  • 2 Farbpaletten
    • 2.1 Die VGA-Palette (16 Farben)
    • 2.2 Farbnamen
      • 2.2.1 Farbnamen (alphabetisch)
    • 2.3 Systemfarben
  • 3 weitere Schlüsselwörter
    • 3.1 transparent
    • 3.2 currentColor
  • 4 Weblinks

Farbangaben

Farbangaben in CSS werden durch den <color>-Wertetyp repräsentiert.

  • Schlüsselwort
    • Farbname (red oder blue), Systemfarbe
    • transparent
    • currentColor, den gespeicherten Wert der Schriftfarbe color
  • sRGB-Farbraum
    • <hex-color>
    • <rgb()>-Funktion
    • <hsl()>-Funktion
  • CIELAB-Farbraum
    • lab()
    • lch()
  • OKLAB-Farbraum
    • oklab()
    • oklch()
  • andere Farbräume
    • color()
  • durch Mischen zweier Farben: color-mix()

Farbpaletten

In HTML, CSS oder SVG kannst Du mittlerweile nahezu unendlich viele verschiedene Farbtöne festlegen. Es gibt jedoch Standard-Paletten, die ganz bestimmte Farbwerte benutzen. Wenn keine gestalterischen Gründe dagegensprechen, bieten diese Paletten eine gewisse Orientierung.

Die VGA-Palette (16 Farben)

Die 16 Farben der VGA-Palette sind der kleinste gemeinsame Nenner aller (mittlerweile obsoleten) VGA-kompatiblen Grafikkarten und Bildschirme.

black grey
maroon red
green lime
olive yellow
navy blue
purple fuchsia
teal aqua
silver white
 h1 { background-color: green; color: white; } p { text-align: center; color: green; }

Information: Die Netscape-Palette (216 websichere Farben)

Das früher wegen seines geringen Speicherbedarfs beliebte GIF-Format verwendete für die Farbinformationen 8Bits pro Pixel, mit dem so aus den 16,7 Mio. möglichen Farben des RGB-Farbmodells maximal 256Farben gewählt und abgespeichert werden können.

Heute ist das angesichts nahezu unbegrenzter technischer Möglichkeiten nicht mehr wichtig.

Farbnamen

Dies ist eigentlich keine Farbpalette im engeren Sinn, sondern eine lose Sammlung von Farben mit bestimmten Farbwerten. Die Sammlung wurde seinerzeit von Netscape eingeführt, um zusätzlich zu der Palette mit den 216 Farben, die einem algorithmischen Schema folgen, noch ein paar vordefinierte Farbtöne für Zwischentöne und Pastellfarben anzubieten. Sie stammen zumeist aus dem X Windows System (X11), wo sie in den 1980ern definiert wurden.

Falls ein Namenskonflikt mit den VGA-Farben (siehe oben) auftrat, gab die W3C den VGA-Farben Vorrang.

Deshalb ist darkgray (aus X11) heller als gray (aus den VGA-Farben).

HTML-NameHexcode
R G B
Dezimalcode
R G B
Pink
Pink FFC0CB255192203
LightPink FFB6C1255182193
HotPink FF69B4255105180
DeepPink FF149325520147
PaleVioletRed DB7093219112147
MediumVioletRed C7158519921133
Rot
LightSalmon FFA07A255160122
Salmon FA8072250128114
DarkSalmon E9967A233150122
LightCoral F08080240128128
IndianRed CD5C5C2059292
Crimson DC143C2202060
FireBrick B222221783434
DarkRed 8B000013900
Red FF000025500
Orange
OrangeRed FF4500255690
Tomato FF63472559971
Coral FF7F5025512780
DarkOrange FF8C002551400
Orange FFA5002551650
Gelb
Yellow FFFF002552550
LightYellow FFFFE0255255224
LemonChiffon FFFACD255250205
LightGoldenrodYellowFAFAD2250250210
PapayaWhip FFEFD5255239213
Moccasin FFE4B5255228181
PeachPuff FFDAB9255218185
PaleGoldenrod EEE8AA238232170
Khaki F0E68C240230140
DarkKhaki BDB76B189183107
Gold FFD7002552150
Braun
Cornsilk FFF8DC255248220
BlanchedAlmond FFEBCD255235205
Bisque FFE4C4255228196
NavajoWhite FFDEAD255222173
Wheat F5DEB3245222179
BurlyWood DEB887222184135
Tan D2B48C210180140
RosyBrown BC8F8F188143143
SandyBrown F4A46024416496
Goldenrod DAA52021816532
DarkGoldenrod B8860B18413411
Peru CD853F20513363
Chocolate D2691E21010530
SaddleBrown 8B45131396919
Sienna A0522D1608245
Brown A52A2A1654242
Maroon 80000012800
HTML-NameHexcode
R G B
Dezimalcode
R G B
Grün
DarkOliveGreen 556B2F8510747
Olive 8080001281280
OliveDrab 6B8E2310714235
YellowGreen 9ACD3215420550
LimeGreen 32CD325020550
Lime 00FF0002550
LawnGreen 7CFC001242520
Chartreuse 7FFF001272550
GreenYellow ADFF2F17325547
SpringGreen 00FF7F0255127
MediumSpringGreen 00FA9A0250154
LightGreen 90EE90144238144
PaleGreen 98FB98152251152
DarkSeaGreen 8FBC8F143188143
MediumSeaGreen 3CB37160179113
SeaGreen 2E8B574613987
ForestGreen 228B223413934
Green 00800001280
DarkGreen 00640001000
Cyan
MediumAquamarine 66CDAA102205170
Aqua 00FFFF0255255
Cyan 00FFFF0255255
LightCyan E0FFFF224255255
PaleTurquoise AFEEEE175238238
Aquamarine 7FFFD4127255212
Turquoise 40E0D064224208
MediumTurquoise 48D1CC72209204
DarkTurquoise 00CED10206209
LightSeaGreen 20B2AA32178170
CadetBlue 5F9EA095158160
DarkCyan 008B8B0139139
Teal 0080800128128
Blau
LightSteelBlue B0C4DE176196222
PowderBlue B0E0E6176224230
LightBlue ADD8E6173216230
SkyBlue 87CEEB135206235
LightSkyBlue 87CEFA135206250
DeepSkyBlue 00BFFF0191255
DodgerBlue 1E90FF30144255
CornflowerBlue 6495ED100149237
SteelBlue 4682B470130180
RoyalBlue 4169E165105225
Blue 0000FF00255
MediumBlue 0000CD00205
DarkBlue 00008B00139
Navy 00008000128
MidnightBlue 1919702525112
HTML-NameHexcode
R G B
Dezimalcode
R G B
Violett
Lavender E6E6FA230230250
Thistle D8BFD8216191216
Plum DDA0DD221160221
Violet EE82EE238130238
Orchid DA70D6218112214
Fuchsia FF00FF2550255
Magenta FF00FF2550255
MediumOrchid BA55D318685211
MediumPurple 9370DB147112219
BlueViolet 8A2BE213843226
DarkViolet 9400D31480211
DarkOrchid 9932CC15350204
DarkMagenta 8B008B1390139
Purple 8000801280128
Indigo 4B0082750130
DarkSlateBlue 483D8B7261139
SlateBlue 6A5ACD10690205
MediumSlateBlue 7B68EE123104238
RebeccaPurple 66339910251153
Weiß
White FFFFFF255255255
Snow FFFAFA255250250
Honeydew F0FFF0240255240
MintCream F5FFFA245255250
Azure F0FFFF240255255
AliceBlue F0F8FF240248255
GhostWhite F8F8FF248248255
WhiteSmoke F5F5F5245245245
Seashell FFF5EE255245238
Beige F5F5DC245245220
OldLace FDF5E6253245230
FloralWhite FFFAF0255250240
Ivory FFFFF0255255240
AntiqueWhite FAEBD7250235215
Linen FAF0E6250240230
LavenderBlush FFF0F5255240245
MistyRose FFE4E1255228225
Grau/Schwarz
Gainsboro DCDCDC220220220
LightGray D3D3D3211211211
Silver C0C0C0192192192
DarkGray A9A9A9169169169
Gray 808080128128128
DimGray 696969105105105
LightSlateGray 778899119136153
SlateGray 708090112128144
DarkSlateGray 2F4F4F477979
Black 000000000


Alle grauen Farben können auch mit „e“ geschrieben werden, Gerüchten zufolge, weil sich die Menschen bei HP die richtige Schreibweise nicht merken konnten.[1][2]

2014 wurde eine neue Farbe hinzugefügt: rebeccapurple ist ein Andenken an Rebecca Alison Meyer, Tochter des CSS-Buch-Autoren Eric A. Meyer. Sie starb am 7. Juni 2014, ihrem sechsten Geburtstag, an einem Hirntumor.[3]

Farbnamen (alphabetisch)

NameHex-Schreibweise
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
darkgreen #006400
darkgrey* #A9A9A9
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
dodgerblue #1E90FF
firebrick #B22222
floralwhite #FFFAF0
forestgreen #228B22
fuchsia #FF00FF
NameHex-Schreibweise
gainsboro #DCDCDC
ghostwhite #F8F8FF
gold #FFD700
goldenrod #DAA520
gray* #808080
green #008000
greenyellow #ADFF2F
grey* #808080
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
lightgreen #90EE90
lightgrey #D3D3D3
lightpink #FFB6C1
lightsalmon #FFA07A
lightseagreen #20B2AA
lightskyblue #87CEFA
lightslategray #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
NameHex-Schreibweise
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
RebeccaPurple #663399
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

Beachten Sie: bei gray, lightgray, darkgray und darkslategray sind sowohl die Schreibweisen gray als auch grey möglich.

Systemfarben

In CSS 2 wurde das Konzept der Systemfarben eingeführt. Dabei handelte es sich um 28 Schlüsselwörter, die die Farben wiedergeben sollen, die auch das Betriebssystem zur Darstellung von Fenstern, Text und Schaltflächen verwendet.[4]

Im CSS Color Module Level 4 wurden diese Systemfarben auf 12 reduziert:

BeispielSchlüsselwortFarbe, die wiedergegeben wird
ActiveTextRahmenfarbe aktiver Links.
ButtonFaceOberfläche von Schaltflächen und Fenstern.
ButtonTextText von Schaltflächen.
CanvasHintergrund
CanvasText Textfarbe von Anwendungen und Dokumentinhalten
Field Hintergrundfarbe von Eingabefeldern
FieldTextTextfarbe von Eingabefeldern
GrayTextTextfarbe ausgegrauter (deaktivierter) Elemente. Entspricht #000, wenn der Grafiktreiber keinen durchgängigen Grauton unterstützt.
HighlightMarkierungsfarbe ausgewählter Bereiche.
HighlightTextTextfarbe in ausgewählten Bereichen.
LinkTextTextfarbe für unbesuchte, inaktive Links
VisitedTextTextfarbe besuchter Links.

weitere Schlüsselwörter

transparent

Das Schlüsselwort transparent ist ebenfalls ein Farbname. Es darf überall dort vorkommen, wo ein Farbwert erwartet wird. Statt einer Farbe wird dann eine transparente Fläche gebildet, etwa ein unsichtbarer Rahmen oder ein durchsichtiges Element.

transparent ist ein Synonym für rgb(0 0 0 / 0).

currentColor

Das Schlüsselwort currentColor enthält den berechneten Wert der Schriftfarbe eines Elements. Diesen Wert kann als Standardfarbwert festgelegt und überall dort verwendet werden, wo eine Farbangabe erwartet wird. Die Darstellung ist also abhängig von den Textfarben der Vorfahrenelemente.

Information: color-Eigenschaft mit falschen Namen?

Die color-Eigenschaft regelt die Schriftfarbe eines Elements und (falls nicht anders festgelegt) seiner Nachfahren.
Genau genommen müsste sie eigentlich text-color heißen.
Zukünftig sollen wie in SVG eine fill- und eine stroke-Eigenschaft weitere Gestaltungsmöglichkeiten bieten.

Der Wert der Eigenschaft color wird automatisch auf Nachfahrenlemente vererbt. Im Beispiel wird die Textfarbe des body-Elements – hier der Defaultwert der meisten Browser, schwarz – für alle Nachfahren verwendet, ohne dass eine Angabe zur Textfarbe erfolgt.

Des Weiteren wird bei Rahmen, Außenlinien oder Schlagschatten ohne Farbangabe die Textfarbe als Farbe für den Schatten bzw. Linien verwendet.

Vererbung der Schriftfarbeansehen …

h1 { color: royalblue; border-bottom: thick solid; } aside { float: right; box-shadow: 5px 10px 15px; outline: medium solid;} aside.hinweis { color: red;}

Da nur jeweils ein Farb-Wert festgelegt werden kann, bleibt der Nutzen überschaubar.

Eine Einsatzmöglichkeit ist bei SVG-Icons, bei denen die Füllung abhängig vom aktuellen Farbwert angepasst werden kann.

Vielseitiger ist die Verwendung von Custom properties (CSS-Variablen)
Mit custom properties ist es möglich, mehrere Farben festzulegen und über die var()-Funktion als Wert beliebig oft wieder einzusetzen. Änderungen von Farbwerten können nun zentral für das ganze Stylesheet durchgeführt werden.

  • Farbkonzept
  • Farbe(Übersicht)
  • Farbmodelle

Weblinks

  1. ars technica: “Tomato” versus “#FF6347”—the tragicomic history of CSS color names
  2. Merriam-Webster: 'Gray' vs. 'Grey': What is the Difference?
  3. Eric Meyer: rebeccapurple
  4. MDN: System Colors
Farbe/Farbangaben – SELFHTML-Wiki (2024)
Top Articles
Latest Posts
Recommended Articles
Article information

Author: Carmelo Roob

Last Updated:

Views: 5900

Rating: 4.4 / 5 (65 voted)

Reviews: 88% of readers found this page helpful

Author information

Name: Carmelo Roob

Birthday: 1995-01-09

Address: Apt. 915 481 Sipes Cliff, New Gonzalobury, CO 80176

Phone: +6773780339780

Job: Sales Executive

Hobby: Gaming, Jogging, Rugby, Video gaming, Handball, Ice skating, Web surfing

Introduction: My name is Carmelo Roob, I am a modern, handsome, delightful, comfortable, attractive, vast, good person who loves writing and wants to share my knowledge and understanding with you.