Ressourcen: 137 HTML Farbnamen - Kombination von Farbe paleturquoise und Farbe darkviolet

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.

Hintergrundfarbe paleturquoise			Schriftfarbe darkviolet
Detail	:	Hintergrund paleturquoise	Detail	:	Schrift darkviolet
Farbe	:	paleturquoise	Farbe	:	darkviolet
Farbwert	:	#afeeee	Farbwert	:	#9400d3
HTML	:	paleturquoise	HTML	:	darkviolet
HTML (Wert)	:	#afeeee	HTML (Wert)	:	#9400d3
CSS	:	paleturquoise	CSS	:	darkviolet
CSS (Wert)	:	#afeeee	CSS (Wert)	:	#9400d3
CSS (kürzest)	:	#afeeee	CSS (kürzest)	:	#9400d3
CSS (RGB)	:	rgb(175,238,238)	CSS (RGB)	:	rgb(148,0,211)
CSS (%RGB)	:	rgb(68%,93%,93%)	CSS (%RGB)	:	rgb(58%,0%,82%)

Verlauf Hintergrundfarbe paleturquoise nach Schriftfarbe darkviolet
#afeeee	#abccea	#a7aae6	#a388e2	#9f66de	#9b44da	#9722d6	#9400d3
#afeeee	#abccea	#a7aae6	#a388e2	#9f66de	#9b44da	#9722d6	#9400d3

Kombination von paleturquoise und darkviolet
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante.				Die Ähnlichkeit von darkviolet und paleturquoise beträgt 75.76%. Die Lesbarkeit dieser Kombination ergibt sich zu 24.24%. darkviolet ist nicht als Schriftfarbe auf Hintergrund paleturquoise geeignet. Zwar ist der Helligkeitsunterschied gross genug, die Farben selbst sind zu ähnlich.

Hintergrundfarbe paleturquoise				Schriftfarbe darkviolet
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#afeeee	#afeeee	#afeeee	#afeeee	#9400d3	#9400d3	#9400d3	#9400d3
#baf0f0	#baf0f0	#96cccc	#96cccc	#a324d9	#a324d9	#7e00b4	#7e00b4
#c5f2f2	#c5f2f2	#7daaaa	#7daaaa	#b248df	#b248df	#690096	#690096
#d1f5f5	#d1f5f5	#648888	#648888	#c16de5	#c16de5	#540078	#540078
#dcf7f7	#dcf7f7	#4b6666	#4b6666	#d191ec	#d191ec	#3f005a	#3f005a
#e8fafa	#e8fafa	#324444	#324444	#e0b6f2	#e0b6f2	#2a003c	#2a003c
#f3fcfc	#f3fcfc	#192222	#192222	#efdaf8	#efdaf8	#15001e	#15001e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe paleturquoise und Farbe darkviolet

Text- und Unterstreichungsfarben von HTML-Tag blockquote

Hier ändern wir die Textfarbe von <blockquote> auf Farbe darkviolet. Die Schriftart setzen wir auf arial. Die Schriftgröße verkleinern wir auf 93%. Wir unterstreichen den Inhalt von <blockquote> mit Hilfe eines gefurchten Rahmens mit 3 Punkte Dicke in Farbe paleturquoise. Mit HTML geht dies nicht. Deshalb formatieren wir mit CSS.

<style type="text/css"><!--
  blockquote { 
    border-bottom-color: paleturquoise; 
    font-family: arial; 
    font-size: 93%; 
    color: darkviolet; 
    border-bottom-width: 3pt; 
    border-bottom-style: groove;
  }
//-->
</style>

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

Weiteres zu blockquote finden Sie in Blockorientierte Elemente in HTML. Mehr zum hier verwendeten Tag blockquote ist in der HTML Referenz bei <blockquote> beschrieben.

Wechsel der Hintergrundfarbe bei Hover bei Befehl p

Die Hintergrundfarbe soll sich von Farbe paleturquoise auf Farbe darkviolet ändern, wenn man mit der Maus auf <p> zeigt. Wir bereiten zunächst die Formatierung von <p> in Farbe paleturquoise vor.

Für dieses Beispiel legen wir bei <p> die Hintergrundfarbe auf Farbe paleturquoise fest. Zwar behalten wir die Textfarbe bei, ändern jedoch die Schriftart auf monospace und ändern die Größe der Schrift auf 13px:

<style type="text/css"><!--
  p { 
    background-color: paleturquoise; 
    font-size: 13px; 
    font-family: monospace;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Mausberührung die Hintergrundfarbe zu darkviolet ändert.

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

Weiteres zum Thema p lesen Sie in Grundlegende Gestaltungselemente in HTML. Zur Beschreibung des HTML-Befehl <p>.