Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #f0e68c und Farbwert #b0c4de

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

Schriftfarbwert #b0c4de

DetailHintergrund #f0e68c DetailSchrift #b0c4de 
Farbwert :#f0e68cFarbwert :#b0c4de
Farbe :khakiFarbe :lightsteelblue
HTML:#f0e68cHTML:#b0c4de
HTML (Wert):#f0e68cHTML (Wert):#b0c4de
CSS:#f0e68cCSS:#b0c4de
CSS (Wert):#f0e68cCSS (Wert):#b0c4de
CSS (kürzest):#f0e68cCSS (kürzest):#b0c4de
CSS (RGB):rgb(240,230,140)CSS (RGB):rgb(176,196,222)
CSS (%RGB):rgb(94%,90%,54%)CSS (%RGB):rgb(69%,76%,87%)

Verlauf Hintergrundfarbwert #f0e68c nach Schriftfarbwert #b0c4de

#f0e68c#e6e197#dddca3#d4d7af#cbd2ba#c2cdc6#b9c8d2#b0c4de
#f0e68c#e6e197#dddca3#d4d7af#cbd2ba#c2cdc6#b9c8d2#b0c4de

Kombination von #f0e68c und #b0c4de

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

#b0c4de eignet sich nicht als Schriftfarbe auf Hintergrund #f0e68c, da die Unterschiede in der Helligkeit und Farbe unzureichend sind.

Die Ähnlichkeit der Farben #b0c4de und #f0e68c beträgt 93.38%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 6.62%.

Hintergrundfarbwert #f0e68c

Schriftfarbwert #b0c4de

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#f0e68c#f0e68c#f0e68c#f0e68c#b0c4de#b0c4de#b0c4de#b0c4de
#f2e99c#f2e99c#cdc578#cdc578#bbcce2#bbcce2#96a8be#96a8be
#f4edac#f4edac#aba464#aba464#c6d4e7#c6d4e7#7d8c9e#7d8c9e
#f6f0bd#f6f0bd#898350#898350#d1ddec#d1ddec#64707e#64707e
#f8f4cd#f8f4cd#66623c#66623c#dde5f0#dde5f0#4b545f#4b545f
#faf7de#faf7de#444128#444128#e8eef5#e8eef5#32383f#32383f
#fcfbee#fcfbee#222014#222014#f3f6fa#f3f6fa#191c1f#191c1f
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiel zur Kombination von Farbwert #f0e68c und Farbwert #b0c4de

Zebra-Effekt von Tag td

Man spricht von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Dieser Effekt unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <td> mit unterschiedlichen Hintergrundfarben Farbwert #f0e68c und Farbwert #b0c4de.

<style type="text/css"><!--
  td.ung { 
    background-color: #f0e68c;
  }
  td.ger { 
    background-color:#b0c4de;
  }
//-->
</style>

Diese CSS-Klassen werden dann abwechselnd genutzt.

<table>
<tr><td class="ung">SA,A</td><td class="ger">SB,A</td><td class="ung">SC,A</td></tr>
<tr><td class="ung">SA,B</td><td class="ger">SB,B</td><td class="ung">SC,B</td></tr>
<tr><td class="ung">SA,C</td><td class="ger">SB,C</td><td class="ung">SC,C</td></tr>
</table>

Mehr zu td können Sie in Tabellen in HTML finden. Weiteres zum hier gezeigten HTML-Befehl td erfahren Sie in der HTML Referenz unter <td>.

Tabelle der 120 HTML Farbnamen

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

Weitere Farbtabellen