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 #dc143c | Schriftfarbe papayawhip | |||||
Detail | : | Hintergrund #dc143c | Detail | : | Schrift papayawhip | |
Farbwert | : | #dc143c | Farbe | : | papayawhip | |
Farbe | : | crimson | Farbwert | : | #ffefd5 | |
HTML | : | #dc143c | HTML | : | papayawhip | |
HTML (Wert) | : | #dc143c | HTML (Wert) | : | #ffefd5 | |
CSS | : | #dc143c | CSS | : | papayawhip | |
CSS (Wert) | : | #dc143c | CSS (Wert) | : | #ffefd5 | |
CSS (kürzest) | : | #dc143c | CSS (kürzest) | : | #ffefd5 | |
CSS (RGB) | : | rgb(220,20,60) | CSS (RGB) | : | rgb(255,239,213) | |
CSS (%RGB) | : | rgb(86%,7%,23%) | CSS (%RGB) | : | rgb(100%,93%,83%) |
Verlauf Hintergrundfarbwert #dc143c nach Schriftfarbe papayawhip | |||||||
#dc143c | #e13351 | #e65267 | #eb717d | #f09193 | #f5b0a9 | #facfbf | #ffefd5 |
#dc143c | #e13351 | #e65267 | #eb717d | #f09193 | #f5b0a9 | #facfbf | #ffefd5 |
Kombination von #dc143c und papayawhip | |||||||
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. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. | papayawhip ist nicht als Schriftfarbe auf Hintergrund #dc143c geeignet, da sich die Farben zu ähnlich sind. Die Ähnlichkeit der Farben papayawhip und #dc143c beträgt 79.00%. Die Lesbarkeit dieser Farbkombination liegt damit bei 21.00%. |
Hintergrundfarbwert #dc143c | Schriftfarbe papayawhip | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#dc143c | #dc143c | #dc143c | #dc143c | #ffefd5 | #ffefd5 | #ffefd5 | #ffefd5 |
#e13557 | #e13557 | #bc1133 | #bc1133 | #fff1db | #fff1db | #daccb6 | #daccb6 |
#e65773 | #e65773 | #9d0e2a | #9d0e2a | #fff3e1 | #fff3e1 | #b6aa98 | #b6aa98 |
#eb788f | #eb788f | #7d0b22 | #7d0b22 | #fff5e7 | #fff5e7 | #918879 | #918879 |
#f09aab | #f09aab | #5e0819 | #5e0819 | #fff8ed | #fff8ed | #6d665b | #6d665b |
#f5bbc7 | #f5bbc7 | #3e0511 | #3e0511 | #fffaf3 | #fffaf3 | #48443c | #48443c |
#fadde3 | #fadde3 | #1f0208 | #1f0208 | #fffcf9 | #fffcf9 | #24221e | #24221e |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Ein Link wird mit Befehl <a> erzeugt. Diesen kann man hervorheben und farblich gestalten.
Die Hintergrundfarbe soll sich von Farbwert #dc143c auf Farbe papayawhip ändern, wenn man mit der Maus auf <a> zeigt. Bereiten wir zunächst die Darstellung von <a> in Farbwert #dc143c vor.
Hier legen wir Farbwert #dc143c als Hintergrundfarbe von <a> fest.
<style type="text/css"><!-- a { background-color:#dc143c; } //--> </style>Jetzt fordern wir, dass sich bei Mausberührung die Hintergrundfarbe auf papayawhip ändert.
<style type="text/css"><!-- a:hover { background-color:papayawhip; } //--> </style>
Weiteres zum Thema a finden Sie in Verweise und Protokolle in HTML. Mehr zum HTML-Befehl <a>.
Man redet vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Der Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ying und .yang für <td> mit den Hintergrundfarben Farbwert #dc143c und Farbe papayawhip.
<style type="text/css"><!-- td.ying { background-color:#dc143c; } td.yang { background-color:papayawhip; } //--> </style>
Diese Klassen werden abwechselnd verwendet.
<table> <tr><td class="ying">WA-A</td><td class="yang">WB-A</td><td class="ying">WC-A</td></tr> <tr><td class="ying">WA-B</td><td class="yang">WB-B</td><td class="ying">WC-B</td></tr> <tr><td class="ying">WA-C</td><td class="yang">WB-C</td><td class="ying">WC-C</td></tr> </table>
Mehr zum Thema können Sie in Tabellen in HTML nachlesen. Zur Beschreibung des hier verwendeten Tag <td>.