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

von Thomas Salvador.

Farben werden in HTML entweder mit ihrem Namen oder mit ihrem Wert beschrieben.

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 #ff0000

DetailHintergrund #ff00ff DetailSchrift #ff0000 
Farbwert :#ff00ffFarbwert :#ff0000
Farbe :fuchsiaFarbe :red
HTML:#ff00ffHTML:#ff0000
HTML (Wert):#ff00ffHTML (Wert):#ff0000
CSS:#ff00ffCSS:#ff0000
CSS (Wert):#ff00ffCSS (Wert):#ff0000
CSS (kürzest):#f0fCSS (kürzest):#f00
CSS (RGB):rgb(255,0,255)CSS (RGB):rgb(255,0,0)
CSS (%RGB):rgb(100%,0%,100%)CSS (%RGB):rgb(100%,0%,0%)

Verlauf Hintergrundfarbwert #ff00ff nach Schriftfarbwert #ff0000

#ff00ff#ff00da#ff00b6#ff0091#ff006d#ff0048#ff0024#ff0000
#ff00ff#ff00da#ff00b6#ff0091#ff006d#ff0048#ff0024#ff0000

Kombination von #ff00ff und #ff0000

Cras id velit ante. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

#ff0000 ist nicht als Schriftfarbe auf Hintergrund #ff00ff geeignet. Die Unterschiede in der Helligkeit und Farbe sind unzureichend.

Die Ähnlichkeit der Farben #ff0000 und #ff00ff beträgt 93.93%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 6.07%.

Hintergrundfarbwert #ff00ff

Schriftfarbwert #ff0000

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#ff00ff#ff00ff#ff00ff#ff00ff#ff0000#ff0000#ff0000#ff0000
#ff24ff#ff24ff#da00da#da00da#ff2424#ff2424#da0000#da0000
#ff48ff#ff48ff#b600b6#b600b6#ff4848#ff4848#b60000#b60000
#ff6dff#ff6dff#910091#910091#ff6d6d#ff6d6d#910000#910000
#ff91ff#ff91ff#6d006d#6d006d#ff9191#ff9191#6d0000#6d0000
#ffb6ff#ffb6ff#480048#480048#ffb6b6#ffb6b6#480000#480000
#ffdaff#ffdaff#240024#240024#ffdada#ffdada#240000#240000
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiel zur Kombination von Farbwert #ff00ff und Farbwert #ff0000

Zebra-Effekt mit HTML-Tag tr

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, redet man vom so genannten Zebra-Effekt. Der Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .even und .odd für <tr> mit den Hintergrundfarben Farbwert #ff00ff und Farbwert #ff0000.

<style type="text/css"><!--
  tr.even { 
    background-color:#f0f;
  }
  tr.odd { 
    background-color:#f00;
  }
//-->
</style>

Diese werden dann abwechselnd verwendet.

<table>
<tr class="even"><td>Ha/a</td><td>Hb/a</td><td>Hc/a</td></tr>
<tr class="odd"><td>Ha/b</td><td>Hb/b</td><td>Hc/b</td></tr>
<tr class="even"><td>Ha/c</td><td>Hb/c</td><td>Hc/c</td></tr>
</table>

Mehr zu tr lesen Sie in Tabellen in HTML. Die Beschreibung vom hier verwendeten Befehl tr finden Sie in der HTML Referenz unter <tr>.

Tabelle der 17 HTML Farbnamen

Hintergrund Farbwert Farbe undSchrift Farbwert Farbkombination
aqua #00ffff         +  aqua #00ffff aqua / #ff00ff
black #000000         +  black #000000 black / #ff00ff
blue #0000ff         +  blue #0000ff blue / #ff00ff
fuchsia #ff00ff         +  fuchsia #ff00ff fuchsia / #ff00ff
gray #808080         +  gray #808080 gray / #ff00ff
grey #808080         +  grey #808080 grey / #ff00ff
green #008000         +  green #008000 green / #ff00ff
lime #00ff00         +  lime #00ff00 lime / #ff00ff
maroon #800000         +  maroon #800000 maroon / #ff00ff
navy #000080         +  navy #000080 navy / #ff00ff
olive #808000         +  olive #808000 olive / #ff00ff
purple #800080         +  purple #800080 purple / #ff00ff
red #ff0000         +  red #ff0000 red / #ff00ff
silver #c0c0c0         +  silver #c0c0c0 silver / #ff00ff
teal #008080         +  teal #008080 teal / #ff00ff
white #ffffff         +  white #ffffff white / #ff00ff
yellow #ffff00         +  yellow #ffff00 yellow / #ff00ff

Weitere Farbtabellen