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 #000000 | Schriftfarbwert #ff00ff | |||||
Detail | : | Hintergrund #000000 | Detail | : | Schrift #ff00ff | |
Farbwert | : | #000000 | Farbwert | : | #ff00ff | |
Farbe | : | black | Farbe | : | fuchsia | |
HTML | : | #000000 | HTML | : | #ff00ff | |
HTML (Wert) | : | #000000 | HTML (Wert) | : | #ff00ff | |
CSS | : | #000000 | CSS | : | #ff00ff | |
CSS (Wert) | : | #000000 | CSS (Wert) | : | #ff00ff | |
CSS (kürzest) | : | #000 | CSS (kürzest) | : | #f0f | |
CSS (RGB) | : | rgb(0,0,0) | CSS (RGB) | : | rgb(255,0,255) | |
CSS (%RGB) | : | rgb(0%,0%,0%) | CSS (%RGB) | : | rgb(100%,0%,100%) |
Verlauf Hintergrundfarbwert #000000 nach Schriftfarbwert #ff00ff | |||||||
#000000 | #240024 | #480048 | #6d006d | #910091 | #b600b6 | #da00da | #ff00ff |
#000000 | #240024 | #480048 | #6d006d | #910091 | #b600b6 | #da00da | #ff00ff |
Kombination von #000000 und #ff00ff | |||||||
Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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. | Auf Hintergrund #000000 ist #ff00ff ungeeignet. Zwar ist der Farbunterschied in Ordnung, die Helligkeiten sind sich zu ähnlich. Die Ähnlichkeit von #ff00ff und #000000 beträgt 68.11%. Die Lesbarkeit dieser Kombination ergibt sich zu 31.89%. |
Hintergrundfarbwert #000000 | Schriftfarbwert #ff00ff | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#000000 | #000000 | #000000 | #000000 | #ff00ff | #ff00ff | #ff00ff | #ff00ff |
#242424 | #242424 | #000000 | #000000 | #ff24ff | #ff24ff | #da00da | #da00da |
#484848 | #484848 | #000000 | #000000 | #ff48ff | #ff48ff | #b600b6 | #b600b6 |
#6d6d6d | #6d6d6d | #000000 | #000000 | #ff6dff | #ff6dff | #910091 | #910091 |
#919191 | #919191 | #000000 | #000000 | #ff91ff | #ff91ff | #6d006d | #6d006d |
#b6b6b6 | #b6b6b6 | #000000 | #000000 | #ffb6ff | #ffb6ff | #480048 | #480048 |
#dadada | #dadada | #000000 | #000000 | #ffdaff | #ffdaff | #240024 | #240024 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
In diesem Beispiel ändern wir die Textfarbe von <p> auf Farbwert #ff00ff und die Hintergrundfarbe von <p> auf Farbwert #000000. Als Schriftart setzen wir verdana. Die Schriftgröße setzen wir auf 87%.
<style type="text/css"><!-- p { color: #f0f; font-family: verdana; background-color: #000000; font-size: 87%; } //--> </style>
Weiteres zu p erfahren Sie in Grundlegende Gestaltungselemente in HTML. Beschreibung vom Tag <p>.
Hintergrund | Farbwert | Farbe | und | Schrift | Farbwert | Farbkombination |
---|---|---|---|---|---|---|
aqua | #00ffff | + | aqua | #00ffff | aqua / #000000 | |
black | #000000 | + | black | #000000 | black / #000000 | |
blue | #0000ff | + | blue | #0000ff | blue / #000000 | |
fuchsia | #ff00ff | + | fuchsia | #ff00ff | fuchsia / #000000 | |
gray | #808080 | + | gray | #808080 | gray / #000000 | |
grey | #808080 | + | grey | #808080 | grey / #000000 | |
green | #008000 | + | green | #008000 | green / #000000 | |
lime | #00ff00 | + | lime | #00ff00 | lime / #000000 | |
maroon | #800000 | + | maroon | #800000 | maroon / #000000 | |
navy | #000080 | + | navy | #000080 | navy / #000000 | |
olive | #808000 | + | olive | #808000 | olive / #000000 | |
purple | #800080 | + | purple | #800080 | purple / #000000 | |
red | #ff0000 | + | red | #ff0000 | red / #000000 | |
silver | #c0c0c0 | + | silver | #c0c0c0 | silver / #000000 | |
teal | #008080 | + | teal | #008080 | teal / #000000 | |
white | #ffffff | + | white | #ffffff | white / #000000 | |
yellow | #ffff00 | + | yellow | #ffff00 | yellow / #000000 |