Ressourcen: 120 HTML Farbnamen - Kombination von Farbe darkblue und Farbe orange

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.

Hintergrundfarbe darkblue

Schriftfarbe orange

DetailHintergrund darkblue DetailSchrift orange 
Farbe :darkblueFarbe :orange
Farbwert :#00008bFarbwert :#ffa500
HTML:darkblueHTML:orange
HTML (Wert):#00008bHTML (Wert):#ffa500
CSS:darkblueCSS:orange
CSS (Wert):#00008bCSS (Wert):#ffa500
CSS (kürzest):#00008bCSS (kürzest):#ffa500
CSS (RGB):rgb(0,0,139)CSS (RGB):rgb(255,165,0)
CSS (%RGB):rgb(0%,0%,54%)CSS (%RGB):rgb(100%,64%,0%)

Verlauf Hintergrundfarbe darkblue nach Schriftfarbe orange

#00008b#241777#482f63#6d464f#915e3b#b67527#da8d13#ffa500
#00008b#241777#482f63#6d464f#915e3b#b67527#da8d13#ffa500

Kombination von darkblue und orange

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

Die Ähnlichkeit von orange und darkblue ergibt sich zu 63.11%. Die Lesbarkeit dieser Farbkombination liegt damit bei 36.89%.

orange eignet sich als Schriftfarbe auf Hintergrund darkblue. Die Unterschiede in Helligkeit und Farbe sind in Ordnung.

Hintergrundfarbe darkblue

Schriftfarbe orange

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#00008b#00008b#00008b#00008b#ffa500#ffa500#ffa500#ffa500
#24249b#24249b#000077#000077#ffb124#ffb124#da8d00#da8d00
#4848ac#4848ac#000063#000063#ffbe48#ffbe48#b67500#b67500
#6d6dbc#6d6dbc#00004f#00004f#ffcb6d#ffcb6d#915e00#915e00
#9191cd#9191cd#00003b#00003b#ffd891#ffd891#6d4600#6d4600
#b6b6dd#b6b6dd#000027#000027#ffe5b6#ffe5b6#482f00#482f00
#dadaee#dadaee#000013#000013#fff2da#fff2da#241700#241700
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiele zur Kombination von Farbe darkblue und Farbe orange

Füllen und Umranden bei Tag h3

Eine Überschrift der 3. Stufe wird mit HTML-Tag <h3> gesetzt. Sie kann farblich gestaltet und hervorgehoben werden.

In diesem Beispiel umranden wir <h3> mit einem herausstehenden, 1 Punkte dicken Rahmen in Farbe orange . Den Hintergrund von <h3> setzen wir entsprechend auf Farbe darkblue. Dies ist mit HTML so kaum möglich. Wir nutzen deshalb CSS zur Formatierung.

<style type="text/css"><!--
  h3 { border:1pt outset orange; background-color:darkblue; }
//-->
</style>

Mehr zum Thema h3 finden Sie in Grundlegende Gestaltungselemente in HTML. Möglichkeiten des hier verwendeten Befehl <h3>.

Wechsel der Textfarbe bei Hover mit HTML-Befehl button

Die Textfarbe soll sich von Farbe darkblue auf Farbe orange ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <button> in Farbe darkblue vor.

Für dieses Beispiel legen wir Farbe darkblue als Textfarbe von <button> fest:

<style type="text/css"><!--
  button { 
    color:darkblue;
  }
//-->
</style>
Jetzt fordern wir, dass sich bei Hover die Textfarbe auf orange ändert.
<style type="text/css"><!--
  button:hover { 
    color:orange;
  }
//-->
</style>

Mehr zum Thema finden Sie in Formulare in HTML. Weiteres zum Befehl <button>.

Tabelle der 120 HTML Farbnamen

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

Weitere Farbtabellen