Ressourcen: 120 HTML Farbnamen - Kombination von Farbe darkgreen und Farbwert #87ceeb

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.

Hintergrundfarbe darkgreen			Schriftfarbwert #87ceeb
Detail	:	Hintergrund darkgreen	Detail	:	Schrift #87ceeb
Farbe	:	darkgreen	Farbwert	:	#87ceeb
Farbwert	:	#006400	Farbe	:	skyblue
HTML	:	darkgreen	HTML	:	#87ceeb
HTML (Wert)	:	#006400	HTML (Wert)	:	#87ceeb
CSS	:	darkgreen	CSS	:	#87ceeb
CSS (Wert)	:	#006400	CSS (Wert)	:	#87ceeb
CSS (kürzest)	:	#006400	CSS (kürzest)	:	#87ceeb
CSS (RGB)	:	rgb(0,100,0)	CSS (RGB)	:	rgb(135,206,235)
CSS (%RGB)	:	rgb(0%,39%,0%)	CSS (%RGB)	:	rgb(52%,80%,92%)

Verlauf Hintergrundfarbe darkgreen nach Schriftfarbwert #87ceeb
#006400	#137321	#268243	#399164	#4da086	#60afa7	#73bec9	#87ceeb
#006400	#137321	#268243	#399164	#4da086	#60afa7	#73bec9	#87ceeb

Kombination von darkgreen und #87ceeb
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. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				Die Ähnlichkeit von #87ceeb und darkgreen beträgt 79.66%. Die Lesbarkeit dieser Farbkombination liegt damit bei 20.34%. Auf Hintergrund darkgreen ist #87ceeb ungeeignet. Zwar ist der Helligkeitsunterschied in Ordnung, doch die Farben selbst sind zu ähnlich.

Hintergrundfarbe darkgreen				Schriftfarbwert #87ceeb
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#006400	#006400	#006400	#006400	#87ceeb	#87ceeb	#87ceeb	#87ceeb
#247a24	#247a24	#005500	#005500	#98d5ed	#98d5ed	#73b0c9	#73b0c9
#489048	#489048	#004700	#004700	#a9dcf0	#a9dcf0	#6093a7	#6093a7
#6da66d	#6da66d	#003900	#003900	#bae3f3	#bae3f3	#4d7586	#4d7586
#91bc91	#91bc91	#002a00	#002a00	#cbeaf6	#cbeaf6	#395864	#395864
#b6d2b6	#b6d2b6	#001c00	#001c00	#dcf1f9	#dcf1f9	#263a43	#263a43
#dae8da	#dae8da	#000e00	#000e00	#edf8fc	#edf8fc	#131d21	#131d21
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe darkgreen und Farbwert #87ceeb

Zebra-Effekt mit Befehl td

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man von einem Zebra-Effekt. Der Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <td> mit unterschiedlichen Hintergrundfarben Farbe darkgreen und Farbwert #87ceeb.

<style type="text/css"><!--
  td.ungerade { 
    background-color: darkgreen;
  }
  td.gerade { 
    background-color:#87ceeb;
  }
//-->
</style>

Diese werden dann abwechselnd verwendet.

<table>
<tr><td class="ungerade">KA-A</td><td class="gerade">KB-A</td><td class="ungerade">KC-A</td></tr>
<tr><td class="ungerade">KA-B</td><td class="gerade">KB-B</td><td class="ungerade">KC-B</td></tr>
<tr><td class="ungerade">KA-C</td><td class="gerade">KB-C</td><td class="ungerade">KC-C</td></tr>
</table>

Mehr zum Thema td erfahren Sie in Tabellen in HTML. Die Beschreibung vom Tag td lesen Sie in der HTML Referenz unter <td>.

Wechsel der Umrandung bei Hover von Tag hr

Die Rahmenfarbe soll sich von Farbe darkgreen auf Farbwert #87ceeb ändern, wenn man mit der Maus auf <hr> zeigt. Wir bereiten zunächst die Formatierung von <hr> in Farbe darkgreen vor.

In diesem Beispiel umranden wir <hr> mit einem 1 Pixel dicken, gefurchten Rahmen in Farbe darkgreen.

<style type="text/css"><!--
  hr { 
    border-style: groove; 
    border-color: darkgreen; 
    border-width: 1px;
  }
//-->
</style>

Nun fordern wir, dass sich bei Hover die Rahmenfarbe auf #87ceeb ändert.

<style type="text/css"><!--
  hr: hover { 
    border-color: #87ceeb;
  }
//-->
</style>

Weiteres zum Thema hr können Sie in Grundlegende Gestaltungselemente in HTML nachlesen. Beschreibung des hier genutzten HTML-Befehl <hr>.