Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #006400 und Farbwert #f0f8ff

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 #006400			Schriftfarbwert #f0f8ff
Detail	:	Hintergrund #006400	Detail	:	Schrift #f0f8ff
Farbwert	:	#006400	Farbwert	:	#f0f8ff
Farbe	:	darkgreen	Farbe	:	aliceblue
HTML	:	#006400	HTML	:	#f0f8ff
HTML (Wert)	:	#006400	HTML (Wert)	:	#f0f8ff
CSS	:	#006400	CSS	:	#f0f8ff
CSS (Wert)	:	#006400	CSS (Wert)	:	#f0f8ff
CSS (kürzest)	:	#006400	CSS (kürzest)	:	#f0f8ff
CSS (RGB)	:	rgb(0,100,0)	CSS (RGB)	:	rgb(240,248,255)
CSS (%RGB)	:	rgb(0%,39%,0%)	CSS (%RGB)	:	rgb(94%,97%,100%)

Verlauf Hintergrundfarbwert #006400 nach Schriftfarbwert #f0f8ff
#006400	#227924	#448e48	#66a36d	#89b891	#abcdb6	#cde2da	#f0f8ff
#006400	#227924	#448e48	#66a36d	#89b891	#abcdb6	#cde2da	#f0f8ff

Kombination von #006400 und #f0f8ff
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit von #f0f8ff und #006400 ergibt sich zu 66.98%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 33.02%. #f0f8ff eignet sich als Schriftfarbe auf Hintergrund #006400. Sowohl der Helligkeitsunterschied als auch der Farbenunterschied sind gut.

Hintergrundfarbwert #006400				Schriftfarbwert #f0f8ff
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#006400	#006400	#006400	#006400	#f0f8ff	#f0f8ff	#f0f8ff	#f0f8ff
#247a24	#247a24	#005500	#005500	#f2f9ff	#f2f9ff	#cdd4da	#cdd4da
#489048	#489048	#004700	#004700	#f4faff	#f4faff	#abb1b6	#abb1b6
#6da66d	#6da66d	#003900	#003900	#f6fbff	#f6fbff	#898d91	#898d91
#91bc91	#91bc91	#002a00	#002a00	#f8fcff	#f8fcff	#666a6d	#666a6d
#b6d2b6	#b6d2b6	#001c00	#001c00	#fafdff	#fafdff	#444648	#444648
#dae8da	#dae8da	#000e00	#000e00	#fcfeff	#fcfeff	#222324	#222324
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #006400 und Farbwert #f0f8ff

Wechsel der Textfarbe bei Hover mit Befehl dd

Die Textfarbe soll sich von Farbwert #006400 auf Farbwert #f0f8ff ändern, wenn man mit der Maus auf <dd> zeigt. Bereiten wir zunächst die Darstellung von <dd> in Farbwert #006400 vor.

Wir legen als Beispiel Farbwert #006400 als Textfarbe von <dd> fest. Zwar ändern wir die Hintergrundfarbe nicht, setzen jedoch die Schriftart auf courier new. Die Größe der Schrift vergrößern wir auf 120%.

<style type="text/css"><!--
  dd { 
    font-size: 120%; 
    color: #006400; 
    font-family: courier new;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Berührung mit der Maus die Textfarbe auf #f0f8ff gesetzt wird.

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

Weiteres zum Thema dd lesen Sie in Listen und Glossare in HTML. Mehr zum Befehl dd ist in der HTML Referenz unter <dd> genau zusammengestellt.

Wechsel der Unterstreichung bei Hover mit Tag q

Die Unterstreichungsfarbe soll sich von Farbwert #006400 auf Farbwert #f0f8ff ändern, wenn man mit der Maus auf <q> zeigt. Bereiten wir zunächst die Darstellung von <q> in Farbwert #006400 vor.

Beispielsweise unterstreichen wir <q> mit einem gestrichelten Rahmen mit 3 Pixel Dicke in Farbwert #006400.

<style type="text/css"><!--
  q { border-bottom:3px dashed #006400; }
//-->
</style>

Nun stellen wir ein, dass bei Berührung mit der Maus die Farbe der Unterstreichung auf #f0f8ff gesetzt wird.

<style type="text/css"><!--
  q: hover { 
    border-bottom-color: #f0f8ff;
  }
//-->
</style>

Die Idee ist hierbei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sehen Sie das bei Verweisen. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine "normale" Unterstreichung, der Text ist nicht unterstrichen. Sie wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Möglichkeiten des hier verwendeten Tag q sind in der HTML Referenz bei <q> zusammengestellt.