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, einem bestimmten Schema folgenden, Farbwerten, definierte man noch 120 Werte und ordnete ihnen Namen zu. Zusammen mit den 17 Standard-HTML-Farben, die ebenfalls Namen haben, ergeben sich so 137 HTML Farbnamen.
Hintergrundfarbe mistyrose | Schriftfarbwert #2e8b57 | |||||
Detail | : | Hintergrund mistyrose | Detail | : | Schrift #2e8b57 | |
Farbe | : | mistyrose | Farbwert | : | #2e8b57 | |
Farbwert | : | #ffe4e1 | Farbe | : | seagreen | |
HTML | : | mistyrose | HTML | : | #2e8b57 | |
HTML (Wert) | : | #ffe4e1 | HTML (Wert) | : | #2e8b57 | |
CSS | : | mistyrose | CSS | : | #2e8b57 | |
CSS (Wert) | : | #ffe4e1 | CSS (Wert) | : | #2e8b57 | |
CSS (kürzest) | : | #ffe4e1 | CSS (kürzest) | : | #2e8b57 | |
CSS (RGB) | : | rgb(255,228,225) | CSS (RGB) | : | rgb(46,139,87) | |
CSS (%RGB) | : | rgb(100%,89%,88%) | CSS (%RGB) | : | rgb(18%,54%,34%) |
Verlauf Hintergrundfarbe mistyrose nach Schriftfarbwert #2e8b57 | |||||||
#ffe4e1 | #e1d7cd | #c3cab9 | #a5bda5 | #87b192 | #69a47e | #4b976a | #2e8b57 |
#ffe4e1 | #e1d7cd | #c3cab9 | #a5bda5 | #87b192 | #69a47e | #4b976a | #2e8b57 |
Kombination von mistyrose und #2e8b57 | |||||||
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. Cras id velit ante. | Die Ähnlichkeit von #2e8b57 und mistyrose beträgt 83.22%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 16.78%. Auf Hintergrund mistyrose ist #2e8b57 ungeeignet, weil der Farbunterschied zu gering ist |
Hintergrundfarbe mistyrose | Schriftfarbwert #2e8b57 | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#ffe4e1 | #ffe4e1 | #ffe4e1 | #ffe4e1 | #2e8b57 | #2e8b57 | #2e8b57 | #2e8b57 |
#ffe7e5 | #ffe7e5 | #dac3c0 | #dac3c0 | #4b9b6f | #4b9b6f | #27774a | #27774a |
#ffebe9 | #ffebe9 | #b6a2a0 | #b6a2a0 | #69ac87 | #69ac87 | #20633e | #20633e |
#ffefed | #ffefed | #918280 | #918280 | #87bc9f | #87bc9f | #1a4f31 | #1a4f31 |
#fff3f2 | #fff3f2 | #6d6160 | #6d6160 | #a5cdb7 | #a5cdb7 | #133b25 | #133b25 |
#fff7f6 | #fff7f6 | #484140 | #484140 | #c3ddcf | #c3ddcf | #0d2718 | #0d2718 |
#fffbfa | #fffbfa | #242020 | #242020 | #e1eee7 | #e1eee7 | #06130c | #06130c |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Eine Überschrift wird mit Befehl <h4> gesetzt. Diese können Sie hervorheben und farblich gestalten.
Die Hintergrundfarbe soll sich von Farbe mistyrose auf Farbwert #2e8b57 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <h4> in Farbe mistyrose vor.
Als Beispiel setzen wir bei <h4> die Hintergrundfarbe auf Farbe mistyrose. Die Textfarbe lassen wir unverändert, setzen jedoch die Schriftart auf verdana und setzen die Schriftgröße auf 122%:
<style type="text/css"><!-- h4 { background-color:mistyrose; font-family:verdana; font-size:122%; } //--> </style>Jetzt fordern wir, dass bei Hover die Hintergrundfarbe auf #2e8b57 geändert wird.
<style type="text/css"><!-- h4:hover { background-color:#2e8b57; } //--> </style>
Mehr zum Thema h4 erfahren Sie in Grundlegende Gestaltungselemente in HTML. Einzelheiten des hier genutzten HTML-Tag h4 erfahren Sie in der HTML Referenz unter <h4>.
Man spricht vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Der Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <tr> mit unterschiedlichen Hintergrundfarben Farbe mistyrose und Farbwert #2e8b57.
<style type="text/css"><!-- tr.ungerade { background-color:mistyrose; } tr.gerade { background-color:#2e8b57; } //--> </style>
Diese CSS-Klassen werden abwechselnd genutzt.
<table> <tr class="ungerade"><td>Na~a</td><td>Nb~a</td><td>Nc~a</td></tr> <tr class="gerade"><td>Na~b</td><td>Nb~b</td><td>Nc~b</td></tr> <tr class="ungerade"><td>Na~c</td><td>Nb~c</td><td>Nc~c</td></tr> </table>
Weiteres zum Thema finden Sie in Tabellen in HTML. Weiteres zum hier genutzten HTML-Befehl tr ist in der HTML Referenz bei <tr> ausführlich zusammengestellt.