Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #1e90ff und Farbwert #b8860b

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 #1e90ff			Schriftfarbwert #b8860b
Detail	:	Hintergrund #1e90ff	Detail	:	Schrift #b8860b
Farbwert	:	#1e90ff	Farbwert	:	#b8860b
Farbe	:	dodgerblue	Farbe	:	darkgoldenrod
HTML	:	#1e90ff	HTML	:	#b8860b
HTML (Wert)	:	#1e90ff	HTML (Wert)	:	#b8860b
CSS	:	#1e90ff	CSS	:	#b8860b
CSS (Wert)	:	#1e90ff	CSS (Wert)	:	#b8860b
CSS (kürzest)	:	#1e90ff	CSS (kürzest)	:	#b8860b
CSS (RGB)	:	rgb(30,144,255)	CSS (RGB)	:	rgb(184,134,11)
CSS (%RGB)	:	rgb(11%,56%,100%)	CSS (%RGB)	:	rgb(72%,52%,4%)

Verlauf Hintergrundfarbwert #1e90ff nach Schriftfarbwert #b8860b
#1e90ff	#348edc	#4a8db9	#608b96	#768a73	#8c8850	#a2872d	#b8860b
#1e90ff	#348edc	#4a8db9	#608b96	#768a73	#8c8850	#a2872d	#b8860b

Kombination von #1e90ff und #b8860b
Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				#b8860b ist nicht als Schriftfarbe auf Hintergrund #1e90ff geeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind geeignet. Die Ähnlichkeit von #b8860b und #1e90ff ergibt sich zu 95.21%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 4.79%.

Hintergrundfarbwert #1e90ff				Schriftfarbwert #b8860b
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#1e90ff	#1e90ff	#1e90ff	#1e90ff	#b8860b	#b8860b	#b8860b	#b8860b
#3e9fff	#3e9fff	#197bda	#197bda	#c2972d	#c2972d	#9d7209	#9d7209
#5eafff	#5eafff	#1566b6	#1566b6	#cca850	#cca850	#835f07	#835f07
#7ebfff	#7ebfff	#115291	#115291	#d6b973	#d6b973	#694c06	#694c06
#9ecfff	#9ecfff	#0c3d6d	#0c3d6d	#e0cb96	#e0cb96	#4e3904	#4e3904
#bedfff	#bedfff	#082948	#082948	#eadcb9	#eadcb9	#342603	#342603
#deefff	#deefff	#041424	#041424	#f4eddc	#f4eddc	#1a1301	#1a1301
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #1e90ff und Farbwert #b8860b

Zebra-Effekt mit Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man von einem so genannten Zebra-Effekt. Der Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .gerade und .ungerade für <td> mit den Hintergrundfarben Farbwert #1e90ff und Farbwert #b8860b.

<style type="text/css"><!--
  td.gerade { 
    background-color: #1e90ff;
  }
  td.ungerade { 
    background-color:#b8860b;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd verwendet.

<table>
<tr><td class="gerade">M1/1</td><td class="ungerade">M2/1</td><td class="gerade">M3/1</td></tr>
<tr><td class="gerade">M1/2</td><td class="ungerade">M2/2</td><td class="gerade">M3/2</td></tr>
<tr><td class="gerade">M1/3</td><td class="ungerade">M2/3</td><td class="gerade">M3/3</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML nachlesen. Weiteres zum hier verwendeten HTML-Befehl td erfahren Sie in der HTML Referenz unter <td>.

Wechsel der Textfarbe bei Hover von HTML-Tag address

Die Textfarbe soll sich von Farbwert #1e90ff auf Farbwert #b8860b ändern, wenn man mit der Maus auf <address> zeigt. Wir bereiten zunächst eine Darstellung von <address> in Farbwert #1e90ff vor.

Wir legen für dieses Beispiel Farbwert #1e90ff als Textfarbe von <address> fest. Die Hintergrundfarbe verändern wir nicht, setzen jedoch die Schriftart auf verdana. Die Größe der Schrift setzen wir auf 9pt.

<style type="text/css"><!--
  address { 
    font-family:verdana; 
    font-size:9pt; 
    color:#1e90ff;
  }
//-->
</style>

Nun stellen wir ein, dass bei Hover die Textfarbe auf #b8860b gesetzt wird.

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

Weiteres zum Thema address können Sie in Blockorientierte Elemente in HTML erfahren. Einzelheiten vom Befehl <address>.