von Thomas Salvador.
Farben werden in HTML entweder mit ihrem Namen oder mit ihrem Wert beschrieben.
Netscape führte seinerzeit die websicheren Farben ein. Neben diesen Farbwerten, die einem bestimmten Schema folgen, definierte man noch 120 Werte und ordnete ihnen Namen zu.
Hintergrundfarbe azure | Schriftfarbe darkgray | |||||
| Detail | : | Hintergrund azure | Detail | : | Schrift darkgray | |
| Farbe | : | azure | Farbe | : | darkgray | |
| Farbwert | : | #f0ffff | Farbwert | : | #a9a9a9 | |
| HTML | : | azure | HTML | : | darkgray | |
| HTML (Wert) | : | #f0ffff | HTML (Wert) | : | #a9a9a9 | |
| CSS | : | azure | CSS | : | darkgray | |
| CSS (Wert) | : | #f0ffff | CSS (Wert) | : | #a9a9a9 | |
| CSS (kürzest) | : | #f0ffff | CSS (kürzest) | : | #a9a9a9 | |
| CSS (RGB) | : | rgb(240,255,255) | CSS (RGB) | : | rgb(169,169,169) | |
| CSS (%RGB) | : | rgb(94%,100%,100%) | CSS (%RGB) | : | rgb(66%,66%,66%) | |
Verlauf Hintergrundfarbe azure nach Schriftfarbe darkgray | |||||||
| #f0ffff | #e5f2f2 | #dbe6e6 | #d1dada | #c7cdcd | #bdc1c1 | #b3b5b5 | #a9a9a9 |
| #f0ffff | #e5f2f2 | #dbe6e6 | #d1dada | #c7cdcd | #bdc1c1 | #b3b5b5 | #a9a9a9 |
Kombination von azure und darkgray | |||||||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. | Die Ähnlichkeit von darkgray und azure ergibt sich zu 89.10%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 10.90%. Auf Hintergrund azure ist darkgray ungeeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind geeignet. | ||||||
Hintergrundfarbe azure | Schriftfarbe darkgray | ||||||
| Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
| #f0ffff | #f0ffff | #f0ffff | #f0ffff | #a9a9a9 | #a9a9a9 | #a9a9a9 | #a9a9a9 |
| #f2ffff | #f2ffff | #cddada | #cddada | #b5b5b5 | #b5b5b5 | #909090 | #909090 |
| #f4ffff | #f4ffff | #abb6b6 | #abb6b6 | #c1c1c1 | #c1c1c1 | #787878 | #787878 |
| #f6ffff | #f6ffff | #899191 | #899191 | #cdcdcd | #cdcdcd | #606060 | #606060 |
| #f8ffff | #f8ffff | #666d6d | #666d6d | #dadada | #dadada | #484848 | #484848 |
| #faffff | #faffff | #444848 | #444848 | #e6e6e6 | #e6e6e6 | #303030 | #303030 |
| #fcffff | #fcffff | #222424 | #222424 | #f2f2f2 | #f2f2f2 | #181818 | #181818 |
| #ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Die Textfarbe soll sich von Farbe azure auf Farbe darkgray ändern, wenn man mit der Maus auf <dt> zeigt. Wir bereiten zunächst eine Formatierung von <dt> in Farbe azure vor.
Wir legen für dieses Beispiel die Textfarbe von <dt> auf Farbe azure fest:
<style type="text/css"><!-- dt { color: azure; } //--> </style>Nun stellen wir ein, dass bei Hover die Textfarbe auf darkgray geändert wird.
<style type="text/css"><!-- dt:hover { color:darkgray; } //--> </style>
Weiteres zum Thema finden Sie in Listen und Glossare in HTML. Weiteres zum HTML-Tag dt ist in der HTML Referenz unter <dt> ausführlich gezeigt.
Eine Überschrift setzen Sie mit Tag <h2>. Diese kann farblich gestaltet werden.
Die Rahmenfarbe soll sich von Farbe azure auf Farbe darkgray ändern, wenn man mit der Maus auf <h2> zeigt. Bereiten wir zunächst die Darstellung von <h2> in Farbe azure vor.
In diesem Beispiel umranden wir <h2> mit einem 3 Pixel dicken, doppelten Rahmen in Farbe azure.
<style type="text/css"><!-- h2 { border:3px double azure; } //--> </style>Nun stellen wir ein, dass sich bei Mausberührung die Rahmenfarbe auf darkgray ändert.
<style type="text/css"><!-- h2: hover { border-color: darkgray; } //--> </style>
Weiteres zu h2 lesen Sie in Grundlegende Gestaltungselemente in HTML. Der hier gezeigte HTML-Befehl h2 ist in der HTML Referenz unter <h2> zusammengestellt.