Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #ff8c00 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 #ff8c00

Schriftfarbwert #b0c4de

DetailHintergrund #ff8c00 DetailSchrift #b0c4de 
Farbwert :#ff8c00Farbwert :#b0c4de
Farbe :darkorangeFarbe :lightsteelblue
HTML:#ff8c00HTML:#b0c4de
HTML (Wert):#ff8c00HTML (Wert):#b0c4de
CSS:#ff8c00CSS:#b0c4de
CSS (Wert):#ff8c00CSS (Wert):#b0c4de
CSS (kürzest):#ff8c00CSS (kürzest):#b0c4de
CSS (RGB):rgb(255,140,0)CSS (RGB):rgb(176,196,222)
CSS (%RGB):rgb(100%,54%,0%)CSS (%RGB):rgb(69%,76%,87%)

Verlauf Hintergrundfarbwert #ff8c00 nach Schriftfarbwert #b0c4de

#ff8c00#f3941f#e89c3f#dda45f#d1ac7e#c6b49e#bbbcbe#b0c4de
#ff8c00#f3941f#e89c3f#dda45f#d1ac7e#c6b49e#bbbcbe#b0c4de

Kombination von #ff8c00 und #b0c4de

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

#b0c4de ist nicht als Schriftfarbe auf Hintergrund #ff8c00 geeignet, weil die Unterschiede in der Helligkeit und Farbe zu gering sind.

Die Ähnlichkeit der Farben #b0c4de und #ff8c00 ergibt sich zu 93.76%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 6.24%.

Hintergrundfarbwert #ff8c00

Schriftfarbwert #b0c4de

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#ff8c00#ff8c00#ff8c00#ff8c00#b0c4de#b0c4de#b0c4de#b0c4de
#ff9c24#ff9c24#da7800#da7800#bbcce2#bbcce2#96a8be#96a8be
#ffac48#ffac48#b66400#b66400#c6d4e7#c6d4e7#7d8c9e#7d8c9e
#ffbd6d#ffbd6d#915000#915000#d1ddec#d1ddec#64707e#64707e
#ffcd91#ffcd91#6d3c00#6d3c00#dde5f0#dde5f0#4b545f#4b545f
#ffdeb6#ffdeb6#482800#482800#e8eef5#e8eef5#32383f#32383f
#ffeeda#ffeeda#241400#241400#f3f6fa#f3f6fa#191c1f#191c1f
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiele zur Kombination von Farbwert #ff8c00 und Farbwert #b0c4de

Hintergrund/Text-Kombination bei Befehl dt

Wir ändern in diesem Beispiel die Textfarbe von <dt> auf Farbwert #b0c4de und die Hintergrundfarbe von <dt> auf Farbwert #ff8c00. Die Schriftart ändern wir auf arial und als Schriftgröße setzen wir 13px.

<style type="text/css"><!--
  dt { 
    font-size:13px; 
    color:#b0c4de; 
    background-color:#ff8c00; 
    font-family:arial;
  }
//-->
</style>

Weiteres zu dt können Sie in Listen und Glossare in HTML erfahren. Einzelheiten des hier genutzten HTML-Tag <dt>.

Wechsel der Unterstreichung bei Hover mit HTML-Tag cite

Die Unterstreichungsfarbe soll sich von Farbwert #ff8c00 auf Farbwert #b0c4de ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <cite> in Farbwert #ff8c00 vor.

Hier unterstreichen wir <cite> mit Hilfe eines gezahnten Rahmens mit 4 Pixel Dicke in Farbwert #ff8c00.

<style type="text/css"><!--
  cite { 
    border-bottom-style: ridge; 
    border-bottom-color: #ff8c00; 
    border-bottom-width: 4px;
  }
//-->
</style>
Nun stellen wir ein, dass sich bei Mausberührung die Unterstreichungsfarbe auf #b0c4de ändert.
<style type="text/css"><!--
  cite: hover { 
    border-bottom-color: #b0c4de;
  }
//-->
</style>

Die Idee ist dabei, unabhängige Formatierungen für Inhalt und Unterstreichung zu nutzen. Manchmal sieht man dies bei Verweisen. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine "wirkliche" Unterstreichung, der Text hat gar keine Unterstreichung. Sie wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Der hier verwendete HTML-Tag cite ist in der HTML Referenz unter <cite> genau gezeigt.

Tabelle der 120 HTML Farbnamen

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

Weitere Farbtabellen