Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #ffdab9 und Farbwert #483d8b

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

Schriftfarbwert #483d8b

DetailHintergrund #ffdab9 DetailSchrift #483d8b 
Farbwert :#ffdab9Farbwert :#483d8b
Farbe :peachpuffFarbe :darkslateblue
HTML:#ffdab9HTML:#483d8b
HTML (Wert):#ffdab9HTML (Wert):#483d8b
CSS:#ffdab9CSS:#483d8b
CSS (Wert):#ffdab9CSS (Wert):#483d8b
CSS (kürzest):#ffdab9CSS (kürzest):#483d8b
CSS (RGB):rgb(255,218,185)CSS (RGB):rgb(72,61,139)
CSS (%RGB):rgb(100%,85%,72%)CSS (%RGB):rgb(28%,23%,54%)

Verlauf Hintergrundfarbwert #ffdab9 nach Schriftfarbwert #483d8b

#ffdab9#e4c3b2#caadab#b096a5#96809e#7c6998#625391#483d8b
#ffdab9#e4c3b2#caadab#b096a5#96809e#7c6998#625391#483d8b

Kombination von #ffdab9 und #483d8b

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

#483d8b ist nicht als Schriftfarbe auf Hintergrund #ffdab9 geeignet, weil sich die Farben zu ähnlich sind.

Die Ähnlichkeit der Farben #483d8b und #ffdab9 ergibt sich zu 67.14%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 32.86%.

Hintergrundfarbwert #ffdab9

Schriftfarbwert #483d8b

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#ffdab9#ffdab9#ffdab9#ffdab9#483d8b#483d8b#483d8b#483d8b
#ffdfc3#ffdfc3#daba9e#daba9e#62589b#62589b#3d3477#3d3477
#ffe4cd#ffe4cd#b69b84#b69b84#7c74ac#7c74ac#332b63#332b63
#ffe9d7#ffe9d7#917c69#917c69#9690bc#9690bc#29224f#29224f
#ffefe1#ffefe1#6d5d4f#6d5d4f#b0abcd#b0abcd#1e1a3b#1e1a3b
#fff4eb#fff4eb#483e34#483e34#cac7dd#cac7dd#141127#141127
#fff9f5#fff9f5#241f1a#241f1a#e4e3ee#e4e3ee#0a0813#0a0813
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiele zur Kombination von Farbwert #ffdab9 und Farbwert #483d8b

Text- und Unterstreichungsfarben von Tag caption

Hier ändern wir die Textfarbe von <caption> auf Farbwert #483d8b und lassen die Hintergrundfarbe unverändert. Die Schriftart ändern wir auf verdana und erhöhen die Schriftgröße auf 118%. Wir unterstreichen den Inhalt von <caption> mit Hilfe eines gepunkteten Rahmens mit 2 Pixel Dicke in Farbwert #ffdab9. Das ist in HTML kaum möglich. Wir nutzen deshalb CSS zur Formatierung.

<style type="text/css"><!--
  caption { 
    color:#483d8b; 
    border-bottom-style:dotted; 
    font-size:118%; 
    font-family:verdana; 
    border-bottom-color:#ffdab9; 
    border-bottom-width:2px;
  }
//-->
</style>

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

Mehr zu caption lesen Sie in Tabellen in HTML. Möglichkeiten vom Befehl caption erfahren Sie in der HTML Referenz unter <caption>.

Wechsel der Textfarbe bei Hover bei HTML-Tag h6

Eine Überschrift der 6. Stufe setzt man mit Befehl <h6>. Diese können Sie hervorheben und farblich gestalten.

Die Textfarbe soll sich von Farbwert #ffdab9 auf Farbwert #483d8b ändern, wenn man mit der Maus auf <h6> zeigt. Bereiten wir zunächst die Darstellung von <h6> in Farbwert #ffdab9 vor.

Wir legen hier bei <h6> die Textfarbe auf Farbwert #ffdab9 fest.

<style type="text/css"><!--
  h6 { 
    color: #ffdab9;
  }
//-->
</style>
Jetzt fordern wir, dass bei Mausberührung die Textfarbe auf #483d8b gesetzt wird.
<style type="text/css"><!--
  h6: hover { 
    color: #483d8b;
  }
//-->
</style>

Weiteres zu h6 erfahren Sie in Grundlegende Gestaltungselemente in HTML. Die Beschreibung des hier verwendeten Tag h6 finden Sie in der HTML Referenz unter <h6>.

Tabelle der 120 HTML Farbnamen

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

Weitere Farbtabellen