Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #20b2aa und Farbwert #b22222

Netscape führte seinerzeit die websicheren Farben ein. Neben diesen, einem bestimmten Schema folgenden, Farbwerten, definierte man noch 120 Werte und ordnete ihnen Namen zu. Zusammen mit den 17 Standard-HTML-Farben, die ebenfalls Namen haben, ergeben sich so 137 HTML Farbnamen.

Hintergrundfarbwert #20b2aa			Schriftfarbwert #b22222
Detail	:	Hintergrund #20b2aa	Detail	:	Schrift #b22222
Farbwert	:	#20b2aa	Farbwert	:	#b22222
Farbe	:	lightseagreen	Farbe	:	firebrick
HTML	:	#20b2aa	HTML	:	#b22222
HTML (Wert)	:	#20b2aa	HTML (Wert)	:	#b22222
CSS	:	#20b2aa	CSS	:	#b22222
CSS (Wert)	:	#20b2aa	CSS (Wert)	:	#b22222
CSS (kürzest)	:	#20b2aa	CSS (kürzest)	:	#b22222
CSS (RGB)	:	rgb(32,178,170)	CSS (RGB)	:	rgb(178,34,34)
CSS (%RGB)	:	rgb(12%,69%,66%)	CSS (%RGB)	:	rgb(69%,13%,13%)

Verlauf Hintergrundfarbwert #20b2aa nach Schriftfarbwert #b22222
#20b2aa	#349d96	#498883	#5e746f	#735f5c	#884b48	#9d3635	#b22222
#20b2aa	#349d96	#498883	#5e746f	#735f5c	#884b48	#9d3635	#b22222

Kombination von #20b2aa und #b22222
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 #b22222 und #20b2aa beträgt 87.87%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 12.13%. Auf Hintergrund #20b2aa ist #b22222 ungeeignet, da die Helligkeit und Farben zu ähnlich sind.

Hintergrundfarbwert #20b2aa				Schriftfarbwert #b22222
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#20b2aa	#20b2aa	#20b2aa	#20b2aa	#b22222	#b22222	#b22222	#b22222
#3fbdb6	#3fbdb6	#1b9891	#1b9891	#bd4141	#bd4141	#981d1d	#981d1d
#5fc8c2	#5fc8c2	#167f79	#167f79	#c86161	#c86161	#7f1818	#7f1818
#7fd3ce	#7fd3ce	#126561	#126561	#d38080	#d38080	#651313	#651313
#9fdeda	#9fdeda	#0d4c48	#0d4c48	#dea0a0	#dea0a0	#4c0e0e	#4c0e0e
#bfe9e6	#bfe9e6	#093230	#093230	#e9bfbf	#e9bfbf	#320909	#320909
#dff4f2	#dff4f2	#041918	#041918	#f4dfdf	#f4dfdf	#190404	#190404
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #20b2aa und Farbwert #b22222

Wechsel der Textfarbe bei Hover mit HTML-Befehl p

Die Textfarbe soll sich von Farbwert #20b2aa auf Farbwert #b22222 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <p> in Farbwert #20b2aa vor.

Für dieses Beispiel setzen wir bei <p> die Textfarbe auf Farbwert #20b2aa. Zwar behalten wir die Hintergrundfarbe bei, ändern jedoch die Schriftart auf verdana und ändern die Größe der Schrift auf 13px:

<style type="text/css"><!--
  p { 
    font-size:13px; 
    font-family:verdana; 
    color:#20b2aa;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Mausberührung die Textfarbe auf #b22222 ändert.

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

Mehr zum Thema erfahren Sie in Grundlegende Gestaltungselemente in HTML. Weiteres zum Befehl p finden Sie in der HTML Referenz unter <p>.

Wechsel der Hintergrundfarbe bei Hover mit Tag h6

Mit HTML-Tag <h6> wird eine Überschrift gesetzt. Diese kann hervorgehoben und farblich gestaltet werden.

Die Hintergrundfarbe soll sich von Farbwert #20b2aa auf Farbwert #b22222 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <h6> in Farbwert #20b2aa vor.

Wir legen zum Beispiel die Hintergrundfarbe von <h6> auf Farbwert #20b2aa fest. Die Textfarbe behalten wir bei. Die Schriftart ändern wir auf arial:

<style type="text/css"><!--
  h6 { 
    background-color: #20b2aa; 
    font-family: arial;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Hintergrundfarbe zu #b22222 ändert.

<style type="text/css"><!--
  h6:hover { 
    background-color:#b22222;
  }
//-->
</style>

Mehr zum Thema h6 erfahren Sie in Grundlegende Gestaltungselemente in HTML. Weiteres zum hier gezeigten HTML-Tag <h6>.