Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray254 und Farbwert #d3d3d3

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 gray254			Schriftfarbwert #d3d3d3
Detail	:	Hintergrund gray254	Detail	:	Schrift #d3d3d3
Farbe	:	gray254	Farbwert	:	#d3d3d3
Farbwert	:	#fefefe	Farbe	:	gray211
HTML	:	gray254	HTML	:	#d3d3d3
HTML (Wert)	:	#fefefe	HTML (Wert)	:	#d3d3d3
CSS	:	gray254	CSS	:	#d3d3d3
CSS (Wert)	:	#fefefe	CSS (Wert)	:	#d3d3d3
CSS (kürzest)	:	#fefefe	CSS (kürzest)	:	#d3d3d3
CSS (RGB)	:	rgb(254,254,254)	CSS (RGB)	:	rgb(211,211,211)
CSS (%RGB)	:	rgb(99%,99%,99%)	CSS (%RGB)	:	rgb(82%,82%,82%)

Verlauf Hintergrundfarbe gray254 nach Schriftfarbwert #d3d3d3
#fefefe	#f7f7f7	#f1f1f1	#ebebeb	#e5e5e5	#dfdfdf	#d9d9d9	#d3d3d3
#fefefe	#f7f7f7	#f1f1f1	#ebebeb	#e5e5e5	#dfdfdf	#d9d9d9	#d3d3d3

Kombination von gray254 und #d3d3d3
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit von #d3d3d3 und gray254 ergibt sich zu 92.93%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 7.07%. Auf Hintergrund gray254 ist #d3d3d3 ungeeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind geeignet.

Hintergrundfarbe gray254				Schriftfarbwert #d3d3d3
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#fefefe	#fefefe	#fefefe	#fefefe	#d3d3d3	#d3d3d3	#d3d3d3	#d3d3d3
#fefefe	#fefefe	#d9d9d9	#d9d9d9	#d9d9d9	#d9d9d9	#b4b4b4	#b4b4b4
#fefefe	#fefefe	#b5b5b5	#b5b5b5	#dfdfdf	#dfdfdf	#969696	#969696
#fefefe	#fefefe	#919191	#919191	#e5e5e5	#e5e5e5	#787878	#787878
#fefefe	#fefefe	#6c6c6c	#6c6c6c	#ececec	#ececec	#5a5a5a	#5a5a5a
#fefefe	#fefefe	#484848	#484848	#f2f2f2	#f2f2f2	#3c3c3c	#3c3c3c
#fefefe	#fefefe	#242424	#242424	#f8f8f8	#f8f8f8	#1e1e1e	#1e1e1e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray254 und Farbwert #d3d3d3

Hintergrund/Text-Kombination bei HTML-Befehl a

Einen Link setzen Sie mit Befehl <a>. Diesen kann man farblich gestalten und hervorheben.

Hier ändern wir die Textfarbe von <a> auf Farbwert #d3d3d3 und die Hintergrundfarbe von <a> auf Farbe gray254. Die Schriftart setzen wir auf courier new. Als Schriftgröße setzen wir 13px.

<style type="text/css"><!--
  a { 
    color: #d3d3d3; 
    font-size: 13px; 
    background-color: gray254; 
    font-family: courier new;
  }
//-->
</style>

Weiteres zum Thema können Sie in Verweise und Protokolle in HTML lesen. Die Beschreibung vom Tag a finden Sie in der HTML Referenz unter <a>.

Wechsel der Umrandung bei Hover von Tag img

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

In diesem Beispiel umranden wir <img> mit einem 3 Pixel dicken, gezahnten Rahmen in Farbe gray254.

<style type="text/css"><!--
  img { border:3px ridge gray254; }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Mausberührung die Rahmenfarbe zu #d3d3d3 ändert.

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

Mehr zu img können Sie in Grafik in HTML lesen. Der hier genutzte HTML-Befehl img ist in der HTML Referenz bei <img> gezeigt.