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 #808080 | Schriftfarbwert #ffffff | |||||
| Detail | : | Hintergrund #808080 | Detail | : | Schrift #ffffff | |
| Farbwert | : | #808080 | Farbwert | : | #ffffff | |
| Farbe | : | gray | Farbe | : | white | |
| HTML | : | #808080 | HTML | : | #ffffff | |
| HTML (Wert) | : | #808080 | HTML (Wert) | : | #ffffff | |
| CSS | : | #808080 | CSS | : | #ffffff | |
| CSS (Wert) | : | #808080 | CSS (Wert) | : | #ffffff | |
| CSS (kürzest) | : | #808080 | CSS (kürzest) | : | #fff | |
| CSS (RGB) | : | rgb(128,128,128) | CSS (RGB) | : | rgb(255,255,255) | |
| CSS (%RGB) | : | rgb(50%,50%,50%) | CSS (%RGB) | : | rgb(100%,100%,100%) | |
Verlauf Hintergrundfarbwert #808080 nach Schriftfarbwert #ffffff | |||||||
| #808080 | #929292 | #a4a4a4 | #b6b6b6 | #c8c8c8 | #dadada | #ececec | #ffffff |
| #808080 | #929292 | #a4a4a4 | #b6b6b6 | #c8c8c8 | #dadada | #ececec | #ffffff |
Kombination von #808080 und #ffffff | |||||||
| Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. | Die Ähnlichkeit von #ffffff und #808080 ergibt sich zu 81.19%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 18.81%. Auf Hintergrund #808080 ist #ffffff ungeeignet. Zwar ist der Helligkeitsunterschied ausreichend, doch die Farben selbst sind zu ähnlich. | ||||||
Hintergrundfarbwert #808080 | Schriftfarbwert #ffffff | ||||||
| Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
| #808080 | #808080 | #808080 | #808080 | #ffffff | #ffffff | #ffffff | #ffffff |
| #929292 | #929292 | #6d6d6d | #6d6d6d | #ffffff | #ffffff | #dadada | #dadada |
| #a4a4a4 | #a4a4a4 | #5b5b5b | #5b5b5b | #ffffff | #ffffff | #b6b6b6 | #b6b6b6 |
| #b6b6b6 | #b6b6b6 | #494949 | #494949 | #ffffff | #ffffff | #919191 | #919191 |
| #c8c8c8 | #c8c8c8 | #363636 | #363636 | #ffffff | #ffffff | #6d6d6d | #6d6d6d |
| #dadada | #dadada | #242424 | #242424 | #ffffff | #ffffff | #484848 | #484848 |
| #ececec | #ececec | #121212 | #121212 | #ffffff | #ffffff | #242424 | #242424 |
| #ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Für dieses Beispiel umranden wir <abbr> mit einem 2 Punkte dicken, gestrichelten Rahmen in Farbwert #ffffff . Die Hintergrundfarbe für <abbr> setzen wir entsprechend auf Farbwert #808080. Das ist mit HTML nicht möglich. Daher formatieren wir hier mit CSS.
<style type="text/css"><!-- abbr { border-style: dashed; border-width: 2pt; background-color: #808080; border-color: #fff; } //--> </style>
Weiteres zum hier verwendeten HTML-Befehl <abbr>.
| Hintergrund | Farbwert | Farbe | und | Schrift | Farbwert | Farbkombination |
|---|---|---|---|---|---|---|
| aqua | #00ffff | + | aqua | #00ffff | aqua / #808080 | |
| black | #000000 | + | black | #000000 | black / #808080 | |
| blue | #0000ff | + | blue | #0000ff | blue / #808080 | |
| fuchsia | #ff00ff | + | fuchsia | #ff00ff | fuchsia / #808080 | |
| gray | #808080 | + | gray | #808080 | gray / #808080 | |
| grey | #808080 | + | grey | #808080 | grey / #808080 | |
| green | #008000 | + | green | #008000 | green / #808080 | |
| lime | #00ff00 | + | lime | #00ff00 | lime / #808080 | |
| maroon | #800000 | + | maroon | #800000 | maroon / #808080 | |
| navy | #000080 | + | navy | #000080 | navy / #808080 | |
| olive | #808000 | + | olive | #808000 | olive / #808080 | |
| purple | #800080 | + | purple | #800080 | purple / #808080 | |
| red | #ff0000 | + | red | #ff0000 | red / #808080 | |
| silver | #c0c0c0 | + | silver | #c0c0c0 | silver / #808080 | |
| teal | #008080 | + | teal | #008080 | teal / #808080 | |
| white | #ffffff | + | white | #ffffff | white / #808080 | |
| yellow | #ffff00 | + | yellow | #ffff00 | yellow / #808080 |