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.
Hintergrundfarbe teal | Schriftfarbwert #800000 | |||||
Detail | : | Hintergrund teal | Detail | : | Schrift #800000 | |
Farbe | : | teal | Farbwert | : | #800000 | |
Farbwert | : | #008080 | Farbe | : | maroon | |
HTML | : | teal | HTML | : | #800000 | |
HTML (Wert) | : | #008080 | HTML (Wert) | : | #800000 | |
CSS | : | teal | CSS | : | #800000 | |
CSS (Wert) | : | #008080 | CSS (Wert) | : | #800000 | |
CSS (kürzest) | : | #008080 | CSS (kürzest) | : | #800000 | |
CSS (RGB) | : | rgb(0,128,128) | CSS (RGB) | : | rgb(128,0,0) | |
CSS (%RGB) | : | rgb(0%,50%,50%) | CSS (%RGB) | : | rgb(50%,0%,0%) |
Verlauf Hintergrundfarbe teal nach Schriftfarbwert #800000 | |||||||
#008080 | #126d6d | #245b5b | #364949 | #493636 | #5b2424 | #6d1212 | #800000 |
#008080 | #126d6d | #245b5b | #364949 | #493636 | #5b2424 | #6d1212 | #800000 |
Kombination von teal und #800000 | |||||||
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. | Die Ähnlichkeit von #800000 und teal ergibt sich zu 89.08%. Die Lesbarkeit dieser Farbkombination liegt damit bei 10.92%. Auf Hintergrund teal ist #800000 ungeeignet, weil sowohl Helligkeit als auch die Farben zu ähnlich sind. |
Hintergrundfarbe teal | Schriftfarbwert #800000 | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#008080 | #008080 | #008080 | #008080 | #800000 | #800000 | #800000 | #800000 |
#249292 | #249292 | #006d6d | #006d6d | #922424 | #922424 | #6d0000 | #6d0000 |
#48a4a4 | #48a4a4 | #005b5b | #005b5b | #a44848 | #a44848 | #5b0000 | #5b0000 |
#6db6b6 | #6db6b6 | #004949 | #004949 | #b66d6d | #b66d6d | #490000 | #490000 |
#91c8c8 | #91c8c8 | #003636 | #003636 | #c89191 | #c89191 | #360000 | #360000 |
#b6dada | #b6dada | #002424 | #002424 | #dab6b6 | #dab6b6 | #240000 | #240000 |
#daecec | #daecec | #001212 | #001212 | #ecdada | #ecdada | #120000 | #120000 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Hier umranden wir <hr> mit einem 4 Pixel dicken, doppelten Rahmen in Farbwert #800000 . Den Hintergrund von <hr> färben wir entsprechend mit Farbe teal. In HTML geht das nicht. Wir verwenden deshalb CSS.
<style type="text/css"><!-- hr { border:4px double #800000; background-color:teal; } //--> </style>
Mehr zum Thema hr können Sie in Grundlegende Gestaltungselemente in HTML nachlesen. Die Beschreibung vom hier gezeigten HTML-Tag hr lesen Sie in der HTML Referenz unter <hr>.
Man spricht von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Er unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .yang und .ying für <td> mit unterschiedlichen Hintergrundfarben Farbe teal und Farbwert #800000.
<style type="text/css"><!-- td.yang { background-color:teal; } td.ying { background-color:#800000; } //--> </style>
Diese Klassen werden abwechselnd angewendet.
<table> <tr><td class="yang">DA,A</td><td class="ying">DB,A</td><td class="yang">DC,A</td></tr> <tr><td class="yang">DA,B</td><td class="ying">DB,B</td><td class="yang">DC,B</td></tr> <tr><td class="yang">DA,C</td><td class="ying">DB,C</td><td class="yang">DC,C</td></tr> </table>
Mehr zum Thema td können Sie in Tabellen in HTML nachsehen. Zur Beschreibung vom hier verwendeten HTML-Befehl <td>.
Hintergrund | Farbwert | Farbe | und | Schrift | Farbwert | Farbkombination |
---|---|---|---|---|---|---|
aqua | #00ffff | + | aqua | #00ffff | aqua / teal | |
black | #000000 | + | black | #000000 | black / teal | |
blue | #0000ff | + | blue | #0000ff | blue / teal | |
fuchsia | #ff00ff | + | fuchsia | #ff00ff | fuchsia / teal | |
gray | #808080 | + | gray | #808080 | gray / teal | |
grey | #808080 | + | grey | #808080 | grey / teal | |
green | #008000 | + | green | #008000 | green / teal | |
lime | #00ff00 | + | lime | #00ff00 | lime / teal | |
maroon | #800000 | + | maroon | #800000 | maroon / teal | |
navy | #000080 | + | navy | #000080 | navy / teal | |
olive | #808000 | + | olive | #808000 | olive / teal | |
purple | #800080 | + | purple | #800080 | purple / teal | |
red | #ff0000 | + | red | #ff0000 | red / teal | |
silver | #c0c0c0 | + | silver | #c0c0c0 | silver / teal | |
teal | #008080 | + | teal | #008080 | teal / teal | |
white | #ffffff | + | white | #ffffff | white / teal | |
yellow | #ffff00 | + | yellow | #ffff00 | yellow / teal |