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

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 #228b22			Schriftfarbwert #fffafa
Detail	:	Hintergrund #228b22	Detail	:	Schrift #fffafa
Farbwert	:	#228b22	Farbwert	:	#fffafa
Farbe	:	forestgreen	Farbe	:	snow
HTML	:	#228b22	HTML	:	#fffafa
HTML (Wert)	:	#228b22	HTML (Wert)	:	#fffafa
CSS	:	#228b22	CSS	:	#fffafa
CSS (Wert)	:	#228b22	CSS (Wert)	:	#fffafa
CSS (kürzest)	:	#228b22	CSS (kürzest)	:	#fffafa
CSS (RGB)	:	rgb(34,139,34)	CSS (RGB)	:	rgb(255,250,250)
CSS (%RGB)	:	rgb(13%,54%,13%)	CSS (%RGB)	:	rgb(100%,98%,98%)

Verlauf Hintergrundfarbwert #228b22 nach Schriftfarbwert #fffafa
#228b22	#419a40	#61aa5f	#80ba7e	#a0ca9d	#bfdabc	#dfeadb	#fffafa
#228b22	#419a40	#61aa5f	#80ba7e	#a0ca9d	#bfdabc	#dfeadb	#fffafa

Kombination von #228b22 und #fffafa
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit der Farben #fffafa und #228b22 beträgt 79.79%. Die Lesbarkeit dieser Farbkombination liegt damit bei 20.21%. #fffafa eignet sich als Schriftfarbe auf Hintergrund #228b22, da der Unterschied in den Farben ok ist, der Helligkeitsunterschied auch.

Hintergrundfarbwert #228b22				Schriftfarbwert #fffafa
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#228b22	#228b22	#228b22	#228b22	#fffafa	#fffafa	#fffafa	#fffafa
#419b41	#419b41	#1d771d	#1d771d	#fffafa	#fffafa	#dad6d6	#dad6d6
#61ac61	#61ac61	#186318	#186318	#fffbfb	#fffbfb	#b6b2b2	#b6b2b2
#80bc80	#80bc80	#134f13	#134f13	#fffcfc	#fffcfc	#918e8e	#918e8e
#a0cda0	#a0cda0	#0e3b0e	#0e3b0e	#fffcfc	#fffcfc	#6d6b6b	#6d6b6b
#bfddbf	#bfddbf	#092709	#092709	#fffdfd	#fffdfd	#484747	#484747
#dfeedf	#dfeedf	#041304	#041304	#fffefe	#fffefe	#242323	#242323
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #228b22 und Farbwert #fffafa

Wechsel der Hintergrundfarbe bei Hover bei Tag pre

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

Wir legen in diesem Beispiel bei <pre> die Hintergrundfarbe auf Farbwert #228b22 fest. Zwar lassen wir die Textfarbe unverändert, ändern jedoch die Schriftart auf arial:

<style type="text/css"><!--
  pre { 
    background-color:#228b22; 
    font-family:arial;
  }
//-->
</style>

Jetzt fordern wir, dass bei Hover die Hintergrundfarbe auf #fffafa gesetzt wird.

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

Weiteres zum Thema pre können Sie in Blockorientierte Elemente in HTML finden. Einzelheiten vom Tag pre finden Sie in der HTML Referenz unter <pre>.

Text- und Unterstreichungsfarben bei Tag label

Hier ändern wir die Textfarbe von <label> auf Farbwert #fffafa. Die Schriftart setzen wir auf arial. Die Schriftgröße verringern wir auf 83%. Wir unterstreichen den Inhalt von <label> mit Hilfe eines gefurchten Rahmens mit 2 Pixel Dicke in Farbwert #228b22. Das geht in HTML kaum. Wir verwenden deshalb CSS.

<style type="text/css"><!--
  label { 
    border-bottom-style: groove; 
    font-size: 83%; 
    border-bottom-color: #228b22; 
    color: #fffafa; 
    font-family: arial; 
    border-bottom-width: 2px;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Weiteres zum Thema können Sie in Formulare in HTML nachsehen. Weiteres zum HTML-Befehl <label>.