Ressourcen: 120 HTML Farbnamen - Kombination von Farbe seashell und Farbe orchid

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 seashell

Schriftfarbe orchid

DetailHintergrund seashell DetailSchrift orchid 
Farbe :seashellFarbe :orchid
Farbwert :#fff5eeFarbwert :#da70d6
HTML:seashellHTML:orchid
HTML (Wert):#fff5eeHTML (Wert):#da70d6
CSS:seashellCSS:orchid
CSS (Wert):#fff5eeCSS (Wert):#da70d6
CSS (kürzest):#fff5eeCSS (kürzest):#da70d6
CSS (RGB):rgb(255,245,238)CSS (RGB):rgb(218,112,214)
CSS (%RGB):rgb(100%,96%,93%)CSS (%RGB):rgb(85%,43%,83%)

Verlauf Hintergrundfarbe seashell nach Schriftfarbe orchid

#fff5ee#f9e2ea#f4cfe7#efbce3#e9a9e0#e496dc#df83d9#da70d6
#fff5ee#f9e2ea#f4cfe7#efbce3#e9a9e0#e496dc#df83d9#da70d6

Kombination von seashell und orchid

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

orchid ist nicht als Schriftfarbe auf Hintergrund seashell geeignet. Sowohl Helligkeit als auch die Farben sind sich zu ähnlich.

Die Ähnlichkeit der Farben orchid und seashell ergibt sich zu 87.20%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 12.80%.

Hintergrundfarbe seashell

Schriftfarbe orchid

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#fff5ee#fff5ee#fff5ee#fff5ee#da70d6#da70d6#da70d6#da70d6
#fff6f0#fff6f0#dad2cc#dad2cc#df84db#df84db#ba60b7#ba60b7
#fff7f2#fff7f2#b6afaa#b6afaa#e498e1#e498e1#9b5098#9b5098
#fff9f5#fff9f5#918c88#918c88#e9ade7#e9ade7#7c407a#7c407a
#fffaf7#fffaf7#6d6966#6d6966#efc1ed#efc1ed#5d305b#5d305b
#fffcfa#fffcfa#484644#484644#f4d6f3#f4d6f3#3e203d#3e203d
#fffdfc#fffdfc#242322#242322#f9eaf9#f9eaf9#1f101e#1f101e
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiele zur Kombination von Farbe seashell und Farbe orchid

Text- und Unterstreichungsfarben mit HTML-Tag caption

Wir ändern für dieses Beispiel die Textfarbe von <caption> auf Farbe orchid. Die Schriftart setzen wir auf arial. Die Schriftgröße setzen wir auf 12px. Wir unterstreichen den Inhalt von <caption> mit Hilfe eines doppelten Rahmens mit 5 Punkte Dicke in Farbe seashell. In HTML geht das kaum. Wir nutzen deshalb CSS.

<style type="text/css"><!--
  caption { 
    border-bottom-width:5pt; 
    border-bottom-style:double; 
    font-family:arial; 
    font-size:12px; 
    color:orchid; 
    border-bottom-color:seashell;
  }
//-->
</style>

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

Mehr zum Thema lesen Sie in Tabellen in HTML. Der HTML-Tag caption ist in der HTML Referenz unter <caption> genau beschrieben.

Wechsel der Textfarbe bei Hover bei HTML-Tag span

Die Textfarbe soll sich von Farbe seashell auf Farbe orchid ändern, wenn man mit der Maus auf <span> zeigt. Wir bereiten zunächst die Darstellung von <span> in Farbe seashell vor.

Wir legen zum Beispiel Farbe seashell als Textfarbe von <span> fest. Die Hintergrundfarbe lassen wir unverändert. Die Schriftart setzen wir auf sans-serif.

<style type="text/css"><!--
  span { 
    font-family: sans-serif; 
    color: seashell;
  }
//-->
</style>
Nun fordern wir, dass sich bei Berührung mit der Maus die Textfarbe zu orchid ändert.
<style type="text/css"><!--
  span:hover { 
    color:orchid;
  }
//-->
</style>

Einzelheiten vom Befehl span sind in der HTML Referenz bei <span> zusammengestellt.

Tabelle der 120 HTML Farbnamen

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

Weitere Farbtabellen