Ressourcen: 17 HTML Standard Farbnamen - Kombination von Farbe red und Farbwert #008080

HTML verfügt seit jeher über 17 Standard Farbnamen.

Sie entstehen dadurch, dass die 8 Grundfarben jeweils maximal und zu 50% enthalten sind.

Zu diesen 16 Farben kommt mit grey eine alternative Schreibweise für gray.

Hintergrundfarbe red			Schriftfarbwert #008080
Detail	:	Hintergrund red	Detail	:	Schrift #008080
Farbe	:	red	Farbwert	:	#008080
Farbwert	:	#ff0000	Farbe	:	teal
HTML	:	red	HTML	:	#008080
HTML (Wert)	:	#ff0000	HTML (Wert)	:	#008080
CSS	:	red	CSS	:	#008080
CSS (Wert)	:	#ff0000	CSS (Wert)	:	#008080
CSS (kürzest)	:	#f00	CSS (kürzest)	:	#008080
CSS (RGB)	:	rgb(255,0,0)	CSS (RGB)	:	rgb(0,128,128)
CSS (%RGB)	:	rgb(100%,0%,0%)	CSS (%RGB)	:	rgb(0%,50%,50%)

Verlauf Hintergrundfarbe red nach Schriftfarbwert #008080
#ff0000	#da1212	#b62424	#913636	#6d4949	#485b5b	#246d6d	#008080
#ff0000	#da1212	#b62424	#913636	#6d4949	#485b5b	#246d6d	#008080

Kombination von red und #008080
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				#008080 eignet sich nicht als Schriftfarbe auf Hintergrund red. Zwar ist der Farbunterschied ausreichend, die Helligkeiten sind jedoch zu ähnlich. Die Ähnlichkeit der Farben #008080 und red ergibt sich zu 94.32%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 5.68%.

Hintergrundfarbe red				Schriftfarbwert #008080
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ff0000	#ff0000	#ff0000	#ff0000	#008080	#008080	#008080	#008080
#ff2424	#ff2424	#da0000	#da0000	#249292	#249292	#006d6d	#006d6d
#ff4848	#ff4848	#b60000	#b60000	#48a4a4	#48a4a4	#005b5b	#005b5b
#ff6d6d	#ff6d6d	#910000	#910000	#6db6b6	#6db6b6	#004949	#004949
#ff9191	#ff9191	#6d0000	#6d0000	#91c8c8	#91c8c8	#003636	#003636
#ffb6b6	#ffb6b6	#480000	#480000	#b6dada	#b6dada	#002424	#002424
#ffdada	#ffdada	#240000	#240000	#daecec	#daecec	#001212	#001212
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe red und Farbwert #008080

Zebra-Effekt mit HTML-Befehl tr

Man redet vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Dieser Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .gerade und .ungerade für <tr> mit unterschiedlichen Hintergrundfarben Farbe red und Farbwert #008080.

<style type="text/css"><!--
  tr.gerade { 
    background-color: red;
  }
  tr.ungerade { 
    background-color: #008080;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd verwendet.

<table>
<tr class="gerade"><td>V1-1</td><td>V2-1</td><td>V3-1</td></tr>
<tr class="ungerade"><td>V1-2</td><td>V2-2</td><td>V3-2</td></tr>
<tr class="gerade"><td>V1-3</td><td>V2-3</td><td>V3-3</td></tr>
</table>

Weiteres zu tr lesen Sie in Tabellen in HTML. Mehr zum hier gezeigten HTML-Tag <tr>.

Wechsel der Textfarbe bei Hover von HTML-Befehl code

Die Textfarbe soll sich von Farbe red auf Farbwert #008080 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <code> in Farbe red vor.

Für dieses Beispiel legen wir bei <code> die Textfarbe auf Farbe red fest. Die Hintergrundfarbe behalten wir bei, ändern jedoch die Schriftart auf monospace. Die Größe der Schrift ändern wir auf 9px.

<style type="text/css"><!--
  code { 
    color: red; 
    font-family: monospace; 
    font-size: 9px;
  }
//-->
</style>

Nun fordern wir, dass bei Hover die Textfarbe auf #008080 gesetzt wird.

<style type="text/css"><!--
  code: hover { 
    color: #008080;
  }
//-->
</style>

Weiteres zum Thema finden Sie in Text in HTML. Möglichkeiten vom hier genutzten HTML-Tag code lesen Sie in der HTML Referenz unter <code>.