Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #ff7f50 und Farbwert #ffe4b5

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 #ff7f50

Schriftfarbwert #ffe4b5

DetailHintergrund #ff7f50 DetailSchrift #ffe4b5 
Farbwert :#ff7f50Farbwert :#ffe4b5
Farbe :coralFarbe :moccasin
HTML:#ff7f50HTML:#ffe4b5
HTML (Wert):#ff7f50HTML (Wert):#ffe4b5
CSS:#ff7f50CSS:#ffe4b5
CSS (Wert):#ff7f50CSS (Wert):#ffe4b5
CSS (kürzest):#ff7f50CSS (kürzest):#ffe4b5
CSS (RGB):rgb(255,127,80)CSS (RGB):rgb(255,228,181)
CSS (%RGB):rgb(100%,49%,31%)CSS (%RGB):rgb(100%,89%,70%)

Verlauf Hintergrundfarbwert #ff7f50 nach Schriftfarbwert #ffe4b5

#ff7f50#ff8d5e#ff9b6c#ffaa7b#ffb889#ffc798#ffd5a6#ffe4b5
#ff7f50#ff8d5e#ff9b6c#ffaa7b#ffb889#ffc798#ffd5a6#ffe4b5

Kombination von #ff7f50 und #ffe4b5

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

Auf Hintergrund #ff7f50 ist #ffe4b5 ungeeignet, da sich sowohl Helligkeit als auch die Farben zu ähnlich sind.

Die Ähnlichkeit von #ffe4b5 und #ff7f50 beträgt 90.36%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 9.64%.

Hintergrundfarbwert #ff7f50

Schriftfarbwert #ffe4b5

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#ff7f50#ff7f50#ff7f50#ff7f50#ffe4b5#ffe4b5#ffe4b5#ffe4b5
#ff9169#ff9169#da6c44#da6c44#ffe7bf#ffe7bf#dac39b#dac39b
#ffa382#ffa382#b65a39#b65a39#ffebca#ffebca#b6a281#b6a281
#ffb59b#ffb59b#91482d#91482d#ffefd4#ffefd4#918267#918267
#ffc8b4#ffc8b4#6d3622#6d3622#fff3df#fff3df#6d614d#6d614d
#ffdacd#ffdacd#482416#482416#fff7e9#fff7e9#484133#484133
#ffece6#ffece6#24120b#24120b#fffbf4#fffbf4#242019#242019
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiele zur Kombination von Farbwert #ff7f50 und Farbwert #ffe4b5

Wechsel der Hintergrundfarbe bei Hover bei Tag acronym

Die Hintergrundfarbe soll sich von Farbwert #ff7f50 auf Farbwert #ffe4b5 ändern, wenn man mit der Maus auf <acronym> zeigt. Bereiten wir zunächst eine Formatierung von <acronym> in Farbwert #ff7f50 vor.

Wir legen in diesem Beispiel die Hintergrundfarbe von <acronym> auf Farbwert #ff7f50 fest. Die Schriftgröße ändern wir auf 13px.

<style type="text/css"><!--
  acronym { 
    background-color:#ff7f50; 
    font-size:13px;
  }
//-->
</style>
Nun fordern wir, dass sich bei Berührung mit der Maus die Hintergrundfarbe zu #ffe4b5 ändert.
<style type="text/css"><!--
  acronym:hover { 
    background-color:#ffe4b5;
  }
//-->
</style>

Einzelheiten des hier genutzten Tag acronym lesen Sie in der HTML Referenz unter <acronym>.

Wechsel der Umrandung bei Hover bei HTML-Tag strike

Die Rahmenfarbe soll sich von Farbwert #ff7f50 auf Farbwert #ffe4b5 ändern, wenn man mit der Maus auf <strike> zeigt. Bereiten wir zunächst die Formatierung von <strike> in Farbwert #ff7f50 vor.

In diesem Beispiel umranden wir <strike> mit einem 4 Pixel dicken, gefurchten Rahmen in Farbwert #ff7f50.

<style type="text/css"><!--
  strike { 
    border-style:groove; 
    border-width:4px; 
    border-color:#ff7f50;
  }
//-->
</style>
Jetzt stellen wir ein, dass sich bei Hover die Rahmenfarbe zu #ffe4b5 ändert.
<style type="text/css"><!--
  strike: hover { 
    border-color: #ffe4b5;
  }
//-->
</style>

Weiteres zum Thema finden Sie in Text in HTML. Weiteres zum Befehl <strike>.

Tabelle der 120 HTML Farbnamen

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

Weitere Farbtabellen