Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #b22222 und Farbwert #bdb76b

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 #b22222			Schriftfarbwert #bdb76b
Detail	:	Hintergrund #b22222	Detail	:	Schrift #bdb76b
Farbwert	:	#b22222	Farbwert	:	#bdb76b
Farbe	:	firebrick	Farbe	:	darkkhaki
HTML	:	#b22222	HTML	:	#bdb76b
HTML (Wert)	:	#b22222	HTML (Wert)	:	#bdb76b
CSS	:	#b22222	CSS	:	#bdb76b
CSS (Wert)	:	#b22222	CSS (Wert)	:	#bdb76b
CSS (kürzest)	:	#b22222	CSS (kürzest)	:	#bdb76b
CSS (RGB)	:	rgb(178,34,34)	CSS (RGB)	:	rgb(189,183,107)
CSS (%RGB)	:	rgb(69%,13%,13%)	CSS (%RGB)	:	rgb(74%,71%,41%)

Verlauf Hintergrundfarbwert #b22222 nach Schriftfarbwert #bdb76b
#b22222	#b3372c	#b54c36	#b66141	#b8774b	#b98c56	#bba160	#bdb76b
#b22222	#b3372c	#b54c36	#b66141	#b8774b	#b98c56	#bba160	#bdb76b

Kombination von #b22222 und #bdb76b
Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. 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.				Die Ähnlichkeit der Farben #bdb76b und #b22222 ergibt sich zu 84.63%. Die Lesbarkeit dieser Farbkombination liegt damit bei 15.37%. Auf Hintergrund #b22222 ist #bdb76b ungeeignet, weil die Helligkeit und Farben zu ähnlich sind.

Hintergrundfarbwert #b22222				Schriftfarbwert #bdb76b
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#b22222	#b22222	#b22222	#b22222	#bdb76b	#bdb76b	#bdb76b	#bdb76b
#bd4141	#bd4141	#981d1d	#981d1d	#c6c180	#c6c180	#a29c5b	#a29c5b
#c86161	#c86161	#7f1818	#7f1818	#cfcb95	#cfcb95	#87824c	#87824c
#d38080	#d38080	#651313	#651313	#d9d5aa	#d9d5aa	#6c683d	#6c683d
#dea0a0	#dea0a0	#4c0e0e	#4c0e0e	#e2e0bf	#e2e0bf	#514e2d	#514e2d
#e9bfbf	#e9bfbf	#320909	#320909	#ecead4	#ecead4	#36341e	#36341e
#f4dfdf	#f4dfdf	#190404	#190404	#f5f4e9	#f5f4e9	#1b1a0f	#1b1a0f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #b22222 und Farbwert #bdb76b

Text- und Unterstreichungsfarben bei Tag a

Ein Hyperlink wird mit Befehl <a> gesetzt. Diesen können Sie hervorheben und farblich gestalten.

In diesem Beispiel ändern wir die Textfarbe von <a> auf Farbwert #bdb76b und lassen die Hintergrundfarbe unverändert. Die Schriftart ändern wir auf courier new. Die Schriftgröße setzen wir auf 85%. Wir unterstreichen den Inhalt von <a> mit Hilfe eines gezahnten Rahmens mit 5 Pixel Dicke in Farbwert #b22222. Dies geht in HTML kaum. Wir nutzen deshalb CSS.

<style type="text/css"><!--
  a { 
    color: #bdb76b; 
    font-family: courier new; 
    border-bottom-style: ridge; 
    font-size: 85%; 
    border-bottom-color: #b22222; 
    border-bottom-width: 5px;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Weiteres zu a können Sie in Verweise und Protokolle in HTML nachlesen. Zur Beschreibung des Befehl <a>.

Wechsel der Umrandung bei Hover mit Tag address

Die Rahmenfarbe soll sich von Farbwert #b22222 auf Farbwert #bdb76b ändern, wenn man mit der Maus auf <address> zeigt. Bereiten wir zunächst eine Formatierung von <address> in Farbwert #b22222 vor.

In diesem Beispiel umranden wir <address> mit einem 1 Pixel dicken, gepunkteten Rahmen in Farbwert #b22222.

<style type="text/css"><!--
  address { border:1px dotted #b22222; }
//-->
</style>

Jetzt stellen wir ein, dass bei Hover die Rahmenfarbe auf #bdb76b geändert wird.

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

Mehr zum Thema address können Sie in Blockorientierte Elemente in HTML erfahren. Weiteres zum Befehl address finden Sie in der HTML Referenz unter <address>.