Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray37 und Farbwert #f8f8f8

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 gray37			Schriftfarbwert #f8f8f8
Detail	:	Hintergrund gray37	Detail	:	Schrift #f8f8f8
Farbe	:	gray37	Farbwert	:	#f8f8f8
Farbwert	:	#252525	Farbe	:	gray248
HTML	:	gray37	HTML	:	#f8f8f8
HTML (Wert)	:	#252525	HTML (Wert)	:	#f8f8f8
CSS	:	gray37	CSS	:	#f8f8f8
CSS (Wert)	:	#252525	CSS (Wert)	:	#f8f8f8
CSS (kürzest)	:	#252525	CSS (kürzest)	:	#f8f8f8
CSS (RGB)	:	rgb(37,37,37)	CSS (RGB)	:	rgb(248,248,248)
CSS (%RGB)	:	rgb(14%,14%,14%)	CSS (%RGB)	:	rgb(97%,97%,97%)

Verlauf Hintergrundfarbe gray37 nach Schriftfarbwert #f8f8f8
#252525	#434343	#616161	#7f7f7f	#9d9d9d	#bbbbbb	#d9d9d9	#f8f8f8
#252525	#434343	#616161	#7f7f7f	#9d9d9d	#bbbbbb	#d9d9d9	#f8f8f8

Kombination von gray37 und #f8f8f8
Cras id velit ante. 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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit von #f8f8f8 und gray37 ergibt sich zu 31.27%. Die Lesbarkeit dieser Farbkombination liegt damit bei 68.73%. #f8f8f8 eignet sich als Schriftfarbe auf Hintergrund gray37. Der Unterschied in den Helligkeiten ist gut, der Unterschied in den Farben ebenso.

Hintergrundfarbe gray37				Schriftfarbwert #f8f8f8
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#252525	#252525	#252525	#252525	#f8f8f8	#f8f8f8	#f8f8f8	#f8f8f8
#444444	#444444	#1f1f1f	#1f1f1f	#f9f9f9	#f9f9f9	#d4d4d4	#d4d4d4
#636363	#636363	#1a1a1a	#1a1a1a	#fafafa	#fafafa	#b1b1b1	#b1b1b1
#828282	#828282	#151515	#151515	#fbfbfb	#fbfbfb	#8d8d8d	#8d8d8d
#a1a1a1	#a1a1a1	#0f0f0f	#0f0f0f	#fcfcfc	#fcfcfc	#6a6a6a	#6a6a6a
#c0c0c0	#c0c0c0	#0a0a0a	#0a0a0a	#fdfdfd	#fdfdfd	#464646	#464646
#dfdfdf	#dfdfdf	#050505	#050505	#fefefe	#fefefe	#232323	#232323
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray37 und Farbwert #f8f8f8

Füllen und Umranden bei HTML-Tag iframe

Für dieses Beispiel umranden wir <iframe> mit einem gefurchten, 3 Punkte dicken Rahmen in Farbwert #f8f8f8 . Den Hintergrund von <iframe> färben wir entsprechend mit Farbe gray37. Mit HTML ist dies nicht machbar. Wir verwenden deshalb CSS.

<style type="text/css"><!--
  iframe { 
    background-color:gray37; 
    border-width:3pt; 
    border-color:#f8f8f8; 
    border-style:groove;
  }
//-->
</style>

Der hier genutzte Tag iframe ist in der HTML Referenz bei <iframe> beschrieben.

Wechsel der Umrandung bei Hover von HTML-Befehl label

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

In diesem Beispiel umranden wir <label> mit einem 5 Pixel dicken, gestrichelten Rahmen in Farbe gray37.

<style type="text/css"><!--
  label { border:5px dashed gray37; }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Rahmenfarbe auf #f8f8f8 geändert wird.

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

Weiteres zu label können Sie in Formulare in HTML lesen. Der hier gezeigte HTML-Befehl label ist in der HTML Referenz unter <label> zusammengestellt.