Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #556b2f und Farbwert #0000ff

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.

Hintergrundfarbwert #556b2f			Schriftfarbwert #0000ff
Detail	:	Hintergrund #556b2f	Detail	:	Schrift #0000ff
Farbwert	:	#556b2f	Farbwert	:	#0000ff
Farbe	:	darkolivegreen	Farbe	:	blue
HTML	:	#556b2f	HTML	:	#0000ff
HTML (Wert)	:	#556b2f	HTML (Wert)	:	#0000ff
CSS	:	#556b2f	CSS	:	#0000ff
CSS (Wert)	:	#556b2f	CSS (Wert)	:	#0000ff
CSS (kürzest)	:	#556b2f	CSS (kürzest)	:	#00f
CSS (RGB)	:	rgb(85,107,47)	CSS (RGB)	:	rgb(0,0,255)
CSS (%RGB)	:	rgb(33%,41%,18%)	CSS (%RGB)	:	rgb(0%,0%,100%)

Verlauf Hintergrundfarbwert #556b2f nach Schriftfarbwert #0000ff
#556b2f	#485b4c	#3c4c6a	#303d88	#242da5	#181ec3	#0c0fe1	#0000ff
#556b2f	#485b4c	#3c4c6a	#303d88	#242da5	#181ec3	#0c0fe1	#0000ff

Kombination von #556b2f und #0000ff
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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 vestibulum tristique erat, ac interdum justo cursus in.				#0000ff eignet sich nicht als Schriftfarbe auf Hintergrund #556b2f, weil die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit von #0000ff und #556b2f ergibt sich zu 93.12%. Die Lesbarkeit dieser Kombination liegt damit bei 6.88%.

Hintergrundfarbwert #556b2f				Schriftfarbwert #0000ff
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#556b2f	#556b2f	#556b2f	#556b2f	#0000ff	#0000ff	#0000ff	#0000ff
#6d804c	#6d804c	#485b28	#485b28	#2424ff	#2424ff	#0000da	#0000da
#85956a	#85956a	#3c4c21	#3c4c21	#4848ff	#4848ff	#0000b6	#0000b6
#9daa88	#9daa88	#303d1a	#303d1a	#6d6dff	#6d6dff	#000091	#000091
#b6bfa5	#b6bfa5	#242d14	#242d14	#9191ff	#9191ff	#00006d	#00006d
#ced4c3	#ced4c3	#181e0d	#181e0d	#b6b6ff	#b6b6ff	#000048	#000048
#e6e9e1	#e6e9e1	#0c0f06	#0c0f06	#dadaff	#dadaff	#000024	#000024
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #556b2f und Farbwert #0000ff

Wechsel der Textfarbe bei Hover bei Tag button

Die Textfarbe soll sich von Farbwert #556b2f auf Farbwert #0000ff ändern, wenn man mit der Maus auf <button> zeigt. Bereiten wir zunächst eine Formatierung von <button> in Farbwert #556b2f vor.

Als Beispiel legen wir die Textfarbe von <button> auf Farbwert #556b2f fest. Zwar behalten wir die Hintergrundfarbe bei, ändern jedoch die Schriftart auf monospace.

<style type="text/css"><!--
  button { 
    font-family: monospace; 
    color: #556b2f;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Hover die Textfarbe auf #0000ff ändert.

<style type="text/css"><!--
  button: hover { 
    color: #0000ff;
  }
//-->
</style>

Weiteres zum Thema button können Sie in Formulare in HTML nachlesen. Einzelheiten des hier verwendeten HTML-Befehl button sind in der HTML Referenz unter <button> zusammengestellt.

Zebra-Effekt mit HTML-Befehl th

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man vom Zebra-Effekt. Der Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <th> mit den Hintergrundfarben Farbwert #556b2f und Farbwert #0000ff.

<style type="text/css"><!--
  th.ungerade { 
    background-color: #556b2f;
  }
  th.gerade { 
    background-color:#0000ff;
  }
//-->
</style>

Diese CSS-Klassen werden abwechselnd verwendet.

<table>
<tr><td class="ungerade">FA~A</td><td class="gerade">FB~A</td><td class="ungerade">FC~A</td></tr>
<tr><td class="ungerade">FA~B</td><td class="gerade">FB~B</td><td class="ungerade">FC~B</td></tr>
<tr><td class="ungerade">FA~C</td><td class="gerade">FB~C</td><td class="ungerade">FC~C</td></tr>
</table>

Weiteres zu th lesen Sie in Tabellen in HTML. Möglichkeiten des hier gezeigten HTML-Befehl th lesen Sie in der HTML Referenz unter <th>.