Ressourcen: 137 HTML Farbnamen - Kombination von Farbe olive und Farbe honeydew

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 olive			Schriftfarbe honeydew
Detail	:	Hintergrund olive	Detail	:	Schrift honeydew
Farbe	:	olive	Farbe	:	honeydew
Farbwert	:	#808000	Farbwert	:	#f0fff0
HTML	:	olive	HTML	:	honeydew
HTML (Wert)	:	#808000	HTML (Wert)	:	#f0fff0
CSS	:	olive	CSS	:	honeydew
CSS (Wert)	:	#808000	CSS (Wert)	:	#f0fff0
CSS (kürzest)	:	#808000	CSS (kürzest)	:	#f0fff0
CSS (RGB)	:	rgb(128,128,0)	CSS (RGB)	:	rgb(240,255,240)
CSS (%RGB)	:	rgb(50%,50%,0%)	CSS (%RGB)	:	rgb(94%,100%,94%)

Verlauf Hintergrundfarbe olive nach Schriftfarbe honeydew
#808000	#909222	#a0a444	#b0b666	#c0c889	#d0daab	#e0eccd	#f0fff0
#808000	#909222	#a0a444	#b0b666	#c0c889	#d0daab	#e0eccd	#f0fff0

Kombination von olive und honeydew
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 vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante.				Die Ähnlichkeit von honeydew und olive beträgt 80.72%. Die Lesbarkeit dieser Kombination ergibt sich zu 19.28%. honeydew ist nicht als Schriftfarbe auf Hintergrund olive geeignet. Zwar ist der Helligkeitsunterschied ausreichend, doch die Farben selbst sind zu ähnlich.

Hintergrundfarbe olive				Schriftfarbe honeydew
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#808000	#808000	#808000	#808000	#f0fff0	#f0fff0	#f0fff0	#f0fff0
#929224	#929224	#6d6d00	#6d6d00	#f2fff2	#f2fff2	#cddacd	#cddacd
#a4a448	#a4a448	#5b5b00	#5b5b00	#f4fff4	#f4fff4	#abb6ab	#abb6ab
#b6b66d	#b6b66d	#494900	#494900	#f6fff6	#f6fff6	#899189	#899189
#c8c891	#c8c891	#363600	#363600	#f8fff8	#f8fff8	#666d66	#666d66
#dadab6	#dadab6	#242400	#242400	#fafffa	#fafffa	#444844	#444844
#ececda	#ececda	#121200	#121200	#fcfffc	#fcfffc	#222422	#222422
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe olive und Farbe honeydew

Wechsel der Hintergrundfarbe bei Hover von Befehl a

Ein Verweis wird mit Tag <a> erzeugt. Diesen kann man hervorheben und farblich gestalten.

Die Hintergrundfarbe soll sich von Farbe olive auf Farbe honeydew ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <a> in Farbe olive vor.

Hier legen wir Farbe olive als Hintergrundfarbe von <a> fest und ändern die Größe der Schrift auf 13px:

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

Jetzt fordern wir, dass bei Berührung mit der Maus die Hintergrundfarbe auf honeydew geändert wird.

<style type="text/css"><!--
  a:hover { 
    background-color:honeydew;
  }
//-->
</style>

Weiteres zum Thema lesen Sie in Verweise und Protokolle in HTML. Möglichkeiten des hier genutzten HTML-Befehl a sind in der HTML Referenz unter <a> genau zusammengestellt.

Wechsel der Unterstreichung bei Hover von HTML-Tag h1

Eine Überschrift der 1. Stufe wird mit Tag <h1> erzeugt. Diese kann man hervorheben und farblich gestalten.

Die Farbe der Unterstreichung soll sich von Farbe olive auf Farbe honeydew ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <h1> in Farbe olive vor.

Hier unterstreichen wir <h1> mit Hilfe eines gepunkteten Rahmens mit 3 Pixel Dicke in Farbe olive.

<style type="text/css"><!--
  h1 { 
    border-bottom-color: olive; 
    border-bottom-style: dotted; 
    border-bottom-width: 3px;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Mausberührung die Unterstreichungsfarbe zu honeydew ändert.

<style type="text/css"><!--
  h1:hover { 
    border-bottom-color:honeydew;
  }
//-->
</style>

Die Idee ist dabei, unabhängige Formatierungen für Inhalt und Unterstreichung zu haben. Öfter sehen Sie dies bei Hyperlinks. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Das ist aber keine normale Unterstreichung, der Text ist überhaupt nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Mehr zum Thema erfahren Sie in Grundlegende Gestaltungselemente in HTML. Weiteres zum hier gezeigten HTML-Befehl h1 ist in der HTML Referenz bei <h1> ausführlich gezeigt.