Ressourcen: 120 HTML Farbnamen - Kombination von Farbe darkolivegreen und Farbwert #bdb76b

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 darkolivegreen			Schriftfarbwert #bdb76b
Detail	:	Hintergrund darkolivegreen	Detail	:	Schrift #bdb76b
Farbe	:	darkolivegreen	Farbwert	:	#bdb76b
Farbwert	:	#556b2f	Farbe	:	darkkhaki
HTML	:	darkolivegreen	HTML	:	#bdb76b
HTML (Wert)	:	#556b2f	HTML (Wert)	:	#bdb76b
CSS	:	darkolivegreen	CSS	:	#bdb76b
CSS (Wert)	:	#556b2f	CSS (Wert)	:	#bdb76b
CSS (kürzest)	:	#556b2f	CSS (kürzest)	:	#bdb76b
CSS (RGB)	:	rgb(85,107,47)	CSS (RGB)	:	rgb(189,183,107)
CSS (%RGB)	:	rgb(33%,41%,18%)	CSS (%RGB)	:	rgb(74%,71%,41%)

Verlauf Hintergrundfarbe darkolivegreen nach Schriftfarbwert #bdb76b
#556b2f	#637537	#728040	#818b48	#909651	#9fa159	#aeac62	#bdb76b
#556b2f	#637537	#728040	#818b48	#909651	#9fa159	#aeac62	#bdb76b

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

Hintergrundfarbe darkolivegreen				Schriftfarbwert #bdb76b
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#556b2f	#556b2f	#556b2f	#556b2f	#bdb76b	#bdb76b	#bdb76b	#bdb76b
#6d804c	#6d804c	#485b28	#485b28	#c6c180	#c6c180	#a29c5b	#a29c5b
#85956a	#85956a	#3c4c21	#3c4c21	#cfcb95	#cfcb95	#87824c	#87824c
#9daa88	#9daa88	#303d1a	#303d1a	#d9d5aa	#d9d5aa	#6c683d	#6c683d
#b6bfa5	#b6bfa5	#242d14	#242d14	#e2e0bf	#e2e0bf	#514e2d	#514e2d
#ced4c3	#ced4c3	#181e0d	#181e0d	#ecead4	#ecead4	#36341e	#36341e
#e6e9e1	#e6e9e1	#0c0f06	#0c0f06	#f5f4e9	#f5f4e9	#1b1a0f	#1b1a0f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe darkolivegreen und Farbwert #bdb76b

Wechsel der Hintergrundfarbe bei Hover bei Tag h3

Mit Tag <h3> wird eine Überschrift der 3. Stufe erzeugt und kann farblich gestaltet werden.

Die Hintergrundfarbe soll sich von Farbe darkolivegreen auf Farbwert #bdb76b ändern, wenn man mit der Maus auf <h3> zeigt. Bereiten wir zunächst die Formatierung von <h3> in Farbe darkolivegreen vor.

Für dieses Beispiel setzen wir die Hintergrundfarbe von <h3> auf Farbe darkolivegreen und ändern die Größe der Schrift auf 13px:

<style type="text/css"><!--
  h3 { 
    background-color: darkolivegreen; 
    font-size: 13px;
  }
//-->
</style>

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

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

Mehr zu h3 können Sie in Grundlegende Gestaltungselemente in HTML erfahren. Weiteres zum hier genutzten HTML-Tag h3 ist in der HTML Referenz unter <h3> ausführlich gezeigt.

Wechsel der Unterstreichung bei Hover mit Tag caption

Die Unterstreichungsfarbe soll sich von Farbe darkolivegreen auf Farbwert #bdb76b ändern, wenn man mit der Maus auf <caption> zeigt. Wir bereiten zunächst die Darstellung von <caption> in Farbe darkolivegreen vor.

In diesem Beispiel unterstreichen wir <caption> mit Hilfe eines gepunkteten Rahmens mit 5 Pixel Dicke in Farbe darkolivegreen.

<style type="text/css"><!--
  caption { border-bottom:5px dotted darkolivegreen; }
//-->
</style>

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

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

Die Idee ist hierbei, verschiedene Formatierungen für Inhalt und Unterstreichung zu verwenden. Manchmal sehen Sie das bei Verweisen. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Dies ist jedoch keine "wirkliche" Unterstreichung, der Text hat gar keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zu caption können Sie in Tabellen in HTML lesen. Der hier genutzte HTML-Tag caption ist in der HTML Referenz unter <caption> ausführlich beschrieben.