Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #f5deb3 und Farbwert #faebd7

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 #f5deb3

Schriftfarbwert #faebd7

DetailHintergrund #f5deb3 DetailSchrift #faebd7 
Farbwert :#f5deb3Farbwert :#faebd7
Farbe :wheatFarbe :antiquewhite
HTML:#f5deb3HTML:#faebd7
HTML (Wert):#f5deb3HTML (Wert):#faebd7
CSS:#f5deb3CSS:#faebd7
CSS (Wert):#f5deb3CSS (Wert):#faebd7
CSS (kürzest):#f5deb3CSS (kürzest):#faebd7
CSS (RGB):rgb(245,222,179)CSS (RGB):rgb(250,235,215)
CSS (%RGB):rgb(96%,87%,70%)CSS (%RGB):rgb(98%,92%,84%)

Verlauf Hintergrundfarbwert #f5deb3 nach Schriftfarbwert #faebd7

#f5deb3#f5dfb8#f6e1bd#f7e3c2#f7e5c7#f8e7cc#f9e9d1#faebd7
#f5deb3#f5dfb8#f6e1bd#f7e3c2#f7e5c7#f8e7cc#f9e9d1#faebd7

Kombination von #f5deb3 und #faebd7

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

#faebd7 eignet sich nicht als Schriftfarbe auf Hintergrund #f5deb3, da sich sowohl Helligkeit als auch die Farben zu ähnlich sind.

Die Ähnlichkeit der Farben #faebd7 und #f5deb3 beträgt 94.66%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 5.34%.

Hintergrundfarbwert #f5deb3

Schriftfarbwert #faebd7

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#f5deb3#f5deb3#f5deb3#f5deb3#faebd7#faebd7#faebd7#faebd7
#f6e2bd#f6e2bd#d2be99#d2be99#faeddc#faeddc#d6c9b8#d6c9b8
#f7e7c8#f7e7c8#af9e7f#af9e7f#fbf0e2#fbf0e2#b2a799#b2a799
#f9ecd3#f9ecd3#8c7e66#8c7e66#fcf3e8#fcf3e8#8e867a#8e867a
#faf0de#faf0de#695f4c#695f4c#fcf6ed#fcf6ed#6b645c#6b645c
#fcf5e9#fcf5e9#463f33#463f33#fdf9f3#fdf9f3#47433d#47433d
#fdfaf4#fdfaf4#231f19#231f19#fefcf9#fefcf9#23211e#23211e
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiele zur Kombination von Farbwert #f5deb3 und Farbwert #faebd7

Zebra-Effekt von Befehl th

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man von einem Zebra-Effekt. Dieser Effekt unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .yang und .ying für <th> mit den Hintergrundfarben Farbwert #f5deb3 und Farbwert #faebd7.

<style type="text/css"><!--
  th.yang { 
    background-color:#f5deb3;
  }
  th.ying { 
    background-color: #faebd7;
  }
//-->
</style>

Diese werden abwechselnd angewendet.

<table>
<tr><td class="yang">IA~A</td><td class="ying">IB~A</td><td class="yang">IC~A</td></tr>
<tr><td class="yang">IA~B</td><td class="ying">IB~B</td><td class="yang">IC~B</td></tr>
<tr><td class="yang">IA~C</td><td class="ying">IB~C</td><td class="yang">IC~C</td></tr>
</table>

Weiteres zum Thema erfahren Sie in Tabellen in HTML. Möglichkeiten des hier gezeigten Tag th lesen Sie in der HTML Referenz unter <th>.

Wechsel der Hintergrundfarbe bei Hover bei HTML-Befehl cite

Die Hintergrundfarbe soll sich von Farbwert #f5deb3 auf Farbwert #faebd7 ändern, wenn man mit der Maus auf <cite> zeigt. Bereiten wir zunächst eine Darstellung von <cite> in Farbwert #f5deb3 vor.

Für dieses Beispiel legen wir Farbwert #f5deb3 als Hintergrundfarbe von <cite> fest:

<style type="text/css"><!--
  cite { 
    background-color: #f5deb3;
  }
//-->
</style>
Nun fordern wir, dass sich bei Mausberührung die Hintergrundfarbe zu #faebd7 ändert.
<style type="text/css"><!--
  cite:hover { 
    background-color:#faebd7;
  }
//-->
</style>

Möglichkeiten des hier gezeigten Befehl <cite>.

Tabelle der 120 HTML Farbnamen

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

Weitere Farbtabellen