Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #a52a2a und Farbe aliceblue

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 #a52a2a			Schriftfarbe aliceblue
Detail	:	Hintergrund #a52a2a	Detail	:	Schrift aliceblue
Farbwert	:	#a52a2a	Farbe	:	aliceblue
Farbe	:	brown	Farbwert	:	#f0f8ff
HTML	:	#a52a2a	HTML	:	aliceblue
HTML (Wert)	:	#a52a2a	HTML (Wert)	:	#f0f8ff
CSS	:	#a52a2a	CSS	:	aliceblue
CSS (Wert)	:	#a52a2a	CSS (Wert)	:	#f0f8ff
CSS (kürzest)	:	#a52a2a	CSS (kürzest)	:	#f0f8ff
CSS (RGB)	:	rgb(165,42,42)	CSS (RGB)	:	rgb(240,248,255)
CSS (%RGB)	:	rgb(64%,16%,16%)	CSS (%RGB)	:	rgb(94%,97%,100%)

Verlauf Hintergrundfarbwert #a52a2a nach Schriftfarbe aliceblue
#a52a2a	#af4748	#ba6466	#c58285	#cf9fa3	#dabdc2	#e5dae0	#f0f8ff
#a52a2a	#af4748	#ba6466	#c58285	#cf9fa3	#dabdc2	#e5dae0	#f0f8ff

Kombination von #a52a2a und aliceblue
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 id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				Auf Hintergrund #a52a2a ist aliceblue ungeeignet. Zwar ist der Helligkeitsunterschied gut, die Farben selbst sind sich zu ähnlich. Die Ähnlichkeit von aliceblue und #a52a2a beträgt 68.55%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 31.45%.

Hintergrundfarbwert #a52a2a				Schriftfarbe aliceblue
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#a52a2a	#a52a2a	#a52a2a	#a52a2a	#f0f8ff	#f0f8ff	#f0f8ff	#f0f8ff
#b14848	#b14848	#8d2424	#8d2424	#f2f9ff	#f2f9ff	#cdd4da	#cdd4da
#be6666	#be6666	#751e1e	#751e1e	#f4faff	#f4faff	#abb1b6	#abb1b6
#cb8585	#cb8585	#5e1818	#5e1818	#f6fbff	#f6fbff	#898d91	#898d91
#d8a3a3	#d8a3a3	#461212	#461212	#f8fcff	#f8fcff	#666a6d	#666a6d
#e5c2c2	#e5c2c2	#2f0c0c	#2f0c0c	#fafdff	#fafdff	#444648	#444648
#f2e0e0	#f2e0e0	#170606	#170606	#fcfeff	#fcfeff	#222324	#222324
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #a52a2a und Farbe aliceblue

Zebra-Effekt mit HTML-Befehl td

Man spricht vom so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. 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 #a52a2a und Farbe aliceblue.

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

Diese CSS-Klassen werden abwechselnd genutzt.

<table>
<tr><td class="gerade">KA~A</td><td class="ungerade">KB~A</td><td class="gerade">KC~A</td></tr>
<tr><td class="gerade">KA~B</td><td class="ungerade">KB~B</td><td class="gerade">KC~B</td></tr>
<tr><td class="gerade">KA~C</td><td class="ungerade">KB~C</td><td class="gerade">KC~C</td></tr>
</table>

Weiteres zu td können Sie in Tabellen in HTML finden. Mehr zum hier verwendeten Tag td ist in der HTML Referenz unter <td> ausführlich gezeigt.

Wechsel der Umrandung bei Hover von HTML-Tag del

Die Rahmenfarbe soll sich von Farbwert #a52a2a auf Farbe aliceblue ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <del> in Farbwert #a52a2a vor.

In diesem Beispiel umranden wir <del> mit einem 2 Pixel dicken, doppelten Rahmen in Farbwert #a52a2a.

<style type="text/css"><!--
  del { 
    border-color: #a52a2a; 
    border-width: 2px; 
    border-style: double;
  }
//-->
</style>

Jetzt fordern wir, dass bei Berührung mit der Maus die Rahmenfarbe auf aliceblue gesetzt wird.

<style type="text/css"><!--
  del:hover { 
    border-color:aliceblue;
  }
//-->
</style>

Weiteres zum HTML-Befehl <del>.