Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray24 und Farbe gray142

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 gray24			Schriftfarbe gray142
Detail	:	Hintergrund gray24	Detail	:	Schrift gray142
Farbe	:	gray24	Farbe	:	gray142
Farbwert	:	#181818	Farbwert	:	#8e8e8e
HTML	:	gray24	HTML	:	gray142
HTML (Wert)	:	#181818	HTML (Wert)	:	#8e8e8e
CSS	:	gray24	CSS	:	gray142
CSS (Wert)	:	#181818	CSS (Wert)	:	#8e8e8e
CSS (kürzest)	:	#181818	CSS (kürzest)	:	#8e8e8e
CSS (RGB)	:	rgb(24,24,24)	CSS (RGB)	:	rgb(142,142,142)
CSS (%RGB)	:	rgb(9%,9%,9%)	CSS (%RGB)	:	rgb(55%,55%,55%)

Verlauf Hintergrundfarbe gray24 nach Schriftfarbe gray142
#181818	#282828	#393939	#4a4a4a	#5b5b5b	#6c6c6c	#7d7d7d	#8e8e8e
#181818	#282828	#393939	#4a4a4a	#5b5b5b	#6c6c6c	#7d7d7d	#8e8e8e

Kombination von gray24 und gray142
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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.				Die Ähnlichkeit der Farben gray142 und gray24 beträgt 74.19%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 25.81%. Auf Hintergrund gray24 ist gray142 ungeeignet, da die Helligkeit und Farben zu ähnlich sind.

Hintergrundfarbe gray24				Schriftfarbe gray142
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#181818	#181818	#181818	#181818	#8e8e8e	#8e8e8e	#8e8e8e	#8e8e8e
#393939	#393939	#141414	#141414	#9e9e9e	#9e9e9e	#797979	#797979
#5a5a5a	#5a5a5a	#111111	#111111	#aeaeae	#aeaeae	#656565	#656565
#7b7b7b	#7b7b7b	#0d0d0d	#0d0d0d	#bebebe	#bebebe	#515151	#515151
#9c9c9c	#9c9c9c	#0a0a0a	#0a0a0a	#cecece	#cecece	#3c3c3c	#3c3c3c
#bdbdbd	#bdbdbd	#060606	#060606	#dedede	#dedede	#282828	#282828
#dedede	#dedede	#030303	#030303	#eeeeee	#eeeeee	#141414	#141414
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiel zur Kombination von Farbe gray24 und Farbe gray142

Wechsel der Unterstreichung bei Hover von Befehl blockquote

Die Unterstreichungsfarbe soll sich von Farbe gray24 auf Farbe gray142 ändern, wenn man mit der Maus auf <blockquote> zeigt. Bereiten wir zunächst eine Darstellung von <blockquote> in Farbe gray24 vor.

Hier unterstreichen wir <blockquote> mit Hilfe eines gezahnten Rahmens mit 4 Pixel Dicke in Farbe gray24.

<style type="text/css"><!--
  blockquote { 
    border-bottom-color:gray24; 
    border-bottom-style:ridge; 
    border-bottom-width:4px;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Berührung mit der Maus die Farbe der Unterstreichung zu gray142 ändert.

<style type="text/css"><!--
  blockquote: hover { 
    border-bottom-color: gray142;
  }
//-->
</style>

Die Idee ist dabei, verschiedene Formatierungen für Inhalt und Unterstreichung zu haben. Manchmal sehen Sie dies bei Verweisen. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Dies ist jedoch keine normale Unterstreichung, der Text hat gar keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Weiteres zu blockquote können Sie in Blockorientierte Elemente in HTML lesen. Zur Beschreibung des hier gezeigten Tag <blockquote>.