Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #fffff0 und Farbe violet

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

Schriftfarbe violet

DetailHintergrund #fffff0 DetailSchrift violet 
Farbwert :#fffff0Farbe :violet
Farbe :ivoryFarbwert :#ee82ee
HTML:#fffff0HTML:violet
HTML (Wert):#fffff0HTML (Wert):#ee82ee
CSS:#fffff0CSS:violet
CSS (Wert):#fffff0CSS (Wert):#ee82ee
CSS (kürzest):#fffff0CSS (kürzest):#ee82ee
CSS (RGB):rgb(255,255,240)CSS (RGB):rgb(238,130,238)
CSS (%RGB):rgb(100%,100%,94%)CSS (%RGB):rgb(93%,50%,93%)

Verlauf Hintergrundfarbwert #fffff0 nach Schriftfarbe violet

#fffff0#fcedef#fadbef#f7c9ef#f5b7ee#f2a5ee#f093ee#ee82ee
#fffff0#fcedef#fadbef#f7c9ef#f5b7ee#f2a5ee#f093ee#ee82ee

Kombination von #fffff0 und violet

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. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.

violet eignet sich nicht als Schriftfarbe auf Hintergrund #fffff0. Weder der Helligkeitsunterschied noch der Farbunterschied sind geeignet.

Die Ähnlichkeit der Farben violet und #fffff0 beträgt 89.06%. Die Lesbarkeit dieser Farbkombination liegt damit bei 10.94%.

Hintergrundfarbwert #fffff0

Schriftfarbe violet

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#fffff0#fffff0#fffff0#fffff0#ee82ee#ee82ee#ee82ee#ee82ee
#fffff2#fffff2#dadacd#dadacd#f093f0#f093f0#cc6fcc#cc6fcc
#fffff4#fffff4#b6b6ab#b6b6ab#f2a5f2#f2a5f2#aa5caa#aa5caa
#fffff6#fffff6#919189#919189#f5b7f5#f5b7f5#884a88#884a88
#fffff8#fffff8#6d6d66#6d6d66#f7c9f7#f7c9f7#663766#663766
#fffffa#fffffa#484844#484844#fadbfa#fadbfa#442544#442544
#fffffc#fffffc#242422#242422#fcedfc#fcedfc#221222#221222
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiele zur Kombination von Farbwert #fffff0 und Farbe violet

Wechsel der Umrandung bei Hover von HTML-Befehl center

Die Rahmenfarbe soll sich von Farbwert #fffff0 auf Farbe violet ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <center> in Farbwert #fffff0 vor.

In diesem Beispiel umranden wir <center> mit einem 3 Pixel dicken, gestrichelten Rahmen in Farbwert #fffff0.

<style type="text/css"><!--
  center { border:3px dashed #fffff0; }
//-->
</style>
Nun stellen wir ein, dass bei Hover die Rahmenfarbe auf violet geändert wird.
<style type="text/css"><!--
  center: hover { 
    border-color: violet;
  }
//-->
</style>

Weiteres zum Thema center erfahren Sie in Grundlegende Gestaltungselemente in HTML. Der Tag center ist in der HTML Referenz unter <center> gezeigt.

Zebra-Effekt mit HTML-Befehl th

Man redet von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Der Effekt unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <th> mit unterschiedlichen Hintergrundfarben Farbwert #fffff0 und Farbe violet.

<style type="text/css"><!--
  th.ungerade { 
    background-color: #fffff0;
  }
  th.gerade { 
    background-color: violet;
  }
//-->
</style>

Diese CSS-Klassen werden dann abwechselnd genutzt.

<table>
<tr><td class="ungerade">KA-A</td><td class="gerade">KB-A</td><td class="ungerade">KC-A</td></tr>
<tr><td class="ungerade">KA-B</td><td class="gerade">KB-B</td><td class="ungerade">KC-B</td></tr>
<tr><td class="ungerade">KA-C</td><td class="gerade">KB-C</td><td class="ungerade">KC-C</td></tr>
</table>

Weiteres zum Thema finden Sie in Tabellen in HTML. Möglichkeiten vom Befehl th erfahren Sie in der HTML Referenz unter <th>.

Tabelle der 120 HTML Farbnamen

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

Weitere Farbtabellen