Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #bebebe und Farbe gray32

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 #bebebe			Schriftfarbe gray32
Detail	:	Hintergrund #bebebe	Detail	:	Schrift gray32
Farbwert	:	#bebebe	Farbe	:	gray32
Farbe	:	gray190	Farbwert	:	#202020
HTML	:	#bebebe	HTML	:	gray32
HTML (Wert)	:	#bebebe	HTML (Wert)	:	#202020
CSS	:	#bebebe	CSS	:	gray32
CSS (Wert)	:	#bebebe	CSS (Wert)	:	#202020
CSS (kürzest)	:	#bebebe	CSS (kürzest)	:	#202020
CSS (RGB)	:	rgb(190,190,190)	CSS (RGB)	:	rgb(32,32,32)
CSS (%RGB)	:	rgb(74%,74%,74%)	CSS (%RGB)	:	rgb(12%,12%,12%)

Verlauf Hintergrundfarbwert #bebebe nach Schriftfarbe gray32
#bebebe	#a7a7a7	#909090	#7a7a7a	#636363	#4d4d4d	#363636	#202020
#bebebe	#a7a7a7	#909090	#7a7a7a	#636363	#4d4d4d	#363636	#202020

Kombination von #bebebe und gray32
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				gray32 ist nicht als Schriftfarbe auf Hintergrund #bebebe geeignet. Zwar ist der Helligkeitsunterschied ok, die Farben selbst sind sich zu ähnlich. Die Ähnlichkeit von gray32 und #bebebe beträgt 58.26%. Die Lesbarkeit dieser Kombination liegt damit bei 41.74%.

Hintergrundfarbwert #bebebe				Schriftfarbe gray32
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#bebebe	#bebebe	#bebebe	#bebebe	#202020	#202020	#202020	#202020
#c7c7c7	#c7c7c7	#a2a2a2	#a2a2a2	#3f3f3f	#3f3f3f	#1b1b1b	#1b1b1b
#d0d0d0	#d0d0d0	#878787	#878787	#5f5f5f	#5f5f5f	#161616	#161616
#d9d9d9	#d9d9d9	#6c6c6c	#6c6c6c	#7f7f7f	#7f7f7f	#121212	#121212
#e3e3e3	#e3e3e3	#515151	#515151	#9f9f9f	#9f9f9f	#0d0d0d	#0d0d0d
#ececec	#ececec	#363636	#363636	#bfbfbf	#bfbfbf	#090909	#090909
#f5f5f5	#f5f5f5	#1b1b1b	#1b1b1b	#dfdfdf	#dfdfdf	#040404	#040404
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #bebebe und Farbe gray32

Wechsel der Textfarbe bei Hover mit Befehl thead

Die Textfarbe soll sich von Farbwert #bebebe auf Farbe gray32 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <thead> in Farbwert #bebebe vor.

Wir legen als Beispiel Farbwert #bebebe als Textfarbe von <thead> fest. Zwar verändern wir die Hintergrundfarbe nicht, setzen jedoch die Schriftart auf sans-serif und vergrößern die Größe der Schrift auf 123%.

<style type="text/css"><!--
  thead { 
    font-size:123%; 
    color:#bebebe; 
    font-family:sans-serif;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Hover die Textfarbe auf gray32 ändert.

<style type="text/css"><!--
  thead: hover { 
    color: gray32;
  }
//-->
</style>

Weiteres zum Thema thead lesen Sie in Tabellen in HTML. Die Beschreibung vom hier genutzten HTML-Befehl thead finden Sie in der HTML Referenz unter <thead>.

Füllen und Umranden bei Befehl a

Einen Link erzeugen Sie mit Befehl <a>. Diesen können Sie farblich gestalten.

Bei diesem Beispiel umranden wir <a> mit einem 5 Pixel dicken, einfallenden Rahmen in Farbe gray32 . Die Hintergrundfarbe für <a> färben wir entsprechend mit Farbwert #bebebe. Dies ist in HTML so kaum möglich. Wir nutzen daher CSS zur Formatierung.

<style type="text/css"><!--
  a { 
    border-color:gray32; 
    background-color:#bebebe; 
    border-width:5px; 
    border-style:inset;
  }
//-->
</style>

Mehr zum Thema können Sie in Verweise und Protokolle in HTML lesen. Einzelheiten vom hier verwendeten Tag a sind in der HTML Referenz unter <a> zusammengestellt.