Ressourcen: 16 Graustufen in HTML - Kombination von Farbe white und Farbwert #cccccc

Graustufen enthalten insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 16 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 15 (d.h. hexadezimal 0 bis f) für r, g und b.

Hintergrundfarbe white			Schriftfarbwert #cccccc
Detail	:	Hintergrund white	Detail	:	Schrift #cccccc
Farbe	:	white	Farbwert	:	#cccccc
Farbwert	:	#ffffff	Farbe	:	gray204
HTML	:	white	HTML	:	#cccccc
HTML (Wert)	:	#ffffff	HTML (Wert)	:	#cccccc
CSS	:	white	CSS	:	#cccccc
CSS (Wert)	:	#ffffff	CSS (Wert)	:	#cccccc
CSS (kürzest)	:	#fff	CSS (kürzest)	:	#ccc
CSS (RGB)	:	rgb(255,255,255)	CSS (RGB)	:	rgb(204,204,204)
CSS (%RGB)	:	rgb(100%,100%,100%)	CSS (%RGB)	:	rgb(80%,80%,80%)

Verlauf Hintergrundfarbe white nach Schriftfarbwert #cccccc
#ffffff	#f7f7f7	#f0f0f0	#e9e9e9	#e1e1e1	#dadada	#d3d3d3	#cccccc
#ffffff	#f7f7f7	#f0f0f0	#e9e9e9	#e1e1e1	#dadada	#d3d3d3	#cccccc

Kombination von white und #cccccc
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				#cccccc eignet sich nicht als Schriftfarbe auf Hintergrund white, weil weder der Helligkeitsunterschied noch der Farbunterschied ausreichend sind. Die Ähnlichkeit von #cccccc und white ergibt sich zu 92.35%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 7.65%.

Hintergrundfarbe white				Schriftfarbwert #cccccc
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffffff	#ffffff	#ffffff	#ffffff	#cccccc	#cccccc	#cccccc	#cccccc
#ffffff	#ffffff	#dadada	#dadada	#d3d3d3	#d3d3d3	#aeaeae	#aeaeae
#ffffff	#ffffff	#b6b6b6	#b6b6b6	#dadada	#dadada	#919191	#919191
#ffffff	#ffffff	#919191	#919191	#e1e1e1	#e1e1e1	#747474	#747474
#ffffff	#ffffff	#6d6d6d	#6d6d6d	#e9e9e9	#e9e9e9	#575757	#575757
#ffffff	#ffffff	#484848	#484848	#f0f0f0	#f0f0f0	#3a3a3a	#3a3a3a
#ffffff	#ffffff	#242424	#242424	#f7f7f7	#f7f7f7	#1d1d1d	#1d1d1d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe white und Farbwert #cccccc

Wechsel der Hintergrundfarbe bei Hover mit Tag fieldset

Die Hintergrundfarbe soll sich von Farbe white auf Farbwert #cccccc ändern, wenn man mit der Maus auf <fieldset> zeigt. Bereiten wir zunächst die Darstellung von <fieldset> in Farbe white vor.

Wir legen für dieses Beispiel bei <fieldset> die Hintergrundfarbe auf Farbe white fest:

<style type="text/css"><!--
  fieldset { 
    background-color:white;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Berührung mit der Maus die Hintergrundfarbe auf #cccccc ändert.

<style type="text/css"><!--
  fieldset: hover { 
    background-color: #cccccc;
  }
//-->
</style>

Weiteres zum Thema lesen Sie in Formulare in HTML. Einzelheiten des Befehl fieldset erfahren Sie in der HTML Referenz unter <fieldset>.

Zebra-Effekt von HTML-Tag tr

Man redet von einem so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Er unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ying und .yang für <tr> mit den Hintergrundfarben Farbe white und Farbwert #cccccc.

<style type="text/css"><!--
  tr.ying { 
    background-color:white;
  }
  tr.yang { 
    background-color: #ccc;
  }
//-->
</style>

Diese CSS-Klassen werden dann abwechselnd verwendet.

<table>
<tr class="ying"><td><tt>a~a</td><td></tt>b~a</td><td><tt>c~a</td></tr>
<tr class="yang"><td></tt>a~b</td><td><tt>b~b</td><td></tt>c~b</td></tr>
<tr class="ying"><td><tt>a~c</td><td></tt>b~c</td><td>@c~c</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML nachlesen. Weiteres zum hier gezeigten HTML-Tag tr ist in der HTML Referenz bei <tr> ausführlich gezeigt.