Ressourcen: 137 HTML Farbnamen - Kombination von Farbe gray 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 gray			Schriftfarbwert #00bfff
Detail	:	Hintergrund gray	Detail	:	Schrift #00bfff
Farbe	:	gray	Farbwert	:	#00bfff
Farbwert	:	#808080	Farbe	:	deepskyblue
HTML	:	gray	HTML	:	#00bfff
HTML (Wert)	:	#808080	HTML (Wert)	:	#00bfff
CSS	:	gray	CSS	:	#00bfff
CSS (Wert)	:	#808080	CSS (Wert)	:	#00bfff
CSS (kürzest)	:	#808080	CSS (kürzest)	:	#00bfff
CSS (RGB)	:	rgb(128,128,128)	CSS (RGB)	:	rgb(0,191,255)
CSS (%RGB)	:	rgb(50%,50%,50%)	CSS (%RGB)	:	rgb(0%,74%,100%)

Verlauf Hintergrundfarbe gray nach Schriftfarbwert #00bfff
#808080	#6d8992	#5b92a4	#499bb6	#36a4c8	#24adda	#12b6ec	#00bfff
#808080	#6d8992	#5b92a4	#499bb6	#36a4c8	#24adda	#12b6ec	#00bfff

Kombination von gray und #00bfff
Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras id velit ante.				Die Ähnlichkeit der Farben #00bfff und gray ergibt sich zu 91.14%. Die Lesbarkeit dieser Kombination ergibt sich zu 8.86%. #00bfff eignet sich nicht als Schriftfarbe auf Hintergrund gray. Sowohl Helligkeit als auch die Farben sind zu ähnlich.

Hintergrundfarbe gray				Schriftfarbwert #00bfff
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#808080	#808080	#808080	#808080	#00bfff	#00bfff	#00bfff	#00bfff
#929292	#929292	#6d6d6d	#6d6d6d	#24c8ff	#24c8ff	#00a3da	#00a3da
#a4a4a4	#a4a4a4	#5b5b5b	#5b5b5b	#48d1ff	#48d1ff	#0088b6	#0088b6
#b6b6b6	#b6b6b6	#494949	#494949	#6ddaff	#6ddaff	#006d91	#006d91
#c8c8c8	#c8c8c8	#363636	#363636	#91e3ff	#91e3ff	#00516d	#00516d
#dadada	#dadada	#242424	#242424	#b6ecff	#b6ecff	#003648	#003648
#ececec	#ececec	#121212	#121212	#daf5ff	#daf5ff	#001b24	#001b24
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray und Farbwert #00bfff

Wechsel der Textfarbe bei Hover mit Befehl legend

Die Textfarbe soll sich von Farbe gray auf Farbwert #00bfff ändern, wenn man mit der Maus auf <legend> zeigt. Wir bereiten zunächst eine Formatierung von <legend> in Farbe gray vor.

Wir legen z.B. bei <legend> die Textfarbe auf Farbe gray fest. Zwar behalten wir die Hintergrundfarbe bei, setzen jedoch die Schriftart auf verdana.

<style type="text/css"><!--
  legend { 
    color: gray; 
    font-family: verdana;
  }
//-->
</style>

Nun stellen wir ein, dass bei Mausberührung die Textfarbe auf #00bfff gesetzt wird.

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

Mehr zu legend erfahren Sie in Formulare in HTML. Weiteres zum HTML-Befehl <legend>.

Zebra-Effekt mit HTML-Befehl td

Man spricht vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Er unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <td> mit den Hintergrundfarben Farbe gray und Farbwert #00bfff.

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

Diese werden dann abwechselnd angewendet.

<table>
<tr><td class="ung">H1-1</td><td class="ger">H2-1</td><td class="ung">H3-1</td></tr>
<tr><td class="ung">H1-2</td><td class="ger">H2-2</td><td class="ung">H3-2</td></tr>
<tr><td class="ung">H1-3</td><td class="ger">H2-3</td><td class="ung">H3-3</td></tr>
</table>

Mehr zu td können Sie in Tabellen in HTML nachsehen. Möglichkeiten des HTML-Tag td sind in der HTML Referenz bei <td> zusammengestellt.