Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #00fa9a und Farbwert #dcdcdc

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 #00fa9a

Schriftfarbwert #dcdcdc

DetailHintergrund #00fa9a DetailSchrift #dcdcdc 
Farbwert :#00fa9aFarbwert :#dcdcdc
Farbe :mediumspringgreenFarbe :gainsboro
HTML:#00fa9aHTML:#dcdcdc
HTML (Wert):#00fa9aHTML (Wert):#dcdcdc
CSS:#00fa9aCSS:#dcdcdc
CSS (Wert):#00fa9aCSS (Wert):#dcdcdc
CSS (kürzest):#00fa9aCSS (kürzest):#dcdcdc
CSS (RGB):rgb(0,250,154)CSS (RGB):rgb(220,220,220)
CSS (%RGB):rgb(0%,98%,60%)CSS (%RGB):rgb(86%,86%,86%)

Verlauf Hintergrundfarbwert #00fa9a nach Schriftfarbwert #dcdcdc

#00fa9a#1ff5a3#3ef1ac#5eedb6#7de8bf#9de4c9#bce0d2#dcdcdc
#00fa9a#1ff5a3#3ef1ac#5eedb6#7de8bf#9de4c9#bce0d2#dcdcdc

Kombination von #00fa9a und #dcdcdc

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

#dcdcdc eignet sich nicht als Schriftfarbe auf Hintergrund #00fa9a. Die Helligkeit und Farben sind zu ähnlich.

Die Ähnlichkeit der Farben #dcdcdc und #00fa9a ergibt sich zu 95.18%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 4.82%.

Hintergrundfarbwert #00fa9a

Schriftfarbwert #dcdcdc

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#00fa9a#00fa9a#00fa9a#00fa9a#dcdcdc#dcdcdc#dcdcdc#dcdcdc
#24faa8#24faa8#00d684#00d684#e1e1e1#e1e1e1#bcbcbc#bcbcbc
#48fbb6#48fbb6#00b26e#00b26e#e6e6e6#e6e6e6#9d9d9d#9d9d9d
#6dfcc5#6dfcc5#008e58#008e58#ebebeb#ebebeb#7d7d7d#7d7d7d
#91fcd3#91fcd3#006b42#006b42#f0f0f0#f0f0f0#5e5e5e#5e5e5e
#b6fde2#b6fde2#00472c#00472c#f5f5f5#f5f5f5#3e3e3e#3e3e3e
#dafef0#dafef0#002316#002316#fafafa#fafafa#1f1f1f#1f1f1f
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiele zur Kombination von Farbwert #00fa9a und Farbwert #dcdcdc

Zebra-Effekt mit HTML-Befehl th

Man spricht vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Dieser Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <th> mit unterschiedlichen Hintergrundfarben Farbwert #00fa9a und Farbwert #dcdcdc.

<style type="text/css"><!--
  th.ung { 
    background-color: #00fa9a;
  }
  th.ger { 
    background-color: #dcdcdc;
  }
//-->
</style>

Diese werden dann abwechselnd angewendet.

<table>
<tr><td class="ung">La~a</td><td class="ger">Lb~a</td><td class="ung">Lc~a</td></tr>
<tr><td class="ung">La~b</td><td class="ger">Lb~b</td><td class="ung">Lc~b</td></tr>
<tr><td class="ung">La~c</td><td class="ger">Lb~c</td><td class="ung">Lc~c</td></tr>
</table>

Weiteres zum Thema können Sie in Tabellen in HTML nachlesen. Mehr zum Tag th finden Sie in der HTML Referenz unter <th>.

Wechsel der Textfarbe bei Hover bei Befehl dfn

Die Textfarbe soll sich von Farbwert #00fa9a auf Farbwert #dcdcdc ändern, wenn man mit der Maus auf <dfn> zeigt. Wir bereiten zunächst die Formatierung von <dfn> in Farbwert #00fa9a vor.

Wir legen z.B. bei <dfn> die Textfarbe auf Farbwert #00fa9a fest. Zwar ändern wir die Hintergrundfarbe nicht, ändern jedoch die Schriftart auf courier new.

<style type="text/css"><!--
  dfn { 
    color:#00fa9a; 
    font-family:courier new;
  }
//-->
</style>
Jetzt stellen wir ein, dass sich bei Mausberührung die Textfarbe auf #dcdcdc ändert.
<style type="text/css"><!--
  dfn: hover { 
    color: #dcdcdc;
  }
//-->
</style>

Mehr zu dfn lesen Sie in Text in HTML. Die Beschreibung vom HTML-Befehl dfn lesen Sie in der HTML Referenz unter <dfn>.

Tabelle der 120 HTML Farbnamen

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

Weitere Farbtabellen