Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #dda0dd und Farbe darkmagenta

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

Schriftfarbe darkmagenta

DetailHintergrund #dda0dd DetailSchrift darkmagenta 
Farbwert :#dda0ddFarbe :darkmagenta
Farbe :plumFarbwert :#8b008b
HTML:#dda0ddHTML:darkmagenta
HTML (Wert):#dda0ddHTML (Wert):#8b008b
CSS:#dda0ddCSS:darkmagenta
CSS (Wert):#dda0ddCSS (Wert):#8b008b
CSS (kürzest):#dda0ddCSS (kürzest):#8b008b
CSS (RGB):rgb(221,160,221)CSS (RGB):rgb(139,0,139)
CSS (%RGB):rgb(86%,62%,86%)CSS (%RGB):rgb(54%,0%,54%)

Verlauf Hintergrundfarbwert #dda0dd nach Schriftfarbe darkmagenta

#dda0dd#d189d1#c572c5#b95bb9#ae44ae#a22da2#961696#8b008b
#dda0dd#d189d1#c572c5#b95bb9#ae44ae#a22da2#961696#8b008b

Kombination von #dda0dd und darkmagenta

Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Die Ähnlichkeit von darkmagenta und #dda0dd ergibt sich zu 80.44%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 19.56%.

darkmagenta ist nicht als Schriftfarbe auf Hintergrund #dda0dd geeignet. Zwar ist der Helligkeitsunterschied gut, doch die Farben selbst sind zu ähnlich.

Hintergrundfarbwert #dda0dd

Schriftfarbe darkmagenta

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#dda0dd#dda0dd#dda0dd#dda0dd#8b008b#8b008b#8b008b#8b008b
#e1ade1#e1ade1#bd89bd#bd89bd#9b249b#9b249b#770077#770077
#e6bbe6#e6bbe6#9d729d#9d729d#ac48ac#ac48ac#630063#630063
#ebc8eb#ebc8eb#7e5b7e#7e5b7e#bc6dbc#bc6dbc#4f004f#4f004f
#f0d6f0#f0d6f0#5e445e#5e445e#cd91cd#cd91cd#3b003b#3b003b
#f5e3f5#f5e3f5#3f2d3f#3f2d3f#ddb6dd#ddb6dd#270027#270027
#faf1fa#faf1fa#1f161f#1f161f#eedaee#eedaee#130013#130013
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiel zur Kombination von Farbwert #dda0dd und Farbe darkmagenta

Wechsel der Unterstreichung bei Hover mit Befehl a

Einen Verweis erzeugen Sie mit Befehl <a>. Diesen können Sie hervorheben und farblich gestalten.

Die Farbe der Unterstreichung soll sich von Farbwert #dda0dd auf Farbe darkmagenta ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <a> in Farbwert #dda0dd vor.

Beispielsweise unterstreichen wir <a> mit Hilfe eines herausstehenden Rahmens mit 3 Pixel Dicke in Farbwert #dda0dd.

<style type="text/css"><!--
  a { border-bottom:3px outset #dda0dd; }
//-->
</style>
Jetzt fordern wir, dass bei Mausberührung die Farbe der Unterstreichung auf darkmagenta geändert wird.
<style type="text/css"><!--
  a: hover { 
    border-bottom-color: darkmagenta;
  }
//-->
</style>

Die Idee ist dabei, verschiedene Formatierungen für Inhalt und Unterstreichung zu haben. Öfter sieht man dies bei Verweisen. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Hierbei handelt es sich aber nicht um eine wirkliche Unterstreichung, der Text hat keine Unterstreichung. Sie wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Weiteres zu a können Sie in Verweise und Protokolle in HTML nachlesen. Einzelheiten des hier genutzten HTML-Tag a finden Sie in der HTML Referenz unter <a>.

Tabelle der 120 HTML Farbnamen

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

Weitere Farbtabellen