Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #7d7d7d und Farbe gray92

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).

Hintergrundfarbwert #7d7d7d			Schriftfarbe gray92
Detail	:	Hintergrund #7d7d7d	Detail	:	Schrift gray92
Farbwert	:	#7d7d7d	Farbe	:	gray92
Farbe	:	gray125	Farbwert	:	#5c5c5c
HTML	:	#7d7d7d	HTML	:	gray92
HTML (Wert)	:	#7d7d7d	HTML (Wert)	:	#5c5c5c
CSS	:	#7d7d7d	CSS	:	gray92
CSS (Wert)	:	#7d7d7d	CSS (Wert)	:	#5c5c5c
CSS (kürzest)	:	#7d7d7d	CSS (kürzest)	:	#5c5c5c
CSS (RGB)	:	rgb(125,125,125)	CSS (RGB)	:	rgb(92,92,92)
CSS (%RGB)	:	rgb(49%,49%,49%)	CSS (%RGB)	:	rgb(36%,36%,36%)

Verlauf Hintergrundfarbwert #7d7d7d nach Schriftfarbe gray92
#7d7d7d	#787878	#737373	#6e6e6e	#6a6a6a	#656565	#606060	#5c5c5c
#7d7d7d	#787878	#737373	#6e6e6e	#6a6a6a	#656565	#606060	#5c5c5c

Kombination von #7d7d7d und gray92
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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. Cras id velit ante.				Auf Hintergrund #7d7d7d ist gray92 ungeeignet, weil sich die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit von gray92 und #7d7d7d ergibt sich zu 92.26%. Die Lesbarkeit dieser Farbkombination liegt damit bei 7.74%.

Hintergrundfarbwert #7d7d7d				Schriftfarbe gray92
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#7d7d7d	#7d7d7d	#7d7d7d	#7d7d7d	#5c5c5c	#5c5c5c	#5c5c5c	#5c5c5c
#8f8f8f	#8f8f8f	#6b6b6b	#6b6b6b	#737373	#737373	#4e4e4e	#4e4e4e
#a2a2a2	#a2a2a2	#595959	#595959	#8a8a8a	#8a8a8a	#414141	#414141
#b4b4b4	#b4b4b4	#474747	#474747	#a1a1a1	#a1a1a1	#343434	#343434
#c7c7c7	#c7c7c7	#353535	#353535	#b9b9b9	#b9b9b9	#272727	#272727
#d9d9d9	#d9d9d9	#232323	#232323	#d0d0d0	#d0d0d0	#1a1a1a	#1a1a1a
#ececec	#ececec	#111111	#111111	#e7e7e7	#e7e7e7	#0d0d0d	#0d0d0d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #7d7d7d und Farbe gray92

Wechsel der Unterstreichung bei Hover von HTML-Tag legend

Die Farbe der Unterstreichung soll sich von Farbwert #7d7d7d auf Farbe gray92 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <legend> in Farbwert #7d7d7d vor.

In diesem Beispiel unterstreichen wir <legend> mit einem doppelten Rahmen mit 5 Pixel Dicke in Farbwert #7d7d7d.

<style type="text/css"><!--
  legend { border-bottom:5px double #7d7d7d; }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Hover die Unterstreichungsfarbe zu gray92 ändert.

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

Die Idee ist, verschiedene Formatierungen für Inhalt und Unterstreichung zu nutzen. Manchmal sehen Sie das bei Verweisen. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Dies ist jedoch keine "wirkliche" Unterstreichung, der Text selbst hat überhaupt keine Unterstreichung. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Weiteres zum Thema können Sie in Formulare in HTML erfahren. Die Beschreibung des hier verwendeten Befehl legend finden Sie in der HTML Referenz unter <legend>.

Hintergrund/Text-Kombination bei HTML-Befehl select

Hier ändern wir die Textfarbe von <select> auf Farbe gray92 und die Hintergrundfarbe von <select> auf Farbwert #7d7d7d. Die Schriftart setzen wir auf sans-serif und als Schriftgröße entscheiden wir uns für 124%.

<style type="text/css"><!--
  select { 
    font-size:124%; 
    color:gray92; 
    background-color:#7d7d7d; 
    font-family:sans-serif;
  }
//-->
</style>

Weiteres zum Thema select können Sie in Formulare in HTML lesen. Mehr zum hier gezeigten Tag <select>.