Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #ff8c00 und Farbe lightgreen

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

Schriftfarbe lightgreen

DetailHintergrund #ff8c00 DetailSchrift lightgreen 
Farbwert :#ff8c00Farbe :lightgreen
Farbe :darkorangeFarbwert :#90ee90
HTML:#ff8c00HTML:lightgreen
HTML (Wert):#ff8c00HTML (Wert):#90ee90
CSS:#ff8c00CSS:lightgreen
CSS (Wert):#ff8c00CSS (Wert):#90ee90
CSS (kürzest):#ff8c00CSS (kürzest):#90ee90
CSS (RGB):rgb(255,140,0)CSS (RGB):rgb(144,238,144)
CSS (%RGB):rgb(100%,54%,0%)CSS (%RGB):rgb(56%,93%,56%)

Verlauf Hintergrundfarbwert #ff8c00 nach Schriftfarbe lightgreen

#ff8c00#ef9a14#dfa829#cfb63d#bfc452#afd266#9fe07b#90ee90
#ff8c00#ef9a14#dfa829#cfb63d#bfc452#afd266#9fe07b#90ee90

Kombination von #ff8c00 und lightgreen

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

lightgreen eignet sich nicht als Schriftfarbe auf Hintergrund #ff8c00. Die Unterschiede in der Helligkeit und Farbe sind nicht ausreichend.

Die Ähnlichkeit der Farben lightgreen und #ff8c00 beträgt 92.16%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 7.84%.

Hintergrundfarbwert #ff8c00

Schriftfarbe lightgreen

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#ff8c00#ff8c00#ff8c00#ff8c00#90ee90#90ee90#90ee90#90ee90
#ff9c24#ff9c24#da7800#da7800#9ff09f#9ff09f#7bcc7b#7bcc7b
#ffac48#ffac48#b66400#b66400#aff2af#aff2af#66aa66#66aa66
#ffbd6d#ffbd6d#915000#915000#bff5bf#bff5bf#528852#528852
#ffcd91#ffcd91#6d3c00#6d3c00#cff7cf#cff7cf#3d663d#3d663d
#ffdeb6#ffdeb6#482800#482800#dffadf#dffadf#294429#294429
#ffeeda#ffeeda#241400#241400#effcef#effcef#142214#142214
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiel zur Kombination von Farbwert #ff8c00 und Farbe lightgreen

Wechsel der Unterstreichung bei Hover mit Tag a

Einen Verweis erzeugen Sie mit Befehl <a>. Diesen können Sie hervorheben und farblich gestalten.

Die Unterstreichungsfarbe soll sich von Farbwert #ff8c00 auf Farbe lightgreen ändern, wenn man mit der Maus auf <a> zeigt. Bereiten wir zunächst die Darstellung von <a> in Farbwert #ff8c00 vor.

Beispielsweise unterstreichen wir <a> mit einem einfallenden Rahmen mit 2 Pixel Dicke in Farbwert #ff8c00.

<style type="text/css"><!--
  a { 
    border-bottom-color:#ff8c00; 
    border-bottom-style:inset; 
    border-bottom-width:2px;
  }
//-->
</style>
Jetzt stellen wir ein, dass bei Berührung mit der Maus die Farbe der Unterstreichung auf lightgreen gesetzt wird.
<style type="text/css"><!--
  a: hover { 
    border-bottom-color: lightgreen;
  }
//-->
</style>

Die Idee ist hierbei, unabhängige Formatierungen für Inhalt und Unterstreichung zu haben. Öfter sieht man dies bei Hyperlinks. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Hierbei handelt es sich aber nicht um eine wirkliche Unterstreichung, der Text selbst ist nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zu a können Sie in Verweise und Protokolle in HTML erfahren. Mehr zum Tag a ist in der HTML Referenz unter <a> ausführlich beschrieben.

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