Ressourcen: 137 HTML Farbnamen - Kombination von Farbe purple und Farbe steelblue

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, einem bestimmten Schema folgenden, Farbwerten, definierte man noch 120 Werte und ordnete ihnen Namen zu. Zusammen mit den 17 Standard-HTML-Farben, die ebenfalls Namen haben, ergeben sich so 137 HTML Farbnamen.

Hintergrundfarbe purple

Schriftfarbe steelblue

DetailHintergrund purple DetailSchrift steelblue 
Farbe :purpleFarbe :steelblue
Farbwert :#800080Farbwert :#4682b4
HTML:purpleHTML:steelblue
HTML (Wert):#800080HTML (Wert):#4682b4
CSS:purpleCSS:steelblue
CSS (Wert):#800080CSS (Wert):#4682b4
CSS (kürzest):#800080CSS (kürzest):#4682b4
CSS (RGB):rgb(128,0,128)CSS (RGB):rgb(70,130,180)
CSS (%RGB):rgb(50%,0%,50%)CSS (%RGB):rgb(27%,50%,70%)

Verlauf Hintergrundfarbe purple nach Schriftfarbe steelblue

#800080#771287#6f258e#673796#5e4a9d#565ca5#4e6fac#4682b4
#800080#771287#6f258e#673796#5e4a9d#565ca5#4e6fac#4682b4

Kombination von purple und steelblue

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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.

Auf Hintergrund purple ist steelblue ungeeignet. Sowohl Helligkeit als auch die Farben sind sich zu ähnlich.

Die Ähnlichkeit von steelblue und purple ergibt sich zu 89.08%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 10.92%.

Hintergrundfarbe purple

Schriftfarbe steelblue

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#800080#800080#800080#800080#4682b4#4682b4#4682b4#4682b4
#922492#922492#6d006d#6d006d#6093be#6093be#3c6f9a#3c6f9a
#a448a4#a448a4#5b005b#5b005b#7aa5c9#7aa5c9#325c80#325c80
#b66db6#b66db6#490049#490049#95b7d4#95b7d4#284a66#284a66
#c891c8#c891c8#360036#360036#afc9de#afc9de#1e374d#1e374d
#dab6da#dab6da#240024#240024#cadbe9#cadbe9#142533#142533
#ecdaec#ecdaec#120012#120012#e4edf4#e4edf4#0a1219#0a1219
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiele zur Kombination von Farbe purple und Farbe steelblue

Text- und Unterstreichungsfarben bei Befehl a

Ein Hyperlink wird mit Befehl <a> gesetzt. Er kann farblich gestaltet und hervorgehoben werden.

Für dieses Beispiel ändern wir die Textfarbe von <a> auf Farbe steelblue und lassen die Hintergrundfarbe unverändert. Die Schriftart ändern wir auf sans-serif. Die Schriftgröße verringern wir auf 96%. Wir unterstreichen den Inhalt von <a> mit Hilfe eines herausstehenden Rahmens mit 2 Punkte Dicke in Farbe purple. Mit HTML geht das kaum. Wir verwenden deshalb CSS zur Formatierung.

<style type="text/css"><!--
  a { 
    border-bottom-width:2pt; 
    color:steelblue; 
    border-bottom-style:outset; 
    font-family:sans-serif; 
    border-bottom-color:purple; 
    font-size:96%;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Mehr zum Thema a lesen Sie in Verweise und Protokolle in HTML. Der Tag a ist in der HTML Referenz unter <a> ausführlich gezeigt.

Wechsel der Textfarbe bei Hover bei Befehl input

Die Textfarbe soll sich von Farbe purple auf Farbe steelblue ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <input> in Farbe purple vor.

Für dieses Beispiel legen wir bei <input> die Textfarbe auf Farbe purple fest. Die Schriftgröße ändern wir auf 13px.

<style type="text/css"><!--
  input { 
    color: purple; 
    font-size: 13px;
  }
//-->
</style>
Nun fordern wir, dass sich bei Hover die Textfarbe auf steelblue ändert.
<style type="text/css"><!--
  input: hover { 
    color: steelblue;
  }
//-->
</style>

Weiteres zum Thema input können Sie in Formulare in HTML nachlesen. Beschreibung des hier genutzten Tag <input>.

Tabelle der 137 HTML Farbnamen

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

Weitere Farbtabellen