Ressourcen: 17 HTML Standard Farbnamen - Kombination von Farbwert #808000 und Farbwert #ff00ff

HTML verfügt seit jeher über 17 Standard Farbnamen.

Sie entstehen dadurch, dass die 8 Grundfarben jeweils maximal und zu 50% enthalten sind.

Zu diesen 16 Farben kommt mit grey eine alternative Schreibweise für gray.

Hintergrundfarbwert #808000			Schriftfarbwert #ff00ff
Detail	:	Hintergrund #808000	Detail	:	Schrift #ff00ff
Farbwert	:	#808000	Farbwert	:	#ff00ff
Farbe	:	olive	Farbe	:	fuchsia
HTML	:	#808000	HTML	:	#ff00ff
HTML (Wert)	:	#808000	HTML (Wert)	:	#ff00ff
CSS	:	#808000	CSS	:	#ff00ff
CSS (Wert)	:	#808000	CSS (Wert)	:	#ff00ff
CSS (kürzest)	:	#808000	CSS (kürzest)	:	#f0f
CSS (RGB)	:	rgb(128,128,0)	CSS (RGB)	:	rgb(255,0,255)
CSS (%RGB)	:	rgb(50%,50%,0%)	CSS (%RGB)	:	rgb(100%,0%,100%)

Verlauf Hintergrundfarbwert #808000 nach Schriftfarbwert #ff00ff
#808000	#926d24	#a45b48	#b6496d	#c83691	#da24b6	#ec12da	#ff00ff
#808000	#926d24	#a45b48	#b6496d	#c83691	#da24b6	#ec12da	#ff00ff

Kombination von #808000 und #ff00ff
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				Auf Hintergrund #808000 ist #ff00ff ungeeignet, da sich die Helligkeiten zu ähnlich sind. Die Ähnlichkeit von #ff00ff und #808000 ergibt sich zu 93.63%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 6.37%.

Hintergrundfarbwert #808000				Schriftfarbwert #ff00ff
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#808000	#808000	#808000	#808000	#ff00ff	#ff00ff	#ff00ff	#ff00ff
#929224	#929224	#6d6d00	#6d6d00	#ff24ff	#ff24ff	#da00da	#da00da
#a4a448	#a4a448	#5b5b00	#5b5b00	#ff48ff	#ff48ff	#b600b6	#b600b6
#b6b66d	#b6b66d	#494900	#494900	#ff6dff	#ff6dff	#910091	#910091
#c8c891	#c8c891	#363600	#363600	#ff91ff	#ff91ff	#6d006d	#6d006d
#dadab6	#dadab6	#242400	#242400	#ffb6ff	#ffb6ff	#480048	#480048
#ececda	#ececda	#121200	#121200	#ffdaff	#ffdaff	#240024	#240024
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #808000 und Farbwert #ff00ff

Zebra-Effekt mit HTML-Befehl th

Man redet von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Dieser Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .even und .odd für <th> mit den Hintergrundfarben Farbwert #808000 und Farbwert #ff00ff.

<style type="text/css"><!--
  th.even { 
    background-color:#808000;
  }
  th.odd { 
    background-color:#f0f;
  }
//-->
</style>

Diese CSS-Klassen werden abwechselnd angewendet.

<table>
<tr><td class="even">La.a</td><td class="odd">Lb.a</td><td class="even">Lc.a</td></tr>
<tr><td class="even">La.b</td><td class="odd">Lb.b</td><td class="even">Lc.b</td></tr>
<tr><td class="even">La.c</td><td class="odd">Lb.c</td><td class="even">Lc.c</td></tr>
</table>

Mehr zum Thema th lesen Sie in Tabellen in HTML. Die Beschreibung vom hier gezeigten HTML-Befehl th finden Sie in der HTML Referenz unter <th>.

Wechsel der Hintergrundfarbe bei Hover mit HTML-Befehl button

Die Hintergrundfarbe soll sich von Farbwert #808000 auf Farbwert #ff00ff ändern, wenn man mit der Maus auf <button> zeigt. Bereiten wir zunächst eine Darstellung von <button> in Farbwert #808000 vor.

Z.B. ändern wir bei <button> die Hintergrundfarbe auf Farbwert #808000. Zwar lassen wir die Textfarbe unverändert, setzen jedoch die Schriftart auf verdana und verringern die Größe der Schrift auf 94%:

<style type="text/css"><!--
  button { 
    background-color: #808000; 
    font-size: 94%; 
    font-family: verdana;
  }
//-->
</style>

Jetzt fordern wir, dass bei Berührung mit der Maus die Hintergrundfarbe auf #ff00ff geändert wird.

<style type="text/css"><!--
  button: hover { 
    background-color: #f0f;
  }
//-->
</style>

Mehr zu button lesen Sie in Formulare in HTML. Mehr zum Tag button ist in der HTML Referenz bei <button> ausführlich beschrieben.