Ressourcen: 137 HTML Farbnamen - Kombination von Farbe thistle und Farbwert #00bfff

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.

Hintergrundfarbe thistle			Schriftfarbwert #00bfff
Detail	:	Hintergrund thistle	Detail	:	Schrift #00bfff
Farbe	:	thistle	Farbwert	:	#00bfff
Farbwert	:	#d8bfd8	Farbe	:	deepskyblue
HTML	:	thistle	HTML	:	#00bfff
HTML (Wert)	:	#d8bfd8	HTML (Wert)	:	#00bfff
CSS	:	thistle	CSS	:	#00bfff
CSS (Wert)	:	#d8bfd8	CSS (Wert)	:	#00bfff
CSS (kürzest)	:	#d8bfd8	CSS (kürzest)	:	#00bfff
CSS (RGB)	:	rgb(216,191,216)	CSS (RGB)	:	rgb(0,191,255)
CSS (%RGB)	:	rgb(84%,74%,84%)	CSS (%RGB)	:	rgb(0%,74%,100%)

Verlauf Hintergrundfarbe thistle nach Schriftfarbwert #00bfff
#d8bfd8	#b9bfdd	#9abfe3	#7bbfe8	#5cbfee	#3dbff3	#1ebff9	#00bfff
#d8bfd8	#b9bfdd	#9abfe3	#7bbfe8	#5cbfee	#3dbff3	#1ebff9	#00bfff

Kombination von thistle und #00bfff
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit der Farben #00bfff und thistle ergibt sich zu 94.05%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 5.95%. #00bfff eignet sich nicht als Schriftfarbe auf Hintergrund thistle. Weder der Helligkeitsunterschied noch der Farbunterschied sind ausreichend.

Hintergrundfarbe thistle				Schriftfarbwert #00bfff
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#d8bfd8	#d8bfd8	#d8bfd8	#d8bfd8	#00bfff	#00bfff	#00bfff	#00bfff
#ddc8dd	#ddc8dd	#b9a3b9	#b9a3b9	#24c8ff	#24c8ff	#00a3da	#00a3da
#e3d1e3	#e3d1e3	#9a889a	#9a889a	#48d1ff	#48d1ff	#0088b6	#0088b6
#e8dae8	#e8dae8	#7b6d7b	#7b6d7b	#6ddaff	#6ddaff	#006d91	#006d91
#eee3ee	#eee3ee	#5c515c	#5c515c	#91e3ff	#91e3ff	#00516d	#00516d
#f3ecf3	#f3ecf3	#3d363d	#3d363d	#b6ecff	#b6ecff	#003648	#003648
#f9f5f9	#f9f5f9	#1e1b1e	#1e1b1e	#daf5ff	#daf5ff	#001b24	#001b24
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe thistle und Farbwert #00bfff

Zebra-Effekt mit Tag tr

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, spricht man vom Zebra-Effekt. Er unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <tr> mit den Hintergrundfarben Farbe thistle und Farbwert #00bfff.

<style type="text/css"><!--
  tr.ung { 
    background-color:thistle;
  }
  tr.ger { 
    background-color: #00bfff;
  }
//-->
</style>

Diese werden dann abwechselnd angewendet.

<table>
<tr class="ung"><td>T1-1</td><td>T2-1</td><td>T3-1</td></tr>
<tr class="ger"><td>T1-2</td><td>T2-2</td><td>T3-2</td></tr>
<tr class="ung"><td>T1-3</td><td>T2-3</td><td>T3-3</td></tr>
</table>

Mehr zu tr lesen Sie in Tabellen in HTML. Mehr zum hier gezeigten HTML-Tag <tr>.

Wechsel der Hintergrundfarbe bei Hover mit Befehl acronym

Die Hintergrundfarbe soll sich von Farbe thistle auf Farbwert #00bfff ändern, wenn man mit der Maus auf <acronym> zeigt. Wir bereiten zunächst die Formatierung von <acronym> in Farbe thistle vor.

Wir setzen in diesem Beispiel bei <acronym> die Hintergrundfarbe auf Farbe thistle. Die Textfarbe verändern wir nicht. Die Schriftart ändern wir auf sans-serif. Die Schriftgröße ändern wir auf 13px:

<style type="text/css"><!--
  acronym { 
    font-size: 13px; 
    font-family: sans-serif; 
    background-color: thistle;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Hover die Hintergrundfarbe zu #00bfff ändert.

<style type="text/css"><!--
  acronym:hover { 
    background-color:#00bfff;
  }
//-->
</style>

Die Beschreibung des Tag acronym erfahren Sie in der HTML Referenz unter <acronym>.