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

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 #ffffff
Detail	:	Hintergrund #808000	Detail	:	Schrift #ffffff
Farbwert	:	#808000	Farbwert	:	#ffffff
Farbe	:	olive	Farbe	:	white
HTML	:	#808000	HTML	:	#ffffff
HTML (Wert)	:	#808000	HTML (Wert)	:	#ffffff
CSS	:	#808000	CSS	:	#ffffff
CSS (Wert)	:	#808000	CSS (Wert)	:	#ffffff
CSS (kürzest)	:	#808000	CSS (kürzest)	:	#fff
CSS (RGB)	:	rgb(128,128,0)	CSS (RGB)	:	rgb(255,255,255)
CSS (%RGB)	:	rgb(50%,50%,0%)	CSS (%RGB)	:	rgb(100%,100%,100%)

Verlauf Hintergrundfarbwert #808000 nach Schriftfarbwert #ffffff
#808000	#929224	#a4a448	#b6b66d	#c8c891	#dadab6	#ececda	#ffffff
#808000	#929224	#a4a448	#b6b66d	#c8c891	#dadab6	#ececda	#ffffff

Kombination von #808000 und #ffffff
Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				#ffffff eignet sich als Schriftfarbe auf Hintergrund #808000. Der Helligkeitsunterschied ist in Ordnung, der Unterschied in den Farben ebenso. Die Ähnlichkeit der Farben #ffffff und #808000 beträgt 80.02%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 19.98%.

Hintergrundfarbwert #808000				Schriftfarbwert #ffffff
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#808000	#808000	#808000	#808000	#ffffff	#ffffff	#ffffff	#ffffff
#929224	#929224	#6d6d00	#6d6d00	#ffffff	#ffffff	#dadada	#dadada
#a4a448	#a4a448	#5b5b00	#5b5b00	#ffffff	#ffffff	#b6b6b6	#b6b6b6
#b6b66d	#b6b66d	#494900	#494900	#ffffff	#ffffff	#919191	#919191
#c8c891	#c8c891	#363600	#363600	#ffffff	#ffffff	#6d6d6d	#6d6d6d
#dadab6	#dadab6	#242400	#242400	#ffffff	#ffffff	#484848	#484848
#ececda	#ececda	#121200	#121200	#ffffff	#ffffff	#242424	#242424
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #808000 und Farbwert #ffffff

Zebra-Effekt mit Tag th

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, redet man von einem so genannten Zebra-Effekt. Der Effekt unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <th> mit den Hintergrundfarben Farbwert #808000 und Farbwert #ffffff.

<style type="text/css"><!--
  th.ung { 
    background-color:#808000;
  }
  th.ger { 
    background-color:#ffffff;
  }
//-->
</style>

Diese werden dann abwechselnd verwendet.

<table>
<tr><td class="ung">WA~A</td><td class="ger">WB~A</td><td class="ung">WC~A</td></tr>
<tr><td class="ung">WA~B</td><td class="ger">WB~B</td><td class="ung">WC~B</td></tr>
<tr><td class="ung">WA~C</td><td class="ger">WB~C</td><td class="ung">WC~C</td></tr>
</table>

Mehr zum Thema erfahren Sie in Tabellen in HTML. Die Beschreibung vom Tag th erfahren Sie in der HTML Referenz unter <th>.

Wechsel der Umrandung bei Hover bei HTML-Tag td

Die Rahmenfarbe soll sich von Farbwert #808000 auf Farbwert #ffffff ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <td> in Farbwert #808000 vor.

In diesem Beispiel umranden wir <td> mit einem 4 Pixel dicken, gezahnten Rahmen in Farbwert #808000.

<style type="text/css"><!--
  td { 
    border-color:#808000; 
    border-style:ridge; 
    border-width:4px;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Mausberührung die Rahmenfarbe zu #ffffff ändert.

<style type="text/css"><!--
  td:hover { 
    border-color:#ffffff;
  }
//-->
</style>

Weiteres zum Thema können Sie in Tabellen in HTML lesen. Möglichkeiten vom hier verwendeten HTML-Befehl <td>.