Ressourcen: 17 HTML Standard Farbnamen - Kombination von Farbwert #ff00ff und Farbwert #ffffff

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.

Hintergrundfarbwert #ff00ff			Schriftfarbwert #ffffff
Detail	:	Hintergrund #ff00ff	Detail	:	Schrift #ffffff
Farbwert	:	#ff00ff	Farbwert	:	#ffffff
Farbe	:	fuchsia	Farbe	:	white
HTML	:	#ff00ff	HTML	:	#ffffff
HTML (Wert)	:	#ff00ff	HTML (Wert)	:	#ffffff
CSS	:	#ff00ff	CSS	:	#ffffff
CSS (Wert)	:	#ff00ff	CSS (Wert)	:	#ffffff
CSS (kürzest)	:	#f0f	CSS (kürzest)	:	#fff
CSS (RGB)	:	rgb(255,0,255)	CSS (RGB)	:	rgb(255,255,255)
CSS (%RGB)	:	rgb(100%,0%,100%)	CSS (%RGB)	:	rgb(100%,100%,100%)

Verlauf Hintergrundfarbwert #ff00ff nach Schriftfarbwert #ffffff
#ff00ff	#ff24ff	#ff48ff	#ff6dff	#ff91ff	#ffb6ff	#ffdaff	#ffffff
#ff00ff	#ff24ff	#ff48ff	#ff6dff	#ff91ff	#ffb6ff	#ffdaff	#ffffff

Kombination von #ff00ff und #ffffff
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				#ffffff ist nicht als Schriftfarbe auf Hintergrund #ff00ff geeignet. Zwar ist der Helligkeitsunterschied gut, doch die Farben selbst sind zu ähnlich. Die Ähnlichkeit von #ffffff und #ff00ff beträgt 85.07%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 14.93%.

Hintergrundfarbwert #ff00ff				Schriftfarbwert #ffffff
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ff00ff	#ff00ff	#ff00ff	#ff00ff	#ffffff	#ffffff	#ffffff	#ffffff
#ff24ff	#ff24ff	#da00da	#da00da	#ffffff	#ffffff	#dadada	#dadada
#ff48ff	#ff48ff	#b600b6	#b600b6	#ffffff	#ffffff	#b6b6b6	#b6b6b6
#ff6dff	#ff6dff	#910091	#910091	#ffffff	#ffffff	#919191	#919191
#ff91ff	#ff91ff	#6d006d	#6d006d	#ffffff	#ffffff	#6d6d6d	#6d6d6d
#ffb6ff	#ffb6ff	#480048	#480048	#ffffff	#ffffff	#484848	#484848
#ffdaff	#ffdaff	#240024	#240024	#ffffff	#ffffff	#242424	#242424
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #ff00ff und Farbwert #ffffff

Zebra-Effekt von Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, redet man von einem so genannten Zebra-Effekt. Er unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <td> mit den Hintergrundfarben Farbwert #ff00ff und Farbwert #ffffff.

<style type="text/css"><!--
  td.ger { 
    background-color:#f0f;
  }
  td.ung { 
    background-color:#fff;
  }
//-->
</style>

Diese werden dann abwechselnd genutzt.

<table>
<tr><td class="ger">Da~a</td><td class="ung">Db~a</td><td class="ger">Dc~a</td></tr>
<tr><td class="ger">Da~b</td><td class="ung">Db~b</td><td class="ger">Dc~b</td></tr>
<tr><td class="ger">Da~c</td><td class="ung">Db~c</td><td class="ger">Dc~c</td></tr>
</table>

Weiteres zu td können Sie in Tabellen in HTML nachsehen. Möglichkeiten vom Tag <td>.

Wechsel der Hintergrundfarbe bei Hover mit HTML-Befehl acronym

Die Hintergrundfarbe soll sich von Farbwert #ff00ff auf Farbwert #ffffff ändern, wenn man mit der Maus auf <acronym> zeigt. Wir bereiten zunächst die Formatierung von <acronym> in Farbwert #ff00ff vor.

Hier setzen wir bei <acronym> die Hintergrundfarbe auf Farbwert #ff00ff. Zwar verändern wir die Textfarbe nicht, setzen jedoch die Schriftart auf sans-serif und ändern die Schriftgröße auf 13px:

<style type="text/css"><!--
  acronym { 
    font-size: 13px; 
    background-color: #ff00ff; 
    font-family: sans-serif;
  }
//-->
</style>

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

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

Beschreibung vom Tag <acronym>.