Ressourcen: 120 HTML Farbnamen - Kombination von Farbe greenyellow und Farbe lightgreen

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 greenyellow			Schriftfarbe lightgreen
Detail	:	Hintergrund greenyellow	Detail	:	Schrift lightgreen
Farbe	:	greenyellow	Farbe	:	lightgreen
Farbwert	:	#adff2f	Farbwert	:	#90ee90
HTML	:	greenyellow	HTML	:	lightgreen
HTML (Wert)	:	#adff2f	HTML (Wert)	:	#90ee90
CSS	:	greenyellow	CSS	:	lightgreen
CSS (Wert)	:	#adff2f	CSS (Wert)	:	#90ee90
CSS (kürzest)	:	#adff2f	CSS (kürzest)	:	#90ee90
CSS (RGB)	:	rgb(173,255,47)	CSS (RGB)	:	rgb(144,238,144)
CSS (%RGB)	:	rgb(67%,100%,18%)	CSS (%RGB)	:	rgb(56%,93%,56%)

Verlauf Hintergrundfarbe greenyellow nach Schriftfarbe lightgreen
#adff2f	#a8fc3c	#a4fa4a	#a0f758	#9cf566	#98f274	#94f082	#90ee90
#adff2f	#a8fc3c	#a4fa4a	#a0f758	#9cf566	#98f274	#94f082	#90ee90

Kombination von greenyellow und lightgreen
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				Auf Hintergrund greenyellow ist lightgreen ungeeignet. Die Unterschiede in der Helligkeit und Farbe sind zu gering. Die Ähnlichkeit von lightgreen und greenyellow beträgt 94.50%. Die Lesbarkeit dieser Kombination bewerte ich mit 5.50%.

Hintergrundfarbe greenyellow				Schriftfarbe lightgreen
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#adff2f	#adff2f	#adff2f	#adff2f	#90ee90	#90ee90	#90ee90	#90ee90
#b8ff4c	#b8ff4c	#94da28	#94da28	#9ff09f	#9ff09f	#7bcc7b	#7bcc7b
#c4ff6a	#c4ff6a	#7bb621	#7bb621	#aff2af	#aff2af	#66aa66	#66aa66
#d0ff88	#d0ff88	#62911a	#62911a	#bff5bf	#bff5bf	#528852	#528852
#dbffa5	#dbffa5	#4a6d14	#4a6d14	#cff7cf	#cff7cf	#3d663d	#3d663d
#e7ffc3	#e7ffc3	#31480d	#31480d	#dffadf	#dffadf	#294429	#294429
#f3ffe1	#f3ffe1	#182406	#182406	#effcef	#effcef	#142214	#142214
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe greenyellow und Farbe lightgreen

Wechsel der Textfarbe bei Hover mit HTML-Tag col

Die Textfarbe soll sich von Farbe greenyellow auf Farbe lightgreen ändern, wenn man mit der Maus auf <col> zeigt. Bereiten wir zunächst eine Formatierung von <col> in Farbe greenyellow vor.

Wir legen zum Beispiel Farbe greenyellow als Textfarbe von <col> fest. Die Hintergrundfarbe behalten wir bei, ändern jedoch die Schriftart auf sans-serif und setzen die Schriftgröße auf 13px.

<style type="text/css"><!--
  col { 
    font-size: 13px; 
    color: greenyellow; 
    font-family: sans-serif;
  }
//-->
</style>

Nun fordern wir, dass sich bei Berührung mit der Maus die Textfarbe auf lightgreen ändert.

<style type="text/css"><!--
  col:hover { 
    color:lightgreen;
  }
//-->
</style>

Weiteres zu col erfahren Sie in Tabellen in HTML. Der hier genutzte HTML-Tag col ist in der HTML Referenz unter <col> genau beschrieben.

Wechsel der Unterstreichung bei Hover von HTML-Befehl ins

Die Unterstreichungsfarbe soll sich von Farbe greenyellow auf Farbe lightgreen ändern, wenn man mit der Maus auf <ins> zeigt. Wir bereiten zunächst eine Formatierung von <ins> in Farbe greenyellow vor.

Hier unterstreichen wir <ins> mit Hilfe eines einfallenden Rahmens mit 3 Pixel Dicke in Farbe greenyellow.

<style type="text/css"><!--
  ins { border-bottom:3px inset greenyellow; }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Unterstreichungsfarbe auf lightgreen gesetzt wird.

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

Die Idee ist dabei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu verwenden. 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 keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Weiteres zum Tag ins finden Sie in der HTML Referenz unter <ins>.