Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #f5f5f5 und Farbwert #fff5ee

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

Schriftfarbwert #fff5ee

DetailHintergrund #f5f5f5 DetailSchrift #fff5ee 
Farbwert :#f5f5f5Farbwert :#fff5ee
Farbe :whitesmokeFarbe :seashell
HTML:#f5f5f5HTML:#fff5ee
HTML (Wert):#f5f5f5HTML (Wert):#fff5ee
CSS:#f5f5f5CSS:#fff5ee
CSS (Wert):#f5f5f5CSS (Wert):#fff5ee
CSS (kürzest):#f5f5f5CSS (kürzest):#fff5ee
CSS (RGB):rgb(245,245,245)CSS (RGB):rgb(255,245,238)
CSS (%RGB):rgb(96%,96%,96%)CSS (%RGB):rgb(100%,96%,93%)

Verlauf Hintergrundfarbwert #f5f5f5 nach Schriftfarbwert #fff5ee

#f5f5f5#f6f5f4#f7f5f3#f9f5f2#faf5f1#fcf5f0#fdf5ef#fff5ee
#f5f5f5#f6f5f4#f7f5f3#f9f5f2#faf5f1#fcf5f0#fdf5ef#fff5ee

Kombination von #f5f5f5 und #fff5ee

Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

#fff5ee ist nicht als Schriftfarbe auf Hintergrund #f5f5f5 geeignet, da sowohl Helligkeit als auch die Farben zu ähnlich sind.

Die Ähnlichkeit von #fff5ee und #f5f5f5 ergibt sich zu 95.17%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 4.83%.

Hintergrundfarbwert #f5f5f5

Schriftfarbwert #fff5ee

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#f5f5f5#f5f5f5#f5f5f5#f5f5f5#fff5ee#fff5ee#fff5ee#fff5ee
#f6f6f6#f6f6f6#d2d2d2#d2d2d2#fff6f0#fff6f0#dad2cc#dad2cc
#f7f7f7#f7f7f7#afafaf#afafaf#fff7f2#fff7f2#b6afaa#b6afaa
#f9f9f9#f9f9f9#8c8c8c#8c8c8c#fff9f5#fff9f5#918c88#918c88
#fafafa#fafafa#696969#696969#fffaf7#fffaf7#6d6966#6d6966
#fcfcfc#fcfcfc#464646#464646#fffcfa#fffcfa#484644#484644
#fdfdfd#fdfdfd#232323#232323#fffdfc#fffdfc#242322#242322
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiele zur Kombination von Farbwert #f5f5f5 und Farbwert #fff5ee

Wechsel der Umrandung bei Hover bei Tag center

Die Rahmenfarbe soll sich von Farbwert #f5f5f5 auf Farbwert #fff5ee ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <center> in Farbwert #f5f5f5 vor.

In diesem Beispiel umranden wir <center> mit einem 4 Pixel dicken, einfallenden Rahmen in Farbwert #f5f5f5.

<style type="text/css"><!--
  center { border:4px inset #f5f5f5; }
//-->
</style>
Nun stellen wir ein, dass sich bei Berührung mit der Maus die Rahmenfarbe auf #fff5ee ändert.
<style type="text/css"><!--
  center: hover { 
    border-color: #fff5ee;
  }
//-->
</style>

Mehr zum Thema center können Sie in Grundlegende Gestaltungselemente in HTML nachsehen. Der hier verwendete Tag center ist in der HTML Referenz bei <center> ausführlich zusammengestellt.

Wechsel der Textfarbe bei Hover mit Tag td

Die Textfarbe soll sich von Farbwert #f5f5f5 auf Farbwert #fff5ee ändern, wenn man mit der Maus auf <td> zeigt. Bereiten wir zunächst die Darstellung von <td> in Farbwert #f5f5f5 vor.

In diesem Beispiel legen wir Farbwert #f5f5f5 als Textfarbe von <td> fest und setzen die Größe der Schrift auf 9px:

<style type="text/css"><!--
  td { 
    color:#f5f5f5; 
    font-size:9px;
  }
//-->
</style>
Nun stellen wir ein, dass sich bei Hover die Textfarbe zu #fff5ee ändert.
<style type="text/css"><!--
  td: hover { 
    color: #fff5ee;
  }
//-->
</style>

Mehr zum Thema td finden Sie in Tabellen in HTML. Der hier verwendete HTML-Tag td ist in der HTML Referenz bei <td> beschrieben.

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