Ressourcen: 120 HTML Farbnamen - Kombination von Farbe beige und Farbe indigo

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 beige			Schriftfarbe indigo
Detail	:	Hintergrund beige	Detail	:	Schrift indigo
Farbe	:	beige	Farbe	:	indigo
Farbwert	:	#f5f5dc	Farbwert	:	#4b0082
HTML	:	beige	HTML	:	indigo
HTML (Wert)	:	#f5f5dc	HTML (Wert)	:	#4b0082
CSS	:	beige	CSS	:	indigo
CSS (Wert)	:	#f5f5dc	CSS (Wert)	:	#4b0082
CSS (kürzest)	:	#f5f5dc	CSS (kürzest)	:	#4b0082
CSS (RGB)	:	rgb(245,245,220)	CSS (RGB)	:	rgb(75,0,130)
CSS (%RGB)	:	rgb(96%,96%,86%)	CSS (%RGB)	:	rgb(29%,0%,50%)

Verlauf Hintergrundfarbe beige nach Schriftfarbe indigo
#f5f5dc	#dcd2cf	#c4afc2	#ac8cb5	#9369a8	#7b469b	#63238e	#4b0082
#f5f5dc	#dcd2cf	#c4afc2	#ac8cb5	#9369a8	#7b469b	#63238e	#4b0082

Kombination von beige und indigo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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.				Die Ähnlichkeit von indigo und beige beträgt 44.27%. Die Lesbarkeit dieser Kombination bewerte ich mit 55.73%. indigo eignet sich als Schriftfarbe auf Hintergrund beige, weil sowohl der Unterschied in den Helligkeiten als auch der Farbenunterschied geeignet sind.

Hintergrundfarbe beige				Schriftfarbe indigo
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f5f5dc	#f5f5dc	#f5f5dc	#f5f5dc	#4b0082	#4b0082	#4b0082	#4b0082
#f6f6e1	#f6f6e1	#d2d2bc	#d2d2bc	#642493	#642493	#40006f	#40006f
#f7f7e6	#f7f7e6	#afaf9d	#afaf9d	#7e48a5	#7e48a5	#35005c	#35005c
#f9f9eb	#f9f9eb	#8c8c7d	#8c8c7d	#986db7	#986db7	#2a004a	#2a004a
#fafaf0	#fafaf0	#69695e	#69695e	#b191c9	#b191c9	#200037	#200037
#fcfcf5	#fcfcf5	#46463e	#46463e	#cbb6db	#cbb6db	#150025	#150025
#fdfdfa	#fdfdfa	#23231f	#23231f	#e5daed	#e5daed	#0a0012	#0a0012
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe beige und Farbe indigo

Zebra-Effekt bei HTML-Befehl th

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, redet man vom Zebra-Effekt. Der Effekt unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .even und .odd für <th> mit den Hintergrundfarben Farbe beige und Farbe indigo.

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

Diese werden abwechselnd angewendet.

<table>
<tr><td class="even">VA:A</td><td class="odd">VB:A</td><td class="even">VC:A</td></tr>
<tr><td class="even">VA:B</td><td class="odd">VB:B</td><td class="even">VC:B</td></tr>
<tr><td class="even">VA:C</td><td class="odd">VB:C</td><td class="even">VC:C</td></tr>
</table>

Mehr zu th können Sie in Tabellen in HTML nachsehen. Der HTML-Befehl th ist in der HTML Referenz bei <th> beschrieben.

Wechsel der Hintergrundfarbe bei Hover von Befehl center

Die Hintergrundfarbe soll sich von Farbe beige auf Farbe indigo ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <center> in Farbe beige vor.

Wir ändern zum Beispiel die Hintergrundfarbe von <center> auf Farbe beige. Die Textfarbe lassen wir unverändert, setzen jedoch die Schriftart auf courier new.

<style type="text/css"><!--
  center { 
    background-color: beige; 
    font-family: courier new;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Hover die Hintergrundfarbe auf indigo gesetzt wird.

<style type="text/css"><!--
  center:hover { 
    background-color:indigo;
  }
//-->
</style>

Weiteres zum Thema center erfahren Sie in Grundlegende Gestaltungselemente in HTML. Möglichkeiten des Befehl center lesen Sie in der HTML Referenz unter <center>.