Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #6b8e23 und Farbwert #87cefa

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 #6b8e23			Schriftfarbwert #87cefa
Detail	:	Hintergrund #6b8e23	Detail	:	Schrift #87cefa
Farbwert	:	#6b8e23	Farbwert	:	#87cefa
Farbe	:	olivedrab	Farbe	:	lightskyblue
HTML	:	#6b8e23	HTML	:	#87cefa
HTML (Wert)	:	#6b8e23	HTML (Wert)	:	#87cefa
CSS	:	#6b8e23	CSS	:	#87cefa
CSS (Wert)	:	#6b8e23	CSS (Wert)	:	#87cefa
CSS (kürzest)	:	#6b8e23	CSS (kürzest)	:	#87cefa
CSS (RGB)	:	rgb(107,142,35)	CSS (RGB)	:	rgb(135,206,250)
CSS (%RGB)	:	rgb(41%,55%,13%)	CSS (%RGB)	:	rgb(52%,80%,98%)

Verlauf Hintergrundfarbwert #6b8e23 nach Schriftfarbwert #87cefa
#6b8e23	#6f9741	#73a060	#77a97f	#7bb29d	#7fbbbc	#83c4db	#87cefa
#6b8e23	#6f9741	#73a060	#77a97f	#7bb29d	#7fbbbc	#83c4db	#87cefa

Kombination von #6b8e23 und #87cefa
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				Die Ähnlichkeit von #87cefa und #6b8e23 ergibt sich zu 89.44%. Die Lesbarkeit dieser Kombination bewerte ich mit 10.56%. Auf Hintergrund #6b8e23 ist #87cefa ungeeignet. Sowohl Helligkeit als auch die Farben sind sich zu ähnlich.

Hintergrundfarbwert #6b8e23				Schriftfarbwert #87cefa
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#6b8e23	#6b8e23	#6b8e23	#6b8e23	#87cefa	#87cefa	#87cefa	#87cefa
#809e42	#809e42	#5b791e	#5b791e	#98d5fa	#98d5fa	#73b0d6	#73b0d6
#95ae61	#95ae61	#4c6519	#4c6519	#a9dcfb	#a9dcfb	#6093b2	#6093b2
#aabe81	#aabe81	#3d5114	#3d5114	#bae3fc	#bae3fc	#4d758e	#4d758e
#bfcea0	#bfcea0	#2d3c0f	#2d3c0f	#cbeafc	#cbeafc	#39586b	#39586b
#d4dec0	#d4dec0	#1e280a	#1e280a	#dcf1fd	#dcf1fd	#263a47	#263a47
#e9eedf	#e9eedf	#0f1405	#0f1405	#edf8fe	#edf8fe	#131d23	#131d23
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #6b8e23 und Farbwert #87cefa

Zebra-Effekt bei Tag th

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, spricht man vom so genannten Zebra-Effekt. Der Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .odd und .even für <th> mit unterschiedlichen Hintergrundfarben Farbwert #6b8e23 und Farbwert #87cefa.

<style type="text/css"><!--
  th.odd { 
    background-color:#6b8e23;
  }
  th.even { 
    background-color: #87cefa;
  }
//-->
</style>

Diese werden dann abwechselnd verwendet.

<table>
<tr><td class="odd">WA~A</td><td class="even">WB~A</td><td class="odd">WC~A</td></tr>
<tr><td class="odd">WA~B</td><td class="even">WB~B</td><td class="odd">WC~B</td></tr>
<tr><td class="odd">WA~C</td><td class="even">WB~C</td><td class="odd">WC~C</td></tr>
</table>

Weiteres zum Thema th können Sie in Tabellen in HTML nachlesen. Zur Beschreibung vom Tag <th>.

Wechsel der Umrandung bei Hover von Tag a

Mit Tag <a> wird ein Link erzeugt. Diesen kann man hervorheben und farblich gestalten.

Die Rahmenfarbe soll sich von Farbwert #6b8e23 auf Farbwert #87cefa ändern, wenn man mit der Maus auf <a> zeigt. Bereiten wir zunächst die Formatierung von <a> in Farbwert #6b8e23 vor.

In diesem Beispiel umranden wir <a> mit einem 5 Pixel dicken, einfallenden Rahmen in Farbwert #6b8e23.

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

Nun fordern wir, dass bei Mausberührung die Rahmenfarbe auf #87cefa gesetzt wird.

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

Weiteres zum Thema a erfahren Sie in Verweise und Protokolle in HTML. Weiteres zum Befehl a ist in der HTML Referenz bei <a> genau beschrieben.