Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray221 und Farbe gray46

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 gray221			Schriftfarbe gray46
Detail	:	Hintergrund gray221	Detail	:	Schrift gray46
Farbe	:	gray221	Farbe	:	gray46
Farbwert	:	#dddddd	Farbwert	:	#2e2e2e
HTML	:	gray221	HTML	:	gray46
HTML (Wert)	:	#dddddd	HTML (Wert)	:	#2e2e2e
CSS	:	gray221	CSS	:	gray46
CSS (Wert)	:	#dddddd	CSS (Wert)	:	#2e2e2e
CSS (kürzest)	:	#ddd	CSS (kürzest)	:	#2e2e2e
CSS (RGB)	:	rgb(221,221,221)	CSS (RGB)	:	rgb(46,46,46)
CSS (%RGB)	:	rgb(86%,86%,86%)	CSS (%RGB)	:	rgb(18%,18%,18%)

Verlauf Hintergrundfarbe gray221 nach Schriftfarbe gray46
#dddddd	#c4c4c4	#ababab	#929292	#797979	#606060	#474747	#2e2e2e
#dddddd	#c4c4c4	#ababab	#929292	#797979	#606060	#474747	#2e2e2e

Kombination von gray221 und gray46
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Die Ähnlichkeit der Farben gray46 und gray221 beträgt 52.39%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 47.61%. gray46 eignet sich als Schriftfarbe auf Hintergrund gray221, weil Unterschied in den Helligkeiten und Farbenunterschied geeignet sind.

Hintergrundfarbe gray221				Schriftfarbe gray46
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#dddddd	#dddddd	#dddddd	#dddddd	#2e2e2e	#2e2e2e	#2e2e2e	#2e2e2e
#e1e1e1	#e1e1e1	#bdbdbd	#bdbdbd	#4b4b4b	#4b4b4b	#272727	#272727
#e6e6e6	#e6e6e6	#9d9d9d	#9d9d9d	#696969	#696969	#202020	#202020
#ebebeb	#ebebeb	#7e7e7e	#7e7e7e	#878787	#878787	#1a1a1a	#1a1a1a
#f0f0f0	#f0f0f0	#5e5e5e	#5e5e5e	#a5a5a5	#a5a5a5	#131313	#131313
#f5f5f5	#f5f5f5	#3f3f3f	#3f3f3f	#c3c3c3	#c3c3c3	#0d0d0d	#0d0d0d
#fafafa	#fafafa	#1f1f1f	#1f1f1f	#e1e1e1	#e1e1e1	#060606	#060606
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray221 und Farbe gray46

Wechsel der Unterstreichung bei Hover von Tag q

Die Unterstreichungsfarbe soll sich von Farbe gray221 auf Farbe gray46 ändern, wenn man mit der Maus auf <q> zeigt. Wir bereiten zunächst die Darstellung von <q> in Farbe gray221 vor.

Hier unterstreichen wir <q> mit Hilfe eines gezahnten Rahmens mit 2 Pixel Dicke in Farbe gray221.

<style type="text/css"><!--
  q { border-bottom:2px ridge gray221; }
//-->
</style>

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Farbe der Unterstreichung auf gray46 ändert.

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

Die Idee ist hierbei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben. Öfter sehen Sie diesen Effekt bei Verweisen. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Hierbei handelt es sich aber nicht um eine normale Unterstreichung, der Text selbst ist nicht unterstrichen. Sie wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Beschreibung vom Befehl <q>.

Wechsel der Hintergrundfarbe bei Hover bei HTML-Befehl h3

Eine Überschrift der 3. Stufe setzen Sie mit HTML-Tag <h3>. Diese kann man hervorheben und farblich gestalten.

Die Hintergrundfarbe soll sich von Farbe gray221 auf Farbe gray46 ändern, wenn man mit der Maus auf <h3> zeigt. Wir bereiten zunächst eine Formatierung von <h3> in Farbe gray221 vor.

Zum Beispiel legen wir bei <h3> die Hintergrundfarbe auf Farbe gray221 fest. Die Textfarbe behalten wir bei. Die Schriftart setzen wir auf arial. Die Schriftgröße setzen wir auf 9px:

<style type="text/css"><!--
  h3 { 
    background-color:gray221; 
    font-size:9px; 
    font-family:arial;
  }
//-->
</style>

Nun fordern wir, dass sich bei Hover die Hintergrundfarbe zu gray46 ändert.

<style type="text/css"><!--
  h3:hover { 
    background-color:gray46;
  }
//-->
</style>

Mehr zum Thema finden Sie in Grundlegende Gestaltungselemente in HTML. Mehr zum hier genutzten HTML-Befehl h3 finden Sie in der HTML Referenz unter <h3>.