Ressourcen: 120 HTML Farbnamen - Kombinationen mit Farbwert #4169e1

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

DetailHintergrundfarbwert #4169e1 Verlauf nach WeißVerlauf nach Schwarz
Farbwert :#4169e1#4169e1#4169e1#4169e1#4169e1
Farbe :royalblue#5c7ee5#5c7ee5#375ac0#375ac0
HTML:#4169e1#7793e9#7793e9#2e4ba0#2e4ba0
CSS:#4169e1#92a9ed#92a9ed#253c80#253c80
CSS (Wert):#4169e1#adbef2#adbef2#1b2d60#1b2d60
CSS (kürzest):#4169e1#c8d4f6#c8d4f6#121e40#121e40
CSS (RGB):rgb(65,105,225)#e3e9fa#e3e9fa#090f20#090f20
CSS (%RGB):rgb(25%,41%,88%)#ffffff#ffffff#000000#000000

Beispiele zu Kombinationen mit Farbwert #4169e1

Farbige Unterstreichung von HTML-Tag s

Hier unterstreichen wir <s> mit Hilfe eines herausstehenden Rahmens mit 3 Pixel Dicke in Farbwert #4169e1. In HTML geht das nicht. Deshalb formatieren wir mit CSS.

<style type="text/css"><!--
  s { 
    border-bottom-color: #4169e1; 
    border-bottom-width: 3px; 
    border-bottom-style: outset;
  }
//-->
</style>

Die Idee ist, verschiedene Formatierungen für Inhalt und Unterstreichung zu verwenden. Öfter sehen Sie diesen Effekt bei Hyperlinks. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine normale Unterstreichung, der Text selbst hat gar keine Unterstreichung. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zum Thema s erfahren Sie in Text in HTML. Einzelheiten vom Tag s sind in der HTML Referenz bei <s> ausführlich beschrieben.

Änderung der Unterstreichung bei Hover mit Tag dfn

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

<style type="text/css"><!--
  dfn { 
    border-bottom-color: #36ae43; 
    border-bottom-style: outset; 
    border-bottom-width: 1px;
  }
//-->
</style>
Nun stellen wir ein, dass bei Hover die Farbe der Unterstreichung auf Farbwert #4169e1 gesetzt wird.
<style type="text/css"><!--
  dfn:hover { 
    border-bottom-color:#4169e1;
  }
//-->
</style>

Die Idee ist hierbei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu verwenden. Öfter sehen Sie dies bei Links. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Dies ist aber keine "wirkliche" Unterstreichung, der Text ist nicht unterstrichen. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Weiteres zu dfn finden Sie in Text in HTML. Möglichkeiten des hier verwendeten HTML-Befehl <dfn>.

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