Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #f0f8ff und Farbwert #228b22

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.

Hintergrundfarbwert #f0f8ff			Schriftfarbwert #228b22
Detail	:	Hintergrund #f0f8ff	Detail	:	Schrift #228b22
Farbwert	:	#f0f8ff	Farbwert	:	#228b22
Farbe	:	aliceblue	Farbe	:	forestgreen
HTML	:	#f0f8ff	HTML	:	#228b22
HTML (Wert)	:	#f0f8ff	HTML (Wert)	:	#228b22
CSS	:	#f0f8ff	CSS	:	#228b22
CSS (Wert)	:	#f0f8ff	CSS (Wert)	:	#228b22
CSS (kürzest)	:	#f0f8ff	CSS (kürzest)	:	#228b22
CSS (RGB)	:	rgb(240,248,255)	CSS (RGB)	:	rgb(34,139,34)
CSS (%RGB)	:	rgb(94%,97%,100%)	CSS (%RGB)	:	rgb(13%,54%,13%)

Verlauf Hintergrundfarbwert #f0f8ff nach Schriftfarbwert #228b22
#f0f8ff	#d2e8df	#b5d8bf	#97c9a0	#7ab980	#5caa61	#3f9a41	#228b22
#f0f8ff	#d2e8df	#b5d8bf	#97c9a0	#7ab980	#5caa61	#3f9a41	#228b22

Kombination von #f0f8ff und #228b22
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit von #228b22 und #f0f8ff ergibt sich zu 80.52%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 19.48%. #228b22 eignet sich als Schriftfarbe auf Hintergrund #f0f8ff, weil sowohl der Unterschied in den Helligkeiten als auch der Farbenunterschied in Ordnung sind.

Hintergrundfarbwert #f0f8ff				Schriftfarbwert #228b22
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f0f8ff	#f0f8ff	#f0f8ff	#f0f8ff	#228b22	#228b22	#228b22	#228b22
#f2f9ff	#f2f9ff	#cdd4da	#cdd4da	#419b41	#419b41	#1d771d	#1d771d
#f4faff	#f4faff	#abb1b6	#abb1b6	#61ac61	#61ac61	#186318	#186318
#f6fbff	#f6fbff	#898d91	#898d91	#80bc80	#80bc80	#134f13	#134f13
#f8fcff	#f8fcff	#666a6d	#666a6d	#a0cda0	#a0cda0	#0e3b0e	#0e3b0e
#fafdff	#fafdff	#444648	#444648	#bfddbf	#bfddbf	#092709	#092709
#fcfeff	#fcfeff	#222324	#222324	#dfeedf	#dfeedf	#041304	#041304
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

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

Wechsel der Umrandung bei Hover von Tag iframe

Die Rahmenfarbe soll sich von Farbwert #f0f8ff auf Farbwert #228b22 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Darstellung von <iframe> in Farbwert #f0f8ff vor.

In diesem Beispiel umranden wir <iframe> mit einem 4 Pixel dicken, gezahnten Rahmen in Farbwert #f0f8ff.

<style type="text/css"><!--
  iframe { 
    border-width:4px; 
    border-style:ridge; 
    border-color:#f0f8ff;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Hover die Rahmenfarbe zu #228b22 ändert.

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

Möglichkeiten vom HTML-Tag iframe sind in der HTML Referenz bei <iframe> genau gezeigt.

Text- und Unterstreichungsfarben von Befehl samp

Bei diesem Beispiel ändern wir die Textfarbe von <samp> auf Farbwert #228b22 und lassen die Hintergrundfarbe unverändert. Die Schriftart ändern wir auf monospace. Die Schriftgröße ändern wir auf 13px. Wir unterstreichen den Inhalt von <samp> mit Hilfe eines einfallenden Rahmens mit 3 Pixel Dicke in Farbwert #f0f8ff. In HTML geht das nicht. Deshalb formatieren wir mit CSS.

<style type="text/css"><!--
  samp { 
    font-size:13px; 
    border-bottom:3px inset #f0f8ff; 
    font-family:monospace; 
    color:#228b22;
  }
//-->
</style>

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

Mehr zu samp erfahren Sie in Text in HTML. Der HTML-Tag samp ist in der HTML Referenz unter <samp> genau gezeigt.