Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #66cdaa und Farbwert #228b22

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.

Hintergrundfarbwert #66cdaa			Schriftfarbwert #228b22
Detail	:	Hintergrund #66cdaa	Detail	:	Schrift #228b22
Farbwert	:	#66cdaa	Farbwert	:	#228b22
Farbe	:	mediumaquamarine	Farbe	:	forestgreen
HTML	:	#66cdaa	HTML	:	#228b22
HTML (Wert)	:	#66cdaa	HTML (Wert)	:	#228b22
CSS	:	#66cdaa	CSS	:	#228b22
CSS (Wert)	:	#66cdaa	CSS (Wert)	:	#228b22
CSS (kürzest)	:	#66cdaa	CSS (kürzest)	:	#228b22
CSS (RGB)	:	rgb(102,205,170)	CSS (RGB)	:	rgb(34,139,34)
CSS (%RGB)	:	rgb(40%,80%,66%)	CSS (%RGB)	:	rgb(13%,54%,13%)

Verlauf Hintergrundfarbwert #66cdaa nach Schriftfarbwert #228b22
#66cdaa	#5cc396	#52ba83	#48b06f	#3fa75c	#359d48	#2b9435	#228b22
#66cdaa	#5cc396	#52ba83	#48b06f	#3fa75c	#359d48	#2b9435	#228b22

Kombination von #66cdaa und #228b22
Cras vestibulum tristique erat, ac interdum justo cursus in. 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 id velit ante.				Auf Hintergrund #66cdaa ist #228b22 ungeeignet, da weder der Helligkeitsunterschied noch der Farbunterschied gross genug sind. Die Ähnlichkeit von #228b22 und #66cdaa ergibt sich zu 89.17%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 10.83%.

Hintergrundfarbwert #66cdaa				Schriftfarbwert #228b22
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#66cdaa	#66cdaa	#66cdaa	#66cdaa	#228b22	#228b22	#228b22	#228b22
#7bd4b6	#7bd4b6	#57af91	#57af91	#419b41	#419b41	#1d771d	#1d771d
#91dbc2	#91dbc2	#489279	#489279	#61ac61	#61ac61	#186318	#186318
#a7e2ce	#a7e2ce	#3a7561	#3a7561	#80bc80	#80bc80	#134f13	#134f13
#bde9da	#bde9da	#2b5748	#2b5748	#a0cda0	#a0cda0	#0e3b0e	#0e3b0e
#d3f0e6	#d3f0e6	#1d3a30	#1d3a30	#bfddbf	#bfddbf	#092709	#092709
#e9f7f2	#e9f7f2	#0e1d18	#0e1d18	#dfeedf	#dfeedf	#041304	#041304
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #66cdaa und Farbwert #228b22

Wechsel der Textfarbe bei Hover mit Tag a

Mit Befehl <a> wird ein Link gesetzt. Er kann hervorgehoben und farblich gestaltet werden.

Die Textfarbe soll sich von Farbwert #66cdaa auf Farbwert #228b22 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <a> in Farbwert #66cdaa vor.

Wir setzen zum Beispiel die Textfarbe von <a> auf Farbwert #66cdaa. Die Hintergrundfarbe verändern wir nicht, ändern jedoch die Schriftart auf monospace:

<style type="text/css"><!--
  a { 
    font-family:monospace; 
    color:#66cdaa;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Mausberührung die Textfarbe auf #228b22 gesetzt wird.

<style type="text/css"><!--
  a:hover { 
    color:#228b22;
  }
//-->
</style>

Weiteres zum Thema a finden Sie in Verweise und Protokolle in HTML. Der HTML-Befehl a ist in der HTML Referenz unter <a> ausführlich zusammengestellt.

Wechsel der Umrandung bei Hover mit HTML-Befehl h2

Mit Tag <h2> wird eine Überschrift der 2. Stufe gesetzt. Diese können Sie hervorheben und farblich gestalten.

Die Rahmenfarbe soll sich von Farbwert #66cdaa auf Farbwert #228b22 ändern, wenn man mit der Maus auf <h2> zeigt. Wir bereiten zunächst die Formatierung von <h2> in Farbwert #66cdaa vor.

In diesem Beispiel umranden wir <h2> mit einem 4 Pixel dicken, gefurchten Rahmen in Farbwert #66cdaa.

<style type="text/css"><!--
  h2 { 
    border-style: groove; 
    border-color: #66cdaa; 
    border-width: 4px;
  }
//-->
</style>

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

<style type="text/css"><!--
  h2: hover { 
    border-color: #228b22;
  }
//-->
</style>

Mehr zum Thema finden Sie in Grundlegende Gestaltungselemente in HTML. Mehr zum HTML-Tag h2 ist in der HTML Referenz unter <h2> gezeigt.