Ressourcen: 120 HTML Farbnamen - Kombination von Farbe forestgreen und Farbwert #cd853f

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 forestgreen			Schriftfarbwert #cd853f
Detail	:	Hintergrund forestgreen	Detail	:	Schrift #cd853f
Farbe	:	forestgreen	Farbwert	:	#cd853f
Farbwert	:	#228b22	Farbe	:	peru
HTML	:	forestgreen	HTML	:	#cd853f
HTML (Wert)	:	#228b22	HTML (Wert)	:	#cd853f
CSS	:	forestgreen	CSS	:	#cd853f
CSS (Wert)	:	#228b22	CSS (Wert)	:	#cd853f
CSS (kürzest)	:	#228b22	CSS (kürzest)	:	#cd853f
CSS (RGB)	:	rgb(34,139,34)	CSS (RGB)	:	rgb(205,133,63)
CSS (%RGB)	:	rgb(13%,54%,13%)	CSS (%RGB)	:	rgb(80%,52%,24%)

Verlauf Hintergrundfarbe forestgreen nach Schriftfarbwert #cd853f
#228b22	#3a8a26	#52892a	#6b882e	#838732	#9c8636	#b4853a	#cd853f
#228b22	#3a8a26	#52892a	#6b882e	#838732	#9c8636	#b4853a	#cd853f

Kombination von forestgreen und #cd853f
Cras id velit ante. 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 vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit von #cd853f und forestgreen beträgt 93.01%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 6.99%. #cd853f ist nicht als Schriftfarbe auf Hintergrund forestgreen geeignet. Die Helligkeit und Farben sind sich zu ähnlich.

Hintergrundfarbe forestgreen				Schriftfarbwert #cd853f
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#228b22	#228b22	#228b22	#228b22	#cd853f	#cd853f	#cd853f	#cd853f
#419b41	#419b41	#1d771d	#1d771d	#d4965a	#d4965a	#af7236	#af7236
#61ac61	#61ac61	#186318	#186318	#dba775	#dba775	#925f2d	#925f2d
#80bc80	#80bc80	#134f13	#134f13	#e2b991	#e2b991	#754c24	#754c24
#a0cda0	#a0cda0	#0e3b0e	#0e3b0e	#e9caac	#e9caac	#57391b	#57391b
#bfddbf	#bfddbf	#092709	#092709	#f0dcc8	#f0dcc8	#3a2612	#3a2612
#dfeedf	#dfeedf	#041304	#041304	#f7ede3	#f7ede3	#1d1309	#1d1309
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe forestgreen und Farbwert #cd853f

Wechsel der Hintergrundfarbe bei Hover bei HTML-Befehl h6

Eine Überschrift der 6. Stufe wird mit HTML-Tag <h6> erzeugt. Diese kann hervorgehoben und farblich gestaltet werden.

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

Hier setzen wir die Hintergrundfarbe von <h6> auf Farbe forestgreen. Die Größe der Schrift ändern wir auf 13px.

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

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Hintergrundfarbe zu #cd853f ändert.

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

Mehr zum Thema h6 können Sie in Grundlegende Gestaltungselemente in HTML nachlesen. Möglichkeiten vom hier genutzten Tag h6 erfahren Sie in der HTML Referenz unter <h6>.

Wechsel der Unterstreichung bei Hover bei Tag ins

Die Unterstreichungsfarbe soll sich von Farbe forestgreen auf Farbwert #cd853f ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <ins> in Farbe forestgreen vor.

In diesem Beispiel unterstreichen wir <ins> mit Hilfe eines gezahnten Rahmens mit 2 Pixel Dicke in Farbe forestgreen.

<style type="text/css"><!--
  ins { border-bottom:2px ridge forestgreen; }
//-->
</style>

Nun stellen wir ein, dass bei Hover die Unterstreichungsfarbe auf #cd853f gesetzt wird.

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

Die Idee ist dabei, verschiedene Formatierungen für Inhalt und Unterstreichung zu nutzen. Manchmal sehen Sie diesen Effekt bei Links. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine normale Unterstreichung, der Text hat gar keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Die Beschreibung vom HTML-Tag ins erfahren Sie in der HTML Referenz unter <ins>.