Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #4169e1 und Farbwert #ff4500

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 #4169e1

Schriftfarbwert #ff4500

DetailHintergrund #4169e1 DetailSchrift #ff4500 
Farbwert :#4169e1Farbwert :#ff4500
Farbe :royalblueFarbe :orangered
HTML:#4169e1HTML:#ff4500
HTML (Wert):#4169e1HTML (Wert):#ff4500
CSS:#4169e1CSS:#ff4500
CSS (Wert):#4169e1CSS (Wert):#ff4500
CSS (kürzest):#4169e1CSS (kürzest):#ff4500
CSS (RGB):rgb(65,105,225)CSS (RGB):rgb(255,69,0)
CSS (%RGB):rgb(25%,41%,88%)CSS (%RGB):rgb(100%,27%,0%)

Verlauf Hintergrundfarbwert #4169e1 nach Schriftfarbwert #ff4500

#4169e1#5c63c0#775ea0#925980#ad5460#c84f40#e34a20#ff4500
#4169e1#5c63c0#775ea0#925980#ad5460#c84f40#e34a20#ff4500

Kombination von #4169e1 und #ff4500

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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.

Die Ähnlichkeit von #ff4500 und #4169e1 ergibt sich zu 93.29%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 6.71%.

Auf Hintergrund #4169e1 ist #ff4500 ungeeignet, weil weder der Helligkeitsunterschied noch der Farbunterschied gross genug sind.

Hintergrundfarbwert #4169e1

Schriftfarbwert #ff4500

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#4169e1#4169e1#4169e1#4169e1#ff4500#ff4500#ff4500#ff4500
#5c7ee5#5c7ee5#375ac0#375ac0#ff5f24#ff5f24#da3b00#da3b00
#7793e9#7793e9#2e4ba0#2e4ba0#ff7a48#ff7a48#b63100#b63100
#92a9ed#92a9ed#253c80#253c80#ff946d#ff946d#912700#912700
#adbef2#adbef2#1b2d60#1b2d60#ffaf91#ffaf91#6d1d00#6d1d00
#c8d4f6#c8d4f6#121e40#121e40#ffc9b6#ffc9b6#481300#481300
#e3e9fa#e3e9fa#090f20#090f20#ffe4da#ffe4da#240900#240900
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiele zur Kombination von Farbwert #4169e1 und Farbwert #ff4500

Wechsel der Textfarbe bei Hover von HTML-Befehl center

Die Textfarbe soll sich von Farbwert #4169e1 auf Farbwert #ff4500 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <center> in Farbwert #4169e1 vor.

In diesem Beispiel ändern wir bei <center> die Textfarbe auf Farbwert #4169e1. Die Hintergrundfarbe ändern wir nicht, setzen jedoch die Schriftart auf arial:

<style type="text/css"><!--
  center { 
    font-family:arial; 
    color:#4169e1;
  }
//-->
</style>
Jetzt fordern wir, dass sich bei Berührung mit der Maus die Textfarbe auf #ff4500 ändert.
<style type="text/css"><!--
  center: hover { 
    color: #ff4500;
  }
//-->
</style>

Mehr zum Thema können Sie in Grundlegende Gestaltungselemente in HTML nachsehen. Die Beschreibung des HTML-Befehl center finden Sie in der HTML Referenz unter <center>.

Hintergrund/Text-Kombination von Tag div

Einen Kontainer erzeugt man mit Tag <div> und kann farblich gestaltet und hervorgehoben werden.

Wir ändern hier die Textfarbe von <div> auf Farbwert #ff4500 und die Hintergrundfarbe von <div> auf Farbwert #4169e1. Als Schriftart setzen wir sans-serif und ändern die Schriftgröße auf 9px.

<style type="text/css"><!--
  div { 
    font-size: 9px; 
    color: #ff4500; 
    background-color: #4169e1; 
    font-family: sans-serif;
  }
//-->
</style>

Der hier genutzte HTML-Befehl div ist in der HTML Referenz bei <div> genau gezeigt.

Tabelle der 120 HTML Farbnamen

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

Weitere Farbtabellen