Ressourcen: 120 HTML Farbnamen - Kombination von Farbe pink und Farbwert #ff4500

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 pink			Schriftfarbwert #ff4500
Detail	:	Hintergrund pink	Detail	:	Schrift #ff4500
Farbe	:	pink	Farbwert	:	#ff4500
Farbwert	:	#ffc0cb	Farbe	:	orangered
HTML	:	pink	HTML	:	#ff4500
HTML (Wert)	:	#ffc0cb	HTML (Wert)	:	#ff4500
CSS	:	pink	CSS	:	#ff4500
CSS (Wert)	:	#ffc0cb	CSS (Wert)	:	#ff4500
CSS (kürzest)	:	#ffc0cb	CSS (kürzest)	:	#ff4500
CSS (RGB)	:	rgb(255,192,203)	CSS (RGB)	:	rgb(255,69,0)
CSS (%RGB)	:	rgb(100%,75%,79%)	CSS (%RGB)	:	rgb(100%,27%,0%)

Verlauf Hintergrundfarbe pink nach Schriftfarbwert #ff4500
#ffc0cb	#ffaeae	#ff9c91	#ff8b74	#ff7957	#ff683a	#ff561d	#ff4500
#ffc0cb	#ffaeae	#ff9c91	#ff8b74	#ff7957	#ff683a	#ff561d	#ff4500

Kombination von pink und #ff4500
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Die Ähnlichkeit der Farben #ff4500 und pink beträgt 89.35%. Die Lesbarkeit dieser Kombination liegt damit bei 10.65%. Auf Hintergrund pink ist #ff4500 ungeeignet, weil weder der Helligkeitsunterschied noch der Farbunterschied ausreichend sind.

Hintergrundfarbe pink				Schriftfarbwert #ff4500
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffc0cb	#ffc0cb	#ffc0cb	#ffc0cb	#ff4500	#ff4500	#ff4500	#ff4500
#ffc9d2	#ffc9d2	#daa4ae	#daa4ae	#ff5f24	#ff5f24	#da3b00	#da3b00
#ffd2d9	#ffd2d9	#b68991	#b68991	#ff7a48	#ff7a48	#b63100	#b63100
#ffdbe1	#ffdbe1	#916d74	#916d74	#ff946d	#ff946d	#912700	#912700
#ffe4e8	#ffe4e8	#6d5257	#6d5257	#ffaf91	#ffaf91	#6d1d00	#6d1d00
#ffedf0	#ffedf0	#48363a	#48363a	#ffc9b6	#ffc9b6	#481300	#481300
#fff6f7	#fff6f7	#241b1d	#241b1d	#ffe4da	#ffe4da	#240900	#240900
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe pink und Farbwert #ff4500

Wechsel der Umrandung bei Hover mit HTML-Tag hr

Die Rahmenfarbe soll sich von Farbe pink auf Farbwert #ff4500 ändern, wenn man mit der Maus auf <hr> zeigt. Bereiten wir zunächst die Darstellung von <hr> in Farbe pink vor.

In diesem Beispiel umranden wir <hr> mit einem 3 Pixel dicken, gestrichelten Rahmen in Farbe pink.

<style type="text/css"><!--
  hr { border:3px dashed pink; }
//-->
</style>

Jetzt stellen wir ein, dass bei Hover die Rahmenfarbe auf #ff4500 geändert wird.

<style type="text/css"><!--
  hr: hover { 
    border-color: #ff4500;
  }
//-->
</style>

Mehr zum Thema hr erfahren Sie in Grundlegende Gestaltungselemente in HTML. Einzelheiten vom Befehl <hr>.

Zebra-Effekt bei Tag td

Man redet vom so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Dieser Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <td> mit den Hintergrundfarben Farbe pink und Farbwert #ff4500.

<style type="text/css"><!--
  td.ungerade { 
    background-color:pink;
  }
  td.gerade { 
    background-color: #ff4500;
  }
//-->
</style>

Diese CSS-Klassen werden abwechselnd verwendet.

<table>
<tr><td class="ungerade">R1,1</td><td class="gerade">R2,1</td><td class="ungerade">R3,1</td></tr>
<tr><td class="ungerade">R1,2</td><td class="gerade">R2,2</td><td class="ungerade">R3,2</td></tr>
<tr><td class="ungerade">R1,3</td><td class="gerade">R2,3</td><td class="ungerade">R3,3</td></tr>
</table>

Weiteres zum Thema td können Sie in Tabellen in HTML nachlesen. Weiteres zum HTML-Befehl td ist in der HTML Referenz unter <td> zusammengestellt.