Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #bdb76b und Farbwert #000080

Netscape führte seinerzeit die websicheren Farben ein. Neben diesen, einem bestimmten Schema folgenden, Farbwerten, definierte man noch 120 Werte und ordnete ihnen Namen zu. Zusammen mit den 17 Standard-HTML-Farben, die ebenfalls Namen haben, ergeben sich so 137 HTML Farbnamen.

Hintergrundfarbwert #bdb76b			Schriftfarbwert #000080
Detail	:	Hintergrund #bdb76b	Detail	:	Schrift #000080
Farbwert	:	#bdb76b	Farbwert	:	#000080
Farbe	:	darkkhaki	Farbe	:	navy
HTML	:	#bdb76b	HTML	:	#000080
HTML (Wert)	:	#bdb76b	HTML (Wert)	:	#000080
CSS	:	#bdb76b	CSS	:	#000080
CSS (Wert)	:	#bdb76b	CSS (Wert)	:	#000080
CSS (kürzest)	:	#bdb76b	CSS (kürzest)	:	#000080
CSS (RGB)	:	rgb(189,183,107)	CSS (RGB)	:	rgb(0,0,128)
CSS (%RGB)	:	rgb(74%,71%,41%)	CSS (%RGB)	:	rgb(0%,0%,50%)

Verlauf Hintergrundfarbwert #bdb76b nach Schriftfarbwert #000080
#bdb76b	#a29c6e	#878271	#6c6874	#514e77	#36347a	#1b1a7d	#000080
#bdb76b	#a29c6e	#878271	#6c6874	#514e77	#36347a	#1b1a7d	#000080

Kombination von #bdb76b und #000080
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit der Farben #000080 und #bdb76b ergibt sich zu 63.15%. Die Lesbarkeit dieser Kombination bewerte ich mit 36.85%. #000080 eignet sich nicht als Schriftfarbe auf Hintergrund #bdb76b. Zwar ist der Helligkeitsunterschied in Ordnung, doch die Farben selbst sind zu ähnlich.

Hintergrundfarbwert #bdb76b				Schriftfarbwert #000080
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#bdb76b	#bdb76b	#bdb76b	#bdb76b	#000080	#000080	#000080	#000080
#c6c180	#c6c180	#a29c5b	#a29c5b	#242492	#242492	#00006d	#00006d
#cfcb95	#cfcb95	#87824c	#87824c	#4848a4	#4848a4	#00005b	#00005b
#d9d5aa	#d9d5aa	#6c683d	#6c683d	#6d6db6	#6d6db6	#000049	#000049
#e2e0bf	#e2e0bf	#514e2d	#514e2d	#9191c8	#9191c8	#000036	#000036
#ecead4	#ecead4	#36341e	#36341e	#b6b6da	#b6b6da	#000024	#000024
#f5f4e9	#f5f4e9	#1b1a0f	#1b1a0f	#dadaec	#dadaec	#000012	#000012
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #bdb76b und Farbwert #000080

Wechsel der Hintergrundfarbe bei Hover mit Tag a

Ein Link wird mit HTML-Tag <a> gesetzt. Dieser kann hervorgehoben und farblich gestaltet werden.

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

Wir setzen als Beispiel die Hintergrundfarbe von <a> auf Farbwert #bdb76b. Zwar lassen wir die Textfarbe unverändert, setzen jedoch die Schriftart auf monospace:

<style type="text/css"><!--
  a { 
    background-color:#bdb76b; 
    font-family:monospace;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Hintergrundfarbe auf #000080 geändert wird.

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

Mehr zum Thema a können Sie in Verweise und Protokolle in HTML nachlesen. Möglichkeiten vom hier verwendeten Befehl a erfahren Sie in der HTML Referenz unter <a>.

Zebra-Effekt bei HTML-Befehl tr

Man redet von einem so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Dieser Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .yang und .ying für <tr> mit unterschiedlichen Hintergrundfarben Farbwert #bdb76b und Farbwert #000080.

<style type="text/css"><!--
  tr.yang { 
    background-color: #bdb76b;
  }
  tr.ying { 
    background-color: #000080;
  }
//-->
</style>

Diese werden abwechselnd genutzt.

<table>
<tr class="yang"><td>Sa:a</td><td>Sb:a</td><td>Sc:a</td></tr>
<tr class="ying"><td>Sa:b</td><td>Sb:b</td><td>Sc:b</td></tr>
<tr class="yang"><td>Sa:c</td><td>Sb:c</td><td>Sc:c</td></tr>
</table>

Mehr zu tr können Sie in Tabellen in HTML finden. Die Beschreibung vom hier gezeigten Tag tr lesen Sie in der HTML Referenz unter <tr>.