Ressourcen: 8 Grundfarben in HTML - Kombination von Farbe black und Farbe white

Die bunten Grundfarben entstehen dadurch, dass die Anteile von Rot, Grün und Blau jeweils paarweise maximal sind.

In HTML und CSS haben damit die entsprechenden Bestandteile den Wert hexadezimal ff, bzw. dezimal 255 bzw. prozentual 100%.

Hintergrundfarbe black			Schriftfarbe white
Detail	:	Hintergrund black	Detail	:	Schrift white
Farbe	:	black	Farbe	:	white
Farbwert	:	#000000	Farbwert	:	#ffffff
HTML	:	black	HTML	:	white
HTML (Wert)	:	#000000	HTML (Wert)	:	#ffffff
CSS	:	black	CSS	:	white
CSS (Wert)	:	#000000	CSS (Wert)	:	#ffffff
CSS (kürzest)	:	#000	CSS (kürzest)	:	#fff
CSS (RGB)	:	rgb(0,0,0)	CSS (RGB)	:	rgb(255,255,255)
CSS (%RGB)	:	rgb(0%,0%,0%)	CSS (%RGB)	:	rgb(100%,100%,100%)

Verlauf Hintergrundfarbe black nach Schriftfarbe white
#000000	#242424	#484848	#6d6d6d	#919191	#b6b6b6	#dadada	#ffffff
#000000	#242424	#484848	#6d6d6d	#919191	#b6b6b6	#dadada	#ffffff

Kombination von black und white
Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit der Farben white und black beträgt 0.00%. Die Lesbarkeit dieser Kombination ergibt sich zu 100.00%. white eignet sich als Schriftfarbe auf Hintergrund black, weil die Unterschiede in Helligkeit und Farbe gut sind.

Hintergrundfarbe black				Schriftfarbe white
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#000000	#000000	#000000	#000000	#ffffff	#ffffff	#ffffff	#ffffff
#242424	#242424	#000000	#000000	#ffffff	#ffffff	#dadada	#dadada
#484848	#484848	#000000	#000000	#ffffff	#ffffff	#b6b6b6	#b6b6b6
#6d6d6d	#6d6d6d	#000000	#000000	#ffffff	#ffffff	#919191	#919191
#919191	#919191	#000000	#000000	#ffffff	#ffffff	#6d6d6d	#6d6d6d
#b6b6b6	#b6b6b6	#000000	#000000	#ffffff	#ffffff	#484848	#484848
#dadada	#dadada	#000000	#000000	#ffffff	#ffffff	#242424	#242424
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe black und Farbe white

Wechsel der Unterstreichung bei Hover bei HTML-Befehl strike

Die Farbe der Unterstreichung soll sich von Farbe black auf Farbe white ändern, wenn man mit der Maus auf <strike> zeigt. Wir bereiten zunächst eine Formatierung von <strike> in Farbe black vor.

Hier unterstreichen wir <strike> mit einem gezahnten Rahmen mit 2 Pixel Dicke in Farbe black.

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

Jetzt fordern wir, dass bei Berührung mit der Maus die Unterstreichungsfarbe auf white gesetzt wird.

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

Die Idee ist hierbei, unabhängige Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sieht man diesen Effekt bei Verweisen. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Das ist aber keine "wirkliche" Unterstreichung, der Text hat überhaupt keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Weiteres zu strike finden Sie in Text in HTML. Die Beschreibung vom hier verwendeten Tag strike finden Sie in der HTML Referenz unter <strike>.

Füllen und Umranden mit Tag blockquote

Hier umranden wir <blockquote> mit einem gezahnten, 5 Punkte dicken Rahmen in Farbe white . Den Hintergrund von <blockquote> färben wir entsprechend mit Farbe black. Dies ist mit HTML kaum möglich. Deshalb formatieren wir mit CSS.

<style type="text/css"><!--
  blockquote { border:5pt ridge white; background-color:black; }
//-->
</style>

Mehr zum Thema lesen Sie in Blockorientierte Elemente in HTML. Die Beschreibung des hier genutzten HTML-Tag blockquote lesen Sie in der HTML Referenz unter <blockquote>.