Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #f08080 und Farbe lightcyan

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 #f08080			Schriftfarbe lightcyan
Detail	:	Hintergrund #f08080	Detail	:	Schrift lightcyan
Farbwert	:	#f08080	Farbe	:	lightcyan
Farbe	:	lightcoral	Farbwert	:	#e0ffff
HTML	:	#f08080	HTML	:	lightcyan
HTML (Wert)	:	#f08080	HTML (Wert)	:	#e0ffff
CSS	:	#f08080	CSS	:	lightcyan
CSS (Wert)	:	#f08080	CSS (Wert)	:	#e0ffff
CSS (kürzest)	:	#f08080	CSS (kürzest)	:	#e0ffff
CSS (RGB)	:	rgb(240,128,128)	CSS (RGB)	:	rgb(224,255,255)
CSS (%RGB)	:	rgb(94%,50%,50%)	CSS (%RGB)	:	rgb(87%,100%,100%)

Verlauf Hintergrundfarbwert #f08080 nach Schriftfarbe lightcyan
#f08080	#ed9292	#eba4a4	#e9b6b6	#e6c8c8	#e4dada	#e2ecec	#e0ffff
#f08080	#ed9292	#eba4a4	#e9b6b6	#e6c8c8	#e4dada	#e2ecec	#e0ffff

Kombination von #f08080 und lightcyan
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 vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante.				Die Ähnlichkeit der Farben lightcyan und #f08080 beträgt 88.30%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 11.70%. lightcyan ist nicht als Schriftfarbe auf Hintergrund #f08080 geeignet, da weder der Helligkeitsunterschied noch der Farbunterschied ausreichend sind.

Hintergrundfarbwert #f08080				Schriftfarbe lightcyan
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f08080	#f08080	#f08080	#f08080	#e0ffff	#e0ffff	#e0ffff	#e0ffff
#f29292	#f29292	#cd6d6d	#cd6d6d	#e4ffff	#e4ffff	#c0dada	#c0dada
#f4a4a4	#f4a4a4	#ab5b5b	#ab5b5b	#e8ffff	#e8ffff	#a0b6b6	#a0b6b6
#f6b6b6	#f6b6b6	#894949	#894949	#edffff	#edffff	#809191	#809191
#f8c8c8	#f8c8c8	#663636	#663636	#f1ffff	#f1ffff	#606d6d	#606d6d
#fadada	#fadada	#442424	#442424	#f6ffff	#f6ffff	#404848	#404848
#fcecec	#fcecec	#221212	#221212	#faffff	#faffff	#202424	#202424
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #f08080 und Farbe lightcyan

Zebra-Effekt von HTML-Befehl tr

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man von einem so genannten Zebra-Effekt. Der Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <tr> mit den Hintergrundfarben Farbwert #f08080 und Farbe lightcyan.

<style type="text/css"><!--
  tr.ger { 
    background-color: #f08080;
  }
  tr.ung { 
    background-color: lightcyan;
  }
//-->
</style>

Diese werden abwechselnd verwendet.

<table>
<tr class="ger"><td>B1:1</td><td>B2:1</td><td>B3:1</td></tr>
<tr class="ung"><td>B1:2</td><td>B2:2</td><td>B3:2</td></tr>
<tr class="ger"><td>B1:3</td><td>B2:3</td><td>B3:3</td></tr>
</table>

Weiteres zum Thema tr finden Sie in Tabellen in HTML. Die Beschreibung vom HTML-Befehl tr finden Sie in der HTML Referenz unter <tr>.

Wechsel der Unterstreichung bei Hover bei Befehl legend

Die Farbe der Unterstreichung soll sich von Farbwert #f08080 auf Farbe lightcyan ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <legend> in Farbwert #f08080 vor.

Beispielsweise unterstreichen wir <legend> mit einem gefurchten Rahmen mit 1 Pixel Dicke in Farbwert #f08080.

<style type="text/css"><!--
  legend { 
    border-bottom-color:#f08080; 
    border-bottom-style:groove; 
    border-bottom-width:1px;
  }
//-->
</style>

Nun fordern wir, dass bei Berührung mit der Maus die Farbe der Unterstreichung auf lightcyan geändert wird.

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

Die Idee ist, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu haben. Manchmal sieht man dies bei Links. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Es ist jedoch keine "normale" Unterstreichung, der Text hat gar keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Mehr zu legend können Sie in Formulare in HTML finden. Die Beschreibung vom hier gezeigten Tag legend finden Sie in der HTML Referenz unter <legend>.