Ressourcen: 120 HTML Farbnamen - Kombinationen mit Farbwert #f5f5f5

von Thomas Salvador.

Farben werden in HTML entweder mit ihrem Namen oder mit ihrem Wert beschrieben.

Netscape führte seinerzeit die websicheren Farben ein. Neben diesen Farbwerten, die einem bestimmten Schema folgen, definierte man noch 120 Werte und ordnete ihnen Namen zu.

Hintergrundfarbwert #f5f5f5

DetailHintergrundfarbwert #f5f5f5 Verlauf nach WeißVerlauf nach Schwarz
Farbwert :#f5f5f5#f5f5f5#f5f5f5#f5f5f5#f5f5f5
Farbe :whitesmoke#f6f6f6#f6f6f6#d2d2d2#d2d2d2
HTML:#f5f5f5#f7f7f7#f7f7f7#afafaf#afafaf
CSS:#f5f5f5#f9f9f9#f9f9f9#8c8c8c#8c8c8c
CSS (Wert):#f5f5f5#fafafa#fafafa#696969#696969
CSS (kürzest):#f5f5f5#fcfcfc#fcfcfc#464646#464646
CSS (RGB):rgb(245,245,245)#fdfdfd#fdfdfd#232323#232323
CSS (%RGB):rgb(96%,96%,96%)#ffffff#ffffff#000000#000000

Beispiele zu Kombinationen mit Farbwert #f5f5f5

Farbige Unterstreichung mit Tag span

In diesem Beispiel unterstreichen wir <span> mit einem doppelten Rahmen mit 4 Pixel Dicke in Farbwert #f5f5f5. Mit HTML ist dies nicht möglich. Daher formatieren wir mit CSS.

<style type="text/css"><!--
  span { border-bottom:4px double #f5f5f5; }
//-->
</style>

Die Idee ist hierbei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben. Manchmal sehen Sie diesen Effekt bei Hyperlinks. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Hierbei handelt es sich aber nicht um eine "normale" Unterstreichung, der Text selbst hat keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Weiteres zum hier genutzten HTML-Tag <span>.

Änderung der Textfarbe bei Hover mit Tag li

Die Textfarbe soll sich ändern, wenn man mit der Maus darauf zeigt.

Dafür stellen wir <li> so ein, dass sich bei Berührung mit der Maus die Textfarbe auf Farbwert #f5f5f5 ändert.
<style type="text/css"><!--
  li:hover { 
    color:#f5f5f5;
  }
//-->
</style>

Weiteres zu li lesen Sie in Listen und Glossare in HTML. Mehr zum hier genutzten HTML-Befehl li ist in der HTML Referenz unter <li> zusammengestellt.

Tabelle der 120 HTML Farbnamen

Hintergrund Farbwert Farbe undSchrift Farbwert Farbkombination
aliceblue #f0f8ff         +  aliceblue #f0f8ff aliceblue / #f5f5f5
antiquewhite #faebd7         +  antiquewhite #faebd7 antiquewhite / #f5f5f5
aquamarine #7fffd4         +  aquamarine #7fffd4 aquamarine / #f5f5f5
azure #f0ffff         +  azure #f0ffff azure / #f5f5f5
beige #f5f5dc         +  beige #f5f5dc beige / #f5f5f5
blueviolet #8a2be2         +  blueviolet #8a2be2 blueviolet / #f5f5f5
brown #a52a2a         +  brown #a52a2a brown / #f5f5f5
burlywood #deb887         +  burlywood #deb887 burlywood / #f5f5f5
cadetblue #5f9ea0         +  cadetblue #5f9ea0 cadetblue / #f5f5f5
chartreuse #7fff00         +  chartreuse #7fff00 chartreuse / #f5f5f5
chocolate #d2691e         +  chocolate #d2691e chocolate / #f5f5f5
coral #ff7f50         +  coral #ff7f50 coral / #f5f5f5
cornflowerblue #6495ed         +  cornflowerblue #6495ed cornflowerblue / #f5f5f5
cornsilk #fff8dc         +  cornsilk #fff8dc cornsilk / #f5f5f5
crimson #dc143c         +  crimson #dc143c crimson / #f5f5f5
darkblue #00008b         +  darkblue #00008b darkblue / #f5f5f5
darkcyan #008b8b         +  darkcyan #008b8b darkcyan / #f5f5f5
darkgoldenrod #b8860b         +  darkgoldenrod #b8860b darkgoldenrod / #f5f5f5
darkgray #a9a9a9         +  darkgray #a9a9a9 darkgray / #f5f5f5
darkgreen #006400         +  darkgreen #006400 darkgreen / #f5f5f5
darkkhaki #bdb76b         +  darkkhaki #bdb76b darkkhaki / #f5f5f5
darkmagenta #8b008b         +  darkmagenta #8b008b darkmagenta / #f5f5f5
darkolivegreen #556b2f         +  darkolivegreen #556b2f darkolivegreen / #f5f5f5
darkorange #ff8c00         +  darkorange #ff8c00 darkorange / #f5f5f5
darkorchid #9932cc         +  darkorchid #9932cc darkorchid / #f5f5f5
darkred #8b0000         +  darkred #8b0000 darkred / #f5f5f5
darksalmon #e9967a         +  darksalmon #e9967a darksalmon / #f5f5f5
darkseagreen #8fbc8f         +  darkseagreen #8fbc8f darkseagreen / #f5f5f5
darkslateblue #483d8b         +  darkslateblue #483d8b darkslateblue / #f5f5f5
darkslategray #2f4f4f         +  darkslategray #2f4f4f darkslategray / #f5f5f5
darkturquoise #00ced1         +  darkturquoise #00ced1 darkturquoise / #f5f5f5
darkviolet #9400d3         +  darkviolet #9400d3 darkviolet / #f5f5f5
deeppink #ff1493         +  deeppink #ff1493 deeppink / #f5f5f5
deepskyblue #00bfff         +  deepskyblue #00bfff deepskyblue / #f5f5f5
dimgray #696969         +  dimgray #696969 dimgray / #f5f5f5
dodgerblue #1e90ff         +  dodgerblue #1e90ff dodgerblue / #f5f5f5
firebrick #b22222         +  firebrick #b22222 firebrick / #f5f5f5
floralwhite #fffaf0         +  floralwhite #fffaf0 floralwhite / #f5f5f5
forestgreen #228b22         +  forestgreen #228b22 forestgreen / #f5f5f5
gainsboro #dcdcdc         +  gainsboro #dcdcdc gainsboro / #f5f5f5
ghostwhite #f8f8ff         +  ghostwhite #f8f8ff ghostwhite / #f5f5f5
gold #ffd700         +  gold #ffd700 gold / #f5f5f5
goldenrod #daa520         +  goldenrod #daa520 goldenrod / #f5f5f5
greenyellow #adff2f         +  greenyellow #adff2f greenyellow / #f5f5f5
honeydew #f0fff0         +  honeydew #f0fff0 honeydew / #f5f5f5
hotpink #ff69b4         +  hotpink #ff69b4 hotpink / #f5f5f5
indianred #cd5c5c         +  indianred #cd5c5c indianred / #f5f5f5
indigo #4b0082         +  indigo #4b0082 indigo / #f5f5f5
ivory #fffff0         +  ivory #fffff0 ivory / #f5f5f5
khaki #f0e68c         +  khaki #f0e68c khaki / #f5f5f5
lavender #e6e6fa         +  lavender #e6e6fa lavender / #f5f5f5
lavenderblush #fff0f5         +  lavenderblush #fff0f5 lavenderblush / #f5f5f5
lawngreen #7cfc00         +  lawngreen #7cfc00 lawngreen / #f5f5f5
lemonchiffon #fffacd         +  lemonchiffon #fffacd lemonchiffon / #f5f5f5
lightblue #add8e6         +  lightblue #add8e6 lightblue / #f5f5f5
lightcoral #f08080         +  lightcoral #f08080 lightcoral / #f5f5f5
lightcyan #e0ffff         +  lightcyan #e0ffff lightcyan / #f5f5f5
lightgoldenrodyellow #fafad2         +  lightgoldenrodyellow #fafad2 lightgoldenrodyellow / #f5f5f5
lightgreen #90ee90         +  lightgreen #90ee90 lightgreen / #f5f5f5
lightgrey #d3d3d3         +  lightgrey #d3d3d3 lightgrey / #f5f5f5
lightpink #ffb6c1         +  lightpink #ffb6c1 lightpink / #f5f5f5
lightsalmon #ffa07a         +  lightsalmon #ffa07a lightsalmon / #f5f5f5
lightseagreen #20b2aa         +  lightseagreen #20b2aa lightseagreen / #f5f5f5
lightskyblue #87cefa         +  lightskyblue #87cefa lightskyblue / #f5f5f5
lightslategray #778899         +  lightslategray #778899 lightslategray / #f5f5f5
lightsteelblue #b0c4de         +  lightsteelblue #b0c4de lightsteelblue / #f5f5f5
lightyellow #ffffe0         +  lightyellow #ffffe0 lightyellow / #f5f5f5
limegreen #32cd32         +  limegreen #32cd32 limegreen / #f5f5f5
linen #faf0e6         +  linen #faf0e6 linen / #f5f5f5
mediumaquamarine #66cdaa         +  mediumaquamarine #66cdaa mediumaquamarine / #f5f5f5
mediumblue #0000cd         +  mediumblue #0000cd mediumblue / #f5f5f5
mediumorchid #ba55d3         +  mediumorchid #ba55d3 mediumorchid / #f5f5f5
mediumpurple #9370db         +  mediumpurple #9370db mediumpurple / #f5f5f5
mediumseagreen #3cb371         +  mediumseagreen #3cb371 mediumseagreen / #f5f5f5
mediumslateblue #7b68ee         +  mediumslateblue #7b68ee mediumslateblue / #f5f5f5
mediumspringgreen #00fa9a         +  mediumspringgreen #00fa9a mediumspringgreen / #f5f5f5
mediumturquoise #48d1cc         +  mediumturquoise #48d1cc mediumturquoise / #f5f5f5
mediumvioletred #c71585         +  mediumvioletred #c71585 mediumvioletred / #f5f5f5
midnightblue #191970         +  midnightblue #191970 midnightblue / #f5f5f5
mintcream #f5fffa         +  mintcream #f5fffa mintcream / #f5f5f5
mistyrose #ffe4e1         +  mistyrose #ffe4e1 mistyrose / #f5f5f5
moccasin #ffe4b5         +  moccasin #ffe4b5 moccasin / #f5f5f5
navajowhite #ffdead         +  navajowhite #ffdead navajowhite / #f5f5f5
oldlace #fdf5e6         +  oldlace #fdf5e6 oldlace / #f5f5f5
olivedrab #6b8e23         +  olivedrab #6b8e23 olivedrab / #f5f5f5
orange #ffa500         +  orange #ffa500 orange / #f5f5f5
orangered #ff4500         +  orangered #ff4500 orangered / #f5f5f5
orchid #da70d6         +  orchid #da70d6 orchid / #f5f5f5
palegoldenrod #eee8aa         +  palegoldenrod #eee8aa palegoldenrod / #f5f5f5
palegreen #98fb98         +  palegreen #98fb98 palegreen / #f5f5f5
paleturquoise #afeeee         +  paleturquoise #afeeee paleturquoise / #f5f5f5
palevioletred #db7093         +  palevioletred #db7093 palevioletred / #f5f5f5
papayawhip #ffefd5         +  papayawhip #ffefd5 papayawhip / #f5f5f5
peachpuff #ffdab9         +  peachpuff #ffdab9 peachpuff / #f5f5f5
peru #cd853f         +  peru #cd853f peru / #f5f5f5
pink #ffc0cb         +  pink #ffc0cb pink / #f5f5f5
plum #dda0dd         +  plum #dda0dd plum / #f5f5f5
powderblue #b0e0e6         +  powderblue #b0e0e6 powderblue / #f5f5f5
rosybrown #bc8f8f         +  rosybrown #bc8f8f rosybrown / #f5f5f5
royalblue #4169e1         +  royalblue #4169e1 royalblue / #f5f5f5
saddlebrown #8b4513         +  saddlebrown #8b4513 saddlebrown / #f5f5f5
salmon #fa8072         +  salmon #fa8072 salmon / #f5f5f5
sandybrown #f4a460         +  sandybrown #f4a460 sandybrown / #f5f5f5
seagreen #2e8b57         +  seagreen #2e8b57 seagreen / #f5f5f5
seashell #fff5ee         +  seashell #fff5ee seashell / #f5f5f5
sienna #a0522d         +  sienna #a0522d sienna / #f5f5f5
skyblue #87ceeb         +  skyblue #87ceeb skyblue / #f5f5f5
slateblue #6a5acd         +  slateblue #6a5acd slateblue / #f5f5f5
slategray #708090         +  slategray #708090 slategray / #f5f5f5
snow #fffafa         +  snow #fffafa snow / #f5f5f5
springgreen #00ff7f         +  springgreen #00ff7f springgreen / #f5f5f5
steelblue #4682b4         +  steelblue #4682b4 steelblue / #f5f5f5
tan #d2b48c         +  tan #d2b48c tan / #f5f5f5
thistle #d8bfd8         +  thistle #d8bfd8 thistle / #f5f5f5
tomato #ff6347         +  tomato #ff6347 tomato / #f5f5f5
turquoise #40e0d0         +  turquoise #40e0d0 turquoise / #f5f5f5
violet #ee82ee         +  violet #ee82ee violet / #f5f5f5
wheat #f5deb3         +  wheat #f5deb3 wheat / #f5f5f5
whitesmoke #f5f5f5         +  whitesmoke #f5f5f5 whitesmoke / #f5f5f5
yellowgreen #9acd32         +  yellowgreen #9acd32 yellowgreen / #f5f5f5

Weitere Farbtabellen