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.
Hintergrundfarbwert #00fa9a | Schriftfarbwert #fff5ee | |||||
Detail | : | Hintergrund #00fa9a | Detail | : | Schrift #fff5ee | |
Farbwert | : | #00fa9a | Farbwert | : | #fff5ee | |
Farbe | : | mediumspringgreen | Farbe | : | seashell | |
HTML | : | #00fa9a | HTML | : | #fff5ee | |
HTML (Wert) | : | #00fa9a | HTML (Wert) | : | #fff5ee | |
CSS | : | #00fa9a | CSS | : | #fff5ee | |
CSS (Wert) | : | #00fa9a | CSS (Wert) | : | #fff5ee | |
CSS (kürzest) | : | #00fa9a | CSS (kürzest) | : | #fff5ee | |
CSS (RGB) | : | rgb(0,250,154) | CSS (RGB) | : | rgb(255,245,238) | |
CSS (%RGB) | : | rgb(0%,98%,60%) | CSS (%RGB) | : | rgb(100%,96%,93%) |
Verlauf Hintergrundfarbwert #00fa9a nach Schriftfarbwert #fff5ee | |||||||
#00fa9a | #24f9a6 | #48f8b2 | #6df7be | #91f7ca | #b6f6d6 | #daf5e2 | #fff5ee |
#00fa9a | #24f9a6 | #48f8b2 | #6df7be | #91f7ca | #b6f6d6 | #daf5e2 | #fff5ee |
Kombination von #00fa9a und #fff5ee | |||||||
Cras id velit ante. 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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. | #fff5ee eignet sich nicht als Schriftfarbe auf Hintergrund #00fa9a, da sowohl Helligkeit als auch die Farben zu ähnlich sind. Die Ähnlichkeit der Farben #fff5ee und #00fa9a beträgt 93.85%. Die Lesbarkeit dieser Kombination bewerte ich mit 6.15%. |
Hintergrundfarbwert #00fa9a | Schriftfarbwert #fff5ee | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#00fa9a | #00fa9a | #00fa9a | #00fa9a | #fff5ee | #fff5ee | #fff5ee | #fff5ee |
#24faa8 | #24faa8 | #00d684 | #00d684 | #fff6f0 | #fff6f0 | #dad2cc | #dad2cc |
#48fbb6 | #48fbb6 | #00b26e | #00b26e | #fff7f2 | #fff7f2 | #b6afaa | #b6afaa |
#6dfcc5 | #6dfcc5 | #008e58 | #008e58 | #fff9f5 | #fff9f5 | #918c88 | #918c88 |
#91fcd3 | #91fcd3 | #006b42 | #006b42 | #fffaf7 | #fffaf7 | #6d6966 | #6d6966 |
#b6fde2 | #b6fde2 | #00472c | #00472c | #fffcfa | #fffcfa | #484644 | #484644 |
#dafef0 | #dafef0 | #002316 | #002316 | #fffdfc | #fffdfc | #242322 | #242322 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Man redet von einem so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Er unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ying und .yang für <td> mit unterschiedlichen Hintergrundfarben Farbwert #00fa9a und Farbwert #fff5ee.
<style type="text/css"><!-- td.ying { background-color: #00fa9a; } td.yang { background-color:#fff5ee; } //--> </style>
Diese werden abwechselnd genutzt.
<table> <tr><td class="ying">Ha-a</td><td class="yang">Hb-a</td><td class="ying">Hc-a</td></tr> <tr><td class="ying">Ha-b</td><td class="yang">Hb-b</td><td class="ying">Hc-b</td></tr> <tr><td class="ying">Ha-c</td><td class="yang">Hb-c</td><td class="ying">Hc-c</td></tr> </table>
Mehr zum Thema td erfahren Sie in Tabellen in HTML. Weiteres zum Befehl <td>.
Die Textfarbe soll sich von Farbwert #00fa9a auf Farbwert #fff5ee ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <colgroup> in Farbwert #00fa9a vor.
Für dieses Beispiel setzen wir bei <colgroup> die Textfarbe auf Farbwert #00fa9a.
<style type="text/css"><!-- colgroup { color: #00fa9a; } //--> </style>Nun fordern wir, dass bei Hover die Textfarbe auf #fff5ee geändert wird.
<style type="text/css"><!-- colgroup:hover { color:#fff5ee; } //--> </style>
Weiteres zum Thema colgroup können Sie in Tabellen in HTML erfahren. Weiteres zum HTML-Befehl colgroup ist in der HTML Referenz bei <colgroup> genau beschrieben.