Ressourcen: 120 HTML Farbnamen - Kombinationen mit 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 #b0c4de

DetailHintergrundfarbwert #b0c4de Verlauf nach WeißVerlauf nach Schwarz
Farbwert :#b0c4de#b0c4de#b0c4de#b0c4de#b0c4de
Farbe :lightsteelblue#bbcce2#bbcce2#96a8be#96a8be
HTML:#b0c4de#c6d4e7#c6d4e7#7d8c9e#7d8c9e
CSS:#b0c4de#d1ddec#d1ddec#64707e#64707e
CSS (Wert):#b0c4de#dde5f0#dde5f0#4b545f#4b545f
CSS (kürzest):#b0c4de#e8eef5#e8eef5#32383f#32383f
CSS (RGB):rgb(176,196,222)#f3f6fa#f3f6fa#191c1f#191c1f
CSS (%RGB):rgb(69%,76%,87%)#ffffff#ffffff#000000#000000

Beispiele zu Kombinationen mit Farbwert #b0c4de

Farbige Unterstreichung bei HTML-Tag address

Hier unterstreichen wir <address> mit Hilfe eines gezahnten Rahmens mit 1 Pixel Dicke in Farbwert #b0c4de. In HTML ist dies kaum machbar. Wir nutzen deshalb CSS.

<style type="text/css"><!--
  address { border-bottom:1px ridge #b0c4de; }
//-->
</style>

Die Idee ist hierbei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu verwenden. Öfter sehen Sie dies bei Hyperlinks. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Das ist aber keine normale Unterstreichung, der Text hat überhaupt keine Unterstreichung. Sie wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Weiteres zu address können Sie in Blockorientierte Elemente in HTML nachlesen. Der Tag address ist in der HTML Referenz bei <address> genau zusammengestellt.

Änderung der Unterstreichung bei Hover bei HTML-Tag abbr

Die Farbe der Unterstreichung soll sich ändern, wenn man mit der Maus darauf zeigt. Für das Beispiel bereiten wir zunächst Formatierungen von <abbr> vor.

<style type="text/css"><!--
  abbr { border-bottom:2px inset #32d413; }
//-->
</style>
Nun stellen wir ein, dass bei Hover die Unterstreichungsfarbe auf Farbwert #b0c4de gesetzt wird.
<style type="text/css"><!--
  abbr: hover { 
    border-bottom-color: #b0c4de;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sieht man diesen Effekt bei Links. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Es ist aber keine "wirkliche" Unterstreichung, der Text ist nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Möglichkeiten vom hier verwendeten Tag abbr finden Sie in der HTML Referenz unter <abbr>.

Tabelle der 120 HTML Farbnamen

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

Weitere Farbtabellen