Ressourcen: 120 HTML Farbnamen - Kombination von Farbe skyblue und Farbwert #ff69b4

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 skyblue			Schriftfarbwert #ff69b4
Detail	:	Hintergrund skyblue	Detail	:	Schrift #ff69b4
Farbe	:	skyblue	Farbwert	:	#ff69b4
Farbwert	:	#87ceeb	Farbe	:	hotpink
HTML	:	skyblue	HTML	:	#ff69b4
HTML (Wert)	:	#87ceeb	HTML (Wert)	:	#ff69b4
CSS	:	skyblue	CSS	:	#ff69b4
CSS (Wert)	:	#87ceeb	CSS (Wert)	:	#ff69b4
CSS (kürzest)	:	#87ceeb	CSS (kürzest)	:	#ff69b4
CSS (RGB)	:	rgb(135,206,235)	CSS (RGB)	:	rgb(255,105,180)
CSS (%RGB)	:	rgb(52%,80%,92%)	CSS (%RGB)	:	rgb(100%,41%,70%)

Verlauf Hintergrundfarbe skyblue nach Schriftfarbwert #ff69b4
#87ceeb	#98bfe3	#a9b1db	#baa2d3	#cb94cb	#dc85c3	#ed77bb	#ff69b4
#87ceeb	#98bfe3	#a9b1db	#baa2d3	#cb94cb	#dc85c3	#ed77bb	#ff69b4

Kombination von skyblue und #ff69b4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in.				#ff69b4 eignet sich nicht als Schriftfarbe auf Hintergrund skyblue, weil sich die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit von #ff69b4 und skyblue ergibt sich zu 92.76%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 7.24%.

Hintergrundfarbe skyblue				Schriftfarbwert #ff69b4
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#87ceeb	#87ceeb	#87ceeb	#87ceeb	#ff69b4	#ff69b4	#ff69b4	#ff69b4
#98d5ed	#98d5ed	#73b0c9	#73b0c9	#ff7ebe	#ff7ebe	#da5a9a	#da5a9a
#a9dcf0	#a9dcf0	#6093a7	#6093a7	#ff93c9	#ff93c9	#b64b80	#b64b80
#bae3f3	#bae3f3	#4d7586	#4d7586	#ffa9d4	#ffa9d4	#913c66	#913c66
#cbeaf6	#cbeaf6	#395864	#395864	#ffbede	#ffbede	#6d2d4d	#6d2d4d
#dcf1f9	#dcf1f9	#263a43	#263a43	#ffd4e9	#ffd4e9	#481e33	#481e33
#edf8fc	#edf8fc	#131d21	#131d21	#ffe9f4	#ffe9f4	#240f19	#240f19
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe skyblue und Farbwert #ff69b4

Zebra-Effekt mit Befehl td

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man vom so genannten Zebra-Effekt. Dieser Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .even und .odd für <td> mit unterschiedlichen Hintergrundfarben Farbe skyblue und Farbwert #ff69b4.

<style type="text/css"><!--
  td.even { 
    background-color: skyblue;
  }
  td.odd { 
    background-color: #ff69b4;
  }
//-->
</style>

Diese CSS-Klassen werden dann abwechselnd angewendet.

<table>
<tr><td class="even">Aa.a</td><td class="odd">Ab.a</td><td class="even">Ac.a</td></tr>
<tr><td class="even">Aa.b</td><td class="odd">Ab.b</td><td class="even">Ac.b</td></tr>
<tr><td class="even">Aa.c</td><td class="odd">Ab.c</td><td class="even">Ac.c</td></tr>
</table>

Mehr zum Thema erfahren Sie in Tabellen in HTML. Weiteres zum HTML-Befehl <td>.

Wechsel der Hintergrundfarbe bei Hover von HTML-Tag button

Die Hintergrundfarbe soll sich von Farbe skyblue auf Farbwert #ff69b4 ändern, wenn man mit der Maus auf <button> zeigt. Bereiten wir zunächst die Darstellung von <button> in Farbe skyblue vor.

In diesem Beispiel legen wir Farbe skyblue als Hintergrundfarbe von <button> fest. Die Textfarbe verändern wir nicht, ändern jedoch die Schriftart auf arial und verringern die Schriftgröße auf 99%:

<style type="text/css"><!--
  button { 
    font-size: 99%; 
    font-family: arial; 
    background-color: skyblue;
  }
//-->
</style>

Nun fordern wir, dass bei Berührung mit der Maus die Hintergrundfarbe auf #ff69b4 geändert wird.

<style type="text/css"><!--
  button: hover { 
    background-color: #ff69b4;
  }
//-->
</style>

Mehr zu button können Sie in Formulare in HTML nachsehen. Die Beschreibung vom Befehl button lesen Sie in der HTML Referenz unter <button>.