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

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 #00ffff

Schriftfarbe red

DetailHintergrund #00ffff DetailSchrift red 
Farbwert :#00ffffFarbe :red
Farbe :aquaFarbwert :#ff0000
HTML:#00ffffHTML:red
HTML (Wert):#00ffffHTML (Wert):#ff0000
CSS:#00ffffCSS:red
CSS (Wert):#00ffffCSS (Wert):#ff0000
CSS (kürzest):#0ffCSS (kürzest):#f00
CSS (RGB):rgb(0,255,255)CSS (RGB):rgb(255,0,0)
CSS (%RGB):rgb(0%,100%,100%)CSS (%RGB):rgb(100%,0%,0%)

Verlauf Hintergrundfarbwert #00ffff nach Schriftfarbe red

#00ffff#24dada#48b6b6#6d9191#916d6d#b64848#da2424#ff0000
#00ffff#24dada#48b6b6#6d9191#916d6d#b64848#da2424#ff0000

Kombination von #00ffff und red

Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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 vestibulum tristique erat, ac interdum justo cursus in.

Auf Hintergrund #00ffff ist red ungeeignet. Zwar ist der Farbunterschied gut, die Helligkeiten sind sich jedoch zu ähnlich.

Die Ähnlichkeit von red und #00ffff ergibt sich zu 84.81%. Die Lesbarkeit dieser Kombination bewerte ich mit 15.19%.

Hintergrundfarbwert #00ffff

Schriftfarbe red

Verlauf nach WeißVerlauf nach SchwarzVerlauf nach WeißVerlauf nach Schwarz
#00ffff#00ffff#00ffff#00ffff#ff0000#ff0000#ff0000#ff0000
#24ffff#24ffff#00dada#00dada#ff2424#ff2424#da0000#da0000
#48ffff#48ffff#00b6b6#00b6b6#ff4848#ff4848#b60000#b60000
#6dffff#6dffff#009191#009191#ff6d6d#ff6d6d#910000#910000
#91ffff#91ffff#006d6d#006d6d#ff9191#ff9191#6d0000#6d0000
#b6ffff#b6ffff#004848#004848#ffb6b6#ffb6b6#480000#480000
#daffff#daffff#002424#002424#ffdada#ffdada#240000#240000
#ffffff#ffffff#000000#000000#ffffff#ffffff#000000#000000

Beispiel zur Kombination von Farbwert #00ffff und Farbe red

Wechsel der Unterstreichung bei Hover mit Befehl caption

Die Unterstreichungsfarbe soll sich von Farbwert #00ffff auf Farbe red ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <caption> in Farbwert #00ffff vor.

Hier unterstreichen wir <caption> mit Hilfe eines gezahnten Rahmens mit 2 Pixel Dicke in Farbwert #00ffff.

<style type="text/css"><!--
  caption { border-bottom:2px ridge #0ff; }
//-->
</style>
Nun fordern wir, dass bei Berührung mit der Maus die Farbe der Unterstreichung auf red gesetzt wird.
<style type="text/css"><!--
  caption: hover { 
    border-bottom-color: red;
  }
//-->
</style>

Die Idee ist, verschiedene Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sieht man diesen Effekt bei Hyperlinks. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Dies ist jedoch keine "wirkliche" Unterstreichung, der Text selbst ist überhaupt nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Weiteres zu caption lesen Sie in Tabellen in HTML. Weiteres zum HTML-Tag caption erfahren Sie in der HTML Referenz unter <caption>.

Tabelle der 17 HTML Farbnamen

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

Weitere Farbtabellen