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 green | Schriftfarbe black | |||||
| Detail | : | Hintergrund green | Detail | : | Schrift black | |
| Farbe | : | green | Farbe | : | black | |
| Farbwert | : | #008000 | Farbwert | : | #000000 | |
| HTML | : | green | HTML | : | black | |
| HTML (Wert) | : | #008000 | HTML (Wert) | : | #000000 | |
| CSS | : | green | CSS | : | black | |
| CSS (Wert) | : | #008000 | CSS (Wert) | : | #000000 | |
| CSS (kürzest) | : | #008000 | CSS (kürzest) | : | #000 | |
| CSS (RGB) | : | rgb(0,128,0) | CSS (RGB) | : | rgb(0,0,0) | |
| CSS (%RGB) | : | rgb(0%,50%,0%) | CSS (%RGB) | : | rgb(0%,0%,0%) | |
Verlauf Hintergrundfarbe green nach Schriftfarbe black | |||||||
| #008000 | #006d00 | #005b00 | #004900 | #003600 | #002400 | #001200 | #000000 |
| #008000 | #006d00 | #005b00 | #004900 | #003600 | #002400 | #001200 | #000000 |
Kombination von green und black | |||||||
| 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. | black eignet sich nicht als Schriftfarbe auf Hintergrund green. Die Helligkeit und Farben sind zu ähnlich. Die Ähnlichkeit der Farben black und green beträgt 80.53%. Die Lesbarkeit dieser Kombination bewerte ich mit 19.47%. | ||||||
Hintergrundfarbe green | Schriftfarbe black | ||||||
| Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
| #008000 | #008000 | #008000 | #008000 | #000000 | #000000 | #000000 | #000000 |
| #249224 | #249224 | #006d00 | #006d00 | #242424 | #242424 | #000000 | #000000 |
| #48a448 | #48a448 | #005b00 | #005b00 | #484848 | #484848 | #000000 | #000000 |
| #6db66d | #6db66d | #004900 | #004900 | #6d6d6d | #6d6d6d | #000000 | #000000 |
| #91c891 | #91c891 | #003600 | #003600 | #919191 | #919191 | #000000 | #000000 |
| #b6dab6 | #b6dab6 | #002400 | #002400 | #b6b6b6 | #b6b6b6 | #000000 | #000000 |
| #daecda | #daecda | #001200 | #001200 | #dadada | #dadada | #000000 | #000000 |
| #ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
In diesem Beispiel umranden wir <hr> mit einem . Den Hintergrund von <hr> setzen wir auf Farbe green. Dies geht mit HTML kaum. Daher nutzen wir CSS zur Formatierung.
<style type="text/css"><!-- hr { border-style: outset; background-color: green; border-color: black; border-width: 3pt; } //--> </style>
Mehr zu hr finden Sie in Grundlegende Gestaltungselemente in HTML. Beschreibung des Tag <hr>.
| Hintergrund | Farbwert | Farbe | und | Schrift | Farbwert | Farbkombination |
|---|---|---|---|---|---|---|
| aqua | #00ffff | + | aqua | #00ffff | aqua / green | |
| black | #000000 | + | black | #000000 | black / green | |
| blue | #0000ff | + | blue | #0000ff | blue / green | |
| fuchsia | #ff00ff | + | fuchsia | #ff00ff | fuchsia / green | |
| gray | #808080 | + | gray | #808080 | gray / green | |
| grey | #808080 | + | grey | #808080 | grey / green | |
| green | #008000 | + | green | #008000 | green / green | |
| lime | #00ff00 | + | lime | #00ff00 | lime / green | |
| maroon | #800000 | + | maroon | #800000 | maroon / green | |
| navy | #000080 | + | navy | #000080 | navy / green | |
| olive | #808000 | + | olive | #808000 | olive / green | |
| purple | #800080 | + | purple | #800080 | purple / green | |
| red | #ff0000 | + | red | #ff0000 | red / green | |
| silver | #c0c0c0 | + | silver | #c0c0c0 | silver / green | |
| teal | #008080 | + | teal | #008080 | teal / green | |
| white | #ffffff | + | white | #ffffff | white / green | |
| yellow | #ffff00 | + | yellow | #ffff00 | yellow / green |