Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray107 und Farbe gray203

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 gray107			Schriftfarbe gray203
Detail	:	Hintergrund gray107	Detail	:	Schrift gray203
Farbe	:	gray107	Farbe	:	gray203
Farbwert	:	#6b6b6b	Farbwert	:	#cbcbcb
HTML	:	gray107	HTML	:	gray203
HTML (Wert)	:	#6b6b6b	HTML (Wert)	:	#cbcbcb
CSS	:	gray107	CSS	:	gray203
CSS (Wert)	:	#6b6b6b	CSS (Wert)	:	#cbcbcb
CSS (kürzest)	:	#6b6b6b	CSS (kürzest)	:	#cbcbcb
CSS (RGB)	:	rgb(107,107,107)	CSS (RGB)	:	rgb(203,203,203)
CSS (%RGB)	:	rgb(41%,41%,41%)	CSS (%RGB)	:	rgb(79%,79%,79%)

Verlauf Hintergrundfarbe gray107 nach Schriftfarbe gray203
#6b6b6b	#787878	#868686	#949494	#a1a1a1	#afafaf	#bdbdbd	#cbcbcb
#6b6b6b	#787878	#868686	#949494	#a1a1a1	#afafaf	#bdbdbd	#cbcbcb

Kombination von gray107 und gray203
Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				gray203 eignet sich nicht als Schriftfarbe auf Hintergrund gray107. Die Helligkeit und Farben sind zu ähnlich. Die Ähnlichkeit von gray203 und gray107 ergibt sich zu 84.36%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 15.64%.

Hintergrundfarbe gray107				Schriftfarbe gray203
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#6b6b6b	#6b6b6b	#6b6b6b	#6b6b6b	#cbcbcb	#cbcbcb	#cbcbcb	#cbcbcb
#808080	#808080	#5b5b5b	#5b5b5b	#d2d2d2	#d2d2d2	#aeaeae	#aeaeae
#959595	#959595	#4c4c4c	#4c4c4c	#d9d9d9	#d9d9d9	#919191	#919191
#aaaaaa	#aaaaaa	#3d3d3d	#3d3d3d	#e1e1e1	#e1e1e1	#747474	#747474
#bfbfbf	#bfbfbf	#2d2d2d	#2d2d2d	#e8e8e8	#e8e8e8	#575757	#575757
#d4d4d4	#d4d4d4	#1e1e1e	#1e1e1e	#f0f0f0	#f0f0f0	#3a3a3a	#3a3a3a
#e9e9e9	#e9e9e9	#0f0f0f	#0f0f0f	#f7f7f7	#f7f7f7	#1d1d1d	#1d1d1d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray107 und Farbe gray203

Wechsel der Unterstreichung bei Hover von HTML-Befehl strike

Die Unterstreichungsfarbe soll sich von Farbe gray107 auf Farbe gray203 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <strike> in Farbe gray107 vor.

Beispielsweise unterstreichen wir <strike> mit Hilfe eines herausstehenden Rahmens mit 4 Pixel Dicke in Farbe gray107.

<style type="text/css"><!--
  strike { 
    border-bottom-color:gray107; 
    border-bottom-width:4px; 
    border-bottom-style:outset;
  }
//-->
</style>

Nun fordern wir, dass bei Hover die Unterstreichungsfarbe auf gray203 geändert wird.

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

Die Idee ist hierbei, unabhängige Formatierungen für Inhalt und Unterstreichung zu verwenden. Manchmal sehen Sie dies bei Verweisen. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Es ist jedoch keine "normale" Unterstreichung, der Text selbst hat überhaupt keine Unterstreichung. Sie wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Weiteres zu strike können Sie in Text in HTML nachsehen. Einzelheiten des Befehl strike sind in der HTML Referenz bei <strike> beschrieben.

Füllen und Umranden mit HTML-Befehl acronym

In diesem Beispiel umranden wir <acronym> mit einem . Den Hintergrund von <acronym> setzen wir auf Farbe gray107. Das geht mit HTML nicht. Deshalb verwenden wir CSS zur Formatierung.

<style type="text/css"><!--
  acronym { border:5px ridge gray203; background-color:gray107; }
//-->
</style>

Mehr zum Befehl acronym erfahren Sie in der HTML Referenz unter <acronym>.