Ressourcen: 17 HTML Standard Farbnamen - Kombination von Farbe grey und Farbe navy

HTML verfügt seit jeher über 17 Standard Farbnamen.

Sie entstehen dadurch, dass die 8 Grundfarben jeweils maximal und zu 50% enthalten sind.

Zu diesen 16 Farben kommt mit grey eine alternative Schreibweise für gray.

Hintergrundfarbe grey			Schriftfarbe navy
Detail	:	Hintergrund grey	Detail	:	Schrift navy
Farbe	:	grey	Farbe	:	navy
Farbwert	:	#808080	Farbwert	:	#000080
HTML	:	grey	HTML	:	navy
HTML (Wert)	:	#808080	HTML (Wert)	:	#000080
CSS	:	grey	CSS	:	navy
CSS (Wert)	:	#808080	CSS (Wert)	:	#000080
CSS (kürzest)	:	#808080	CSS (kürzest)	:	#000080
CSS (RGB)	:	rgb(128,128,128)	CSS (RGB)	:	rgb(0,0,128)
CSS (%RGB)	:	rgb(50%,50%,50%)	CSS (%RGB)	:	rgb(0%,0%,50%)

Verlauf Hintergrundfarbe grey nach Schriftfarbe navy
#808080	#6d6d80	#5b5b80	#494980	#363680	#242480	#121280	#000080
#808080	#6d6d80	#5b5b80	#494980	#363680	#242480	#121280	#000080

Kombination von grey und navy
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 id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in.				Auf Hintergrund grey ist navy ungeeignet, da die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit von navy und grey beträgt 80.70%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 19.30%.

Hintergrundfarbe grey				Schriftfarbe navy
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#808080	#808080	#808080	#808080	#000080	#000080	#000080	#000080
#929292	#929292	#6d6d6d	#6d6d6d	#242492	#242492	#00006d	#00006d
#a4a4a4	#a4a4a4	#5b5b5b	#5b5b5b	#4848a4	#4848a4	#00005b	#00005b
#b6b6b6	#b6b6b6	#494949	#494949	#6d6db6	#6d6db6	#000049	#000049
#c8c8c8	#c8c8c8	#363636	#363636	#9191c8	#9191c8	#000036	#000036
#dadada	#dadada	#242424	#242424	#b6b6da	#b6b6da	#000024	#000024
#ececec	#ececec	#121212	#121212	#dadaec	#dadaec	#000012	#000012
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe grey und Farbe navy

Wechsel der Textfarbe bei Hover von Tag p

Die Textfarbe soll sich von Farbe grey auf Farbe navy ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <p> in Farbe grey vor.

Als Beispiel legen wir Farbe grey als Textfarbe von <p> fest. Die Hintergrundfarbe ändern wir nicht. Die Schriftart ändern wir auf arial:

<style type="text/css"><!--
  p { 
    color: grey; 
    font-family: arial;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Textfarbe auf navy geändert wird.

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

Mehr zum Thema p finden Sie in Grundlegende Gestaltungselemente in HTML. Die Beschreibung vom HTML-Befehl p lesen Sie in der HTML Referenz unter <p>.

Text- und Unterstreichungsfarben von Befehl address

Hier ändern wir die Textfarbe von <address> auf Farbe navy. Die Schriftart setzen wir auf verdana. Die Schriftgröße setzen wir auf 95%. Wir unterstreichen den Inhalt von <address> mit Hilfe eines gestrichelten Rahmens mit 4 Pixel Dicke in Farbe grey. Das ist in HTML nicht möglich. Deshalb nutzen wir hier CSS.

<style type="text/css"><!--
  address { 
    border-bottom:4px dashed grey; 
    font-size:95%; 
    color:navy; 
    font-family:verdana;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Mehr zum Thema erfahren Sie in Blockorientierte Elemente in HTML. Einzelheiten vom Befehl address sind in der HTML Referenz bei <address> genau gezeigt.