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

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 #6a5acd
Detail	:	Hintergrund olivedrab	Detail	:	Schrift #6a5acd
Farbe	:	olivedrab	Farbwert	:	#6a5acd
Farbwert	:	#6b8e23	Farbe	:	slateblue
HTML	:	olivedrab	HTML	:	#6a5acd
HTML (Wert)	:	#6b8e23	HTML (Wert)	:	#6a5acd
CSS	:	olivedrab	CSS	:	#6a5acd
CSS (Wert)	:	#6b8e23	CSS (Wert)	:	#6a5acd
CSS (kürzest)	:	#6b8e23	CSS (kürzest)	:	#6a5acd
CSS (RGB)	:	rgb(107,142,35)	CSS (RGB)	:	rgb(106,90,205)
CSS (%RGB)	:	rgb(41%,55%,13%)	CSS (%RGB)	:	rgb(41%,35%,80%)

Verlauf Hintergrundfarbe olivedrab nach Schriftfarbwert #6a5acd
#6b8e23	#6a863b	#6a7f53	#6a776b	#6a7084	#6a689c	#6a61b4	#6a5acd
#6b8e23	#6a863b	#6a7f53	#6a776b	#6a7084	#6a689c	#6a61b4	#6a5acd

Kombination von olivedrab und #6a5acd
Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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.				Die Ähnlichkeit von #6a5acd und olivedrab ergibt sich zu 93.36%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 6.64%. #6a5acd ist nicht als Schriftfarbe auf Hintergrund olivedrab geeignet, weil sich die Helligkeit und Farben zu ähnlich sind.

Hintergrundfarbe olivedrab				Schriftfarbwert #6a5acd
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#6b8e23	#6b8e23	#6b8e23	#6b8e23	#6a5acd	#6a5acd	#6a5acd	#6a5acd
#809e42	#809e42	#5b791e	#5b791e	#7f71d4	#7f71d4	#5a4daf	#5a4daf
#95ae61	#95ae61	#4c6519	#4c6519	#9489db	#9489db	#4b4092	#4b4092
#aabe81	#aabe81	#3d5114	#3d5114	#a9a0e2	#a9a0e2	#3c3375	#3c3375
#bfcea0	#bfcea0	#2d3c0f	#2d3c0f	#bfb8e9	#bfb8e9	#2d2657	#2d2657
#d4dec0	#d4dec0	#1e280a	#1e280a	#d4cff0	#d4cff0	#1e193a	#1e193a
#e9eedf	#e9eedf	#0f1405	#0f1405	#e9e7f7	#e9e7f7	#0f0c1d	#0f0c1d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe olivedrab und Farbwert #6a5acd

Wechsel der Hintergrundfarbe bei Hover von HTML-Befehl h1

Mit HTML-Tag <h1> erzeugen Sie eine Überschrift der 1. Stufe. Diese kann man farblich gestalten.

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

Wir setzen z.B. die Hintergrundfarbe von <h1> auf Farbe olivedrab und erhöhen die Schriftgröße auf 111%:

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

Jetzt stellen wir ein, dass bei Hover die Hintergrundfarbe auf #6a5acd geändert wird.

<style type="text/css"><!--
  h1:hover { 
    background-color:#6a5acd;
  }
//-->
</style>

Mehr zu h1 können Sie in Grundlegende Gestaltungselemente in HTML finden. Möglichkeiten vom Tag h1 sind in der HTML Referenz bei <h1> beschrieben.

Wechsel der Unterstreichung bei Hover bei Tag a

Ein Hyperlink wird mit HTML-Befehl <a> erzeugt. Dieser kann farblich gestaltet werden.

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

Hier unterstreichen wir <a> mit einem doppelten Rahmen mit 5 Pixel Dicke in Farbe olivedrab.

<style type="text/css"><!--
  a { 
    border-bottom-color:olivedrab; 
    border-bottom-width:5px; 
    border-bottom-style:double;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Farbe der Unterstreichung auf #6a5acd gesetzt wird.

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

Die Idee ist dabei, verschiedene Formatierungen für Inhalt und Unterstreichung zu verwenden. Manchmal sieht man das bei Hyperlinks. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Das ist jedoch keine "normale" Unterstreichung, der Text ist gar nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zu a lesen Sie in Verweise und Protokolle in HTML. Weiteres zum Tag a ist in der HTML Referenz bei <a> genau gezeigt.