Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #556b2f und Farbwert #6b8e23

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 #556b2f

Schriftfarbwert #6b8e23

DetailHintergrund #556b2f DetailSchrift #6b8e23 
Farbwert :#556b2fFarbwert :#6b8e23
Farbe :darkolivegreenFarbe :olivedrab
HTML:#556b2fHTML:#6b8e23
HTML (Wert):#556b2fHTML (Wert):#6b8e23
CSS:#556b2fCSS:#6b8e23
CSS (Wert):#556b2fCSS (Wert):#6b8e23
CSS (kürzest):#556b2fCSS (kürzest):#6b8e23
CSS (RGB):rgb(85,107,47)CSS (RGB):rgb(107,142,35)
CSS (%RGB):rgb(33%,41%,18%)CSS (%RGB):rgb(41%,55%,13%)

Verlauf Hintergrundfarbwert #556b2f nach Schriftfarbwert #6b8e23

#556b2f#58702d#5b752b#5e7a29#617f28#648426#678924#6b8e23
#556b2f#58702d#5b752b#5e7a29#617f28#648426#678924#6b8e23

Kombination von #556b2f und #6b8e23

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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante.

#6b8e23 eignet sich nicht als Schriftfarbe auf Hintergrund #556b2f, da die Helligkeit und Farben zu ähnlich sind.

Die Ähnlichkeit der Farben #6b8e23 und #556b2f beträgt 92.56%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 7.44%.

Hintergrundfarbwert #556b2f

Schriftfarbwert #6b8e23

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#556b2f#556b2f#556b2f#556b2f#6b8e23#6b8e23#6b8e23#6b8e23
#6d804c#6d804c#485b28#485b28#809e42#809e42#5b791e#5b791e
#85956a#85956a#3c4c21#3c4c21#95ae61#95ae61#4c6519#4c6519
#9daa88#9daa88#303d1a#303d1a#aabe81#aabe81#3d5114#3d5114
#b6bfa5#b6bfa5#242d14#242d14#bfcea0#bfcea0#2d3c0f#2d3c0f
#ced4c3#ced4c3#181e0d#181e0d#d4dec0#d4dec0#1e280a#1e280a
#e6e9e1#e6e9e1#0c0f06#0c0f06#e9eedf#e9eedf#0f1405#0f1405
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiele zur Kombination von Farbwert #556b2f und Farbwert #6b8e23

Wechsel der Umrandung bei Hover mit HTML-Tag tbody

Die Rahmenfarbe soll sich von Farbwert #556b2f auf Farbwert #6b8e23 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <tbody> in Farbwert #556b2f vor.

In diesem Beispiel umranden wir <tbody> mit einem 2 Pixel dicken, doppelten Rahmen in Farbwert #556b2f.

<style type="text/css"><!--
  tbody { 
    border-style:double; 
    border-width:2px; 
    border-color:#556b2f;
  }
//-->
</style>
Jetzt stellen wir ein, dass sich bei Berührung mit der Maus die Rahmenfarbe auf #6b8e23 ändert.
<style type="text/css"><!--
  tbody: hover { 
    border-color: #6b8e23;
  }
//-->
</style>

Weiteres zu tbody können Sie in Tabellen in HTML lesen. Einzelheiten vom Tag tbody finden Sie in der HTML Referenz unter <tbody>.

Hintergrund/Text-Kombination mit Tag code

Für dieses Beispiel ändern wir die Textfarbe von <code> auf Farbwert #6b8e23 und die Hintergrundfarbe von <code> auf Farbwert #556b2f. Als Schriftart setzen wir courier new. Als Schriftgröße entscheiden wir uns für 126%.

<style type="text/css"><!--
  code { 
    font-family: courier new; 
    font-size: 126%; 
    color: #6b8e23; 
    background-color: #556b2f;
  }
//-->
</style>

Weiteres zum Thema können Sie in Text in HTML nachlesen. Einzelheiten vom hier gezeigten Tag code lesen Sie in der HTML Referenz unter <code>.

Tabelle der 120 HTML Farbnamen

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

Weitere Farbtabellen