Ressourcen: 16 Graustufen in HTML - Kombination von Farbe gray68 und Farbwert #eeeeee

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 gray68			Schriftfarbwert #eeeeee
Detail	:	Hintergrund gray68	Detail	:	Schrift #eeeeee
Farbe	:	gray68	Farbwert	:	#eeeeee
Farbwert	:	#444444	Farbe	:	gray238
HTML	:	gray68	HTML	:	#eeeeee
HTML (Wert)	:	#444444	HTML (Wert)	:	#eeeeee
CSS	:	gray68	CSS	:	#eeeeee
CSS (Wert)	:	#444444	CSS (Wert)	:	#eeeeee
CSS (kürzest)	:	#444	CSS (kürzest)	:	#eee
CSS (RGB)	:	rgb(68,68,68)	CSS (RGB)	:	rgb(238,238,238)
CSS (%RGB)	:	rgb(26%,26%,26%)	CSS (%RGB)	:	rgb(93%,93%,93%)

Verlauf Hintergrundfarbe gray68 nach Schriftfarbwert #eeeeee
#444444	#5c5c5c	#747474	#8c8c8c	#a5a5a5	#bdbdbd	#d5d5d5	#eeeeee
#444444	#5c5c5c	#747474	#8c8c8c	#a5a5a5	#bdbdbd	#d5d5d5	#eeeeee

Kombination von gray68 und #eeeeee
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.				#eeeeee eignet sich als Schriftfarbe auf Hintergrund gray68, da Unterschied in den Helligkeiten und Unterschied in den Farben geeignet sind. Die Ähnlichkeit von #eeeeee und gray68 beträgt 60.03%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 39.97%.

Hintergrundfarbe gray68				Schriftfarbwert #eeeeee
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#444444	#444444	#444444	#444444	#eeeeee	#eeeeee	#eeeeee	#eeeeee
#5e5e5e	#5e5e5e	#3a3a3a	#3a3a3a	#f0f0f0	#f0f0f0	#cccccc	#cccccc
#797979	#797979	#303030	#303030	#f2f2f2	#f2f2f2	#aaaaaa	#aaaaaa
#949494	#949494	#262626	#262626	#f5f5f5	#f5f5f5	#888888	#888888
#aeaeae	#aeaeae	#1d1d1d	#1d1d1d	#f7f7f7	#f7f7f7	#666666	#666666
#c9c9c9	#c9c9c9	#131313	#131313	#fafafa	#fafafa	#444444	#444444
#e4e4e4	#e4e4e4	#090909	#090909	#fcfcfc	#fcfcfc	#222222	#222222
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray68 und Farbwert #eeeeee

Wechsel der Umrandung bei Hover mit HTML-Tag h5

Mit Tag <h5> erzeugen Sie eine Überschrift. Diese kann farblich gestaltet werden.

Die Rahmenfarbe soll sich von Farbe gray68 auf Farbwert #eeeeee ändern, wenn man mit der Maus auf <h5> zeigt. Bereiten wir zunächst eine Darstellung von <h5> in Farbe gray68 vor.

In diesem Beispiel umranden wir <h5> mit einem 3 Pixel dicken, herausstehenden Rahmen in Farbe gray68.

<style type="text/css"><!--
  h5 { border:3px outset gray68; }
//-->
</style>

Jetzt stellen wir ein, dass bei Hover die Rahmenfarbe auf #eeeeee geändert wird.

<style type="text/css"><!--
  h5: hover { 
    border-color: #eee;
  }
//-->
</style>

Weiteres zum Thema können Sie in Grundlegende Gestaltungselemente in HTML finden. Weiteres zum hier genutzten HTML-Tag h5 erfahren Sie in der HTML Referenz unter <h5>.

Wechsel der Hintergrundfarbe bei Hover bei HTML-Befehl button

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

Zum Beispiel legen wir Farbe gray68 als Hintergrundfarbe von <button> fest:

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

Jetzt stellen wir ein, dass bei Hover die Hintergrundfarbe auf #eeeeee geändert wird.

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

Mehr zum Thema können Sie in Formulare in HTML lesen. Der Befehl button ist in der HTML Referenz unter <button> beschrieben.