Ressourcen: 137 HTML Farbnamen - Kombination von Farbe olivedrab und Farbwert #ffffff

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.

Hintergrundfarbe olivedrab			Schriftfarbwert #ffffff
Detail	:	Hintergrund olivedrab	Detail	:	Schrift #ffffff
Farbe	:	olivedrab	Farbwert	:	#ffffff
Farbwert	:	#6b8e23	Farbe	:	white
HTML	:	olivedrab	HTML	:	#ffffff
HTML (Wert)	:	#6b8e23	HTML (Wert)	:	#ffffff
CSS	:	olivedrab	CSS	:	#ffffff
CSS (Wert)	:	#6b8e23	CSS (Wert)	:	#ffffff
CSS (kürzest)	:	#6b8e23	CSS (kürzest)	:	#fff
CSS (RGB)	:	rgb(107,142,35)	CSS (RGB)	:	rgb(255,255,255)
CSS (%RGB)	:	rgb(41%,55%,13%)	CSS (%RGB)	:	rgb(100%,100%,100%)

Verlauf Hintergrundfarbe olivedrab nach Schriftfarbwert #ffffff
#6b8e23	#809e42	#95ae61	#aabe81	#bfcea0	#d4dec0	#e9eedf	#ffffff
#6b8e23	#809e42	#95ae61	#aabe81	#bfcea0	#d4dec0	#e9eedf	#ffffff

Kombination von olivedrab und #ffffff
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				#ffffff eignet sich nicht als Schriftfarbe auf Hintergrund olivedrab, da sich die Farben zu ähnlich sind. Die Ähnlichkeit von #ffffff und olivedrab beträgt 81.88%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 18.12%.

Hintergrundfarbe olivedrab				Schriftfarbwert #ffffff
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#6b8e23	#6b8e23	#6b8e23	#6b8e23	#ffffff	#ffffff	#ffffff	#ffffff
#809e42	#809e42	#5b791e	#5b791e	#ffffff	#ffffff	#dadada	#dadada
#95ae61	#95ae61	#4c6519	#4c6519	#ffffff	#ffffff	#b6b6b6	#b6b6b6
#aabe81	#aabe81	#3d5114	#3d5114	#ffffff	#ffffff	#919191	#919191
#bfcea0	#bfcea0	#2d3c0f	#2d3c0f	#ffffff	#ffffff	#6d6d6d	#6d6d6d
#d4dec0	#d4dec0	#1e280a	#1e280a	#ffffff	#ffffff	#484848	#484848
#e9eedf	#e9eedf	#0f1405	#0f1405	#ffffff	#ffffff	#242424	#242424
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe olivedrab und Farbwert #ffffff

Wechsel der Umrandung bei Hover mit Befehl img

Die Rahmenfarbe soll sich von Farbe olivedrab auf Farbwert #ffffff ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <img> in Farbe olivedrab vor.

In diesem Beispiel umranden wir <img> mit einem 3 Pixel dicken, gezahnten Rahmen in Farbe olivedrab.

<style type="text/css"><!--
  img { border:3px ridge olivedrab; }
//-->
</style>

Nun stellen wir ein, dass sich bei Mausberührung die Rahmenfarbe auf #ffffff ändert.

<style type="text/css"><!--
  img:hover { 
    border-color:#fff;
  }
//-->
</style>

Mehr zu img können Sie in Grafik in HTML lesen. Einzelheiten vom Tag img lesen Sie in der HTML Referenz unter <img>.

Wechsel der Hintergrundfarbe bei Hover bei HTML-Tag h6

Eine Überschrift erzeugen Sie mit Tag <h6>. Diese können Sie hervorheben und farblich gestalten.

Die Hintergrundfarbe soll sich von Farbe olivedrab auf Farbwert #ffffff ändern, wenn man mit der Maus auf <h6> zeigt. Bereiten wir zunächst eine Darstellung von <h6> in Farbe olivedrab vor.

Z.B. setzen wir die Hintergrundfarbe von <h6> auf Farbe olivedrab und vergrößern die Schriftgröße auf 119%.

<style type="text/css"><!--
  h6 { 
    font-size: 119%; 
    background-color: olivedrab;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Hintergrundfarbe auf #ffffff geändert wird.

<style type="text/css"><!--
  h6: hover { 
    background-color: #fff;
  }
//-->
</style>

Mehr zum Thema finden Sie in Grundlegende Gestaltungselemente in HTML. Der hier verwendete HTML-Befehl h6 ist in der HTML Referenz bei <h6> zusammengestellt.