Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #e0ffff und Farbwert #2f4f4f

Netscape führte seinerzeit die websicheren Farben ein. Neben diesen Farbwerten, die einem bestimmten Schema folgen, definierte man noch 120 Werte und ordnete ihnen Namen zu.

Hintergrundfarbwert #e0ffff			Schriftfarbwert #2f4f4f
Detail	:	Hintergrund #e0ffff	Detail	:	Schrift #2f4f4f
Farbwert	:	#e0ffff	Farbwert	:	#2f4f4f
Farbe	:	lightcyan	Farbe	:	darkslategray
HTML	:	#e0ffff	HTML	:	#2f4f4f
HTML (Wert)	:	#e0ffff	HTML (Wert)	:	#2f4f4f
CSS	:	#e0ffff	CSS	:	#2f4f4f
CSS (Wert)	:	#e0ffff	CSS (Wert)	:	#2f4f4f
CSS (kürzest)	:	#e0ffff	CSS (kürzest)	:	#2f4f4f
CSS (RGB)	:	rgb(224,255,255)	CSS (RGB)	:	rgb(47,79,79)
CSS (%RGB)	:	rgb(87%,100%,100%)	CSS (%RGB)	:	rgb(18%,30%,30%)

Verlauf Hintergrundfarbwert #e0ffff nach Schriftfarbwert #2f4f4f
#e0ffff	#c6e5e5	#adcccc	#94b3b3	#7a9a9a	#618181	#486868	#2f4f4f
#e0ffff	#c6e5e5	#adcccc	#94b3b3	#7a9a9a	#618181	#486868	#2f4f4f

Kombination von #e0ffff und #2f4f4f
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. 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.				#2f4f4f eignet sich als Schriftfarbe auf Hintergrund #e0ffff, da sowohl der Unterschied in den Helligkeiten als auch der Unterschied in den Farben geeignet sind. Die Ähnlichkeit der Farben #2f4f4f und #e0ffff ergibt sich zu 59.68%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 40.32%.

Hintergrundfarbwert #e0ffff				Schriftfarbwert #2f4f4f
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#e0ffff	#e0ffff	#e0ffff	#e0ffff	#2f4f4f	#2f4f4f	#2f4f4f	#2f4f4f
#e4ffff	#e4ffff	#c0dada	#c0dada	#4c6868	#4c6868	#284343	#284343
#e8ffff	#e8ffff	#a0b6b6	#a0b6b6	#6a8181	#6a8181	#213838	#213838
#edffff	#edffff	#809191	#809191	#889a9a	#889a9a	#1a2d2d	#1a2d2d
#f1ffff	#f1ffff	#606d6d	#606d6d	#a5b3b3	#a5b3b3	#142121	#142121
#f6ffff	#f6ffff	#404848	#404848	#c3cccc	#c3cccc	#0d1616	#0d1616
#faffff	#faffff	#202424	#202424	#e1e5e5	#e1e5e5	#060b0b	#060b0b
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #e0ffff und Farbwert #2f4f4f

Wechsel der Umrandung bei Hover mit HTML-Tag a

Einen Link erzeugen Sie mit Befehl <a>. Diesen können Sie farblich gestalten.

Die Rahmenfarbe soll sich von Farbwert #e0ffff auf Farbwert #2f4f4f ändern, wenn man mit der Maus auf <a> zeigt. Wir bereiten zunächst eine Darstellung von <a> in Farbwert #e0ffff vor.

In diesem Beispiel umranden wir <a> mit einem 3 Pixel dicken, einfallenden Rahmen in Farbwert #e0ffff.

<style type="text/css"><!--
  a { 
    border-width:3px; 
    border-color:#e0ffff; 
    border-style:inset;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Hover die Rahmenfarbe auf #2f4f4f ändert.

<style type="text/css"><!--
  a: hover { 
    border-color: #2f4f4f;
  }
//-->
</style>

Weiteres zu a lesen Sie in Verweise und Protokolle in HTML. Einzelheiten des Tag <a>.

Wechsel der Textfarbe bei Hover mit Tag p

Die Textfarbe soll sich von Farbwert #e0ffff auf Farbwert #2f4f4f ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <p> in Farbwert #e0ffff vor.

Als Beispiel setzen wir die Textfarbe von <p> auf Farbwert #e0ffff. Zwar verändern wir die Hintergrundfarbe nicht, setzen jedoch die Schriftart auf arial und setzen die Schriftgröße auf 9pt:

<style type="text/css"><!--
  p { 
    font-family:arial; 
    font-size:9pt; 
    color:#e0ffff;
  }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Textfarbe auf #2f4f4f geändert wird.

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

Weiteres zum Thema erfahren Sie in Grundlegende Gestaltungselemente in HTML. Möglichkeiten des hier verwendeten HTML-Tag p sind in der HTML Referenz bei <p> ausführlich gezeigt.