Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray230 und Farbe gray177

Graustufen enthalten natürlich alle 16 Graustufen und insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 256 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 255 (d.h. hexadezimal 00 bis ff).

Hintergrundfarbe gray230			Schriftfarbe gray177
Detail	:	Hintergrund gray230	Detail	:	Schrift gray177
Farbe	:	gray230	Farbe	:	gray177
Farbwert	:	#e6e6e6	Farbwert	:	#b1b1b1
HTML	:	gray230	HTML	:	gray177
HTML (Wert)	:	#e6e6e6	HTML (Wert)	:	#b1b1b1
CSS	:	gray230	CSS	:	gray177
CSS (Wert)	:	#e6e6e6	CSS (Wert)	:	#b1b1b1
CSS (kürzest)	:	#e6e6e6	CSS (kürzest)	:	#b1b1b1
CSS (RGB)	:	rgb(230,230,230)	CSS (RGB)	:	rgb(177,177,177)
CSS (%RGB)	:	rgb(90%,90%,90%)	CSS (%RGB)	:	rgb(69%,69%,69%)

Verlauf Hintergrundfarbe gray230 nach Schriftfarbe gray177
#e6e6e6	#dedede	#d6d6d6	#cfcfcf	#c7c7c7	#c0c0c0	#b8b8b8	#b1b1b1
#e6e6e6	#dedede	#d6d6d6	#cfcfcf	#c7c7c7	#c0c0c0	#b8b8b8	#b1b1b1

Kombination von gray230 und gray177
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante.				gray177 eignet sich nicht als Schriftfarbe auf Hintergrund gray230. Weder der Helligkeitsunterschied noch der Farbunterschied sind ausreichend. Die Ähnlichkeit der Farben gray177 und gray230 ergibt sich zu 91.82%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 8.18%.

Hintergrundfarbe gray230				Schriftfarbe gray177
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#e6e6e6	#e6e6e6	#e6e6e6	#e6e6e6	#b1b1b1	#b1b1b1	#b1b1b1	#b1b1b1
#e9e9e9	#e9e9e9	#c5c5c5	#c5c5c5	#bcbcbc	#bcbcbc	#979797	#979797
#ededed	#ededed	#a4a4a4	#a4a4a4	#c7c7c7	#c7c7c7	#7e7e7e	#7e7e7e
#f0f0f0	#f0f0f0	#838383	#838383	#d2d2d2	#d2d2d2	#656565	#656565
#f4f4f4	#f4f4f4	#626262	#626262	#dddddd	#dddddd	#4b4b4b	#4b4b4b
#f7f7f7	#f7f7f7	#414141	#414141	#e8e8e8	#e8e8e8	#323232	#323232
#fbfbfb	#fbfbfb	#202020	#202020	#f3f3f3	#f3f3f3	#191919	#191919
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray230 und Farbe gray177

Text- und Unterstreichungsfarben von Tag label

Wir ändern in diesem Beispiel die Textfarbe von <label> auf Farbe gray177. Die Schriftart setzen wir auf verdana. Die Schriftgröße setzen wir auf 13px. Wir unterstreichen den Inhalt von <label> mit Hilfe eines herausstehenden Rahmens mit 3 Punkte Dicke in Farbe gray230. Das ist in HTML so kaum möglich. Deshalb formatieren wir mit CSS.

<style type="text/css"><!--
  label { 
    color:gray177; 
    font-size:13px; 
    border-bottom:3pt outset gray230; 
    font-family:verdana;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Mehr zum Thema lesen Sie in Formulare in HTML. Einzelheiten vom HTML-Tag label erfahren Sie in der HTML Referenz unter <label>.

Wechsel der Hintergrundfarbe bei Hover von HTML-Tag a

Einen Verweis erzeugt man mit HTML-Tag <a>. Er kann hervorgehoben und farblich gestaltet werden.

Die Hintergrundfarbe soll sich von Farbe gray230 auf Farbe gray177 ändern, wenn man mit der Maus auf <a> zeigt. Wir bereiten zunächst eine Formatierung von <a> in Farbe gray230 vor.

Wir ändern zum Beispiel bei <a> die Hintergrundfarbe auf Farbe gray230. Die Textfarbe lassen wir unverändert. Die Schriftart setzen wir auf courier new.

<style type="text/css"><!--
  a { 
    font-family: courier new; 
    background-color: gray230;
  }
//-->
</style>

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

<style type="text/css"><!--
  a: hover { 
    background-color: gray177;
  }
//-->
</style>

Weiteres zu a können Sie in Verweise und Protokolle in HTML lesen. Weiteres zum HTML-Befehl a lesen Sie in der HTML Referenz unter <a>.