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 #deb887 | Schriftfarbe darkblue | |||||
Detail | : | Hintergrund #deb887 | Detail | : | Schrift darkblue | |
Farbwert | : | #deb887 | Farbe | : | darkblue | |
Farbe | : | burlywood | Farbwert | : | #00008b | |
HTML | : | #deb887 | HTML | : | darkblue | |
HTML (Wert) | : | #deb887 | HTML (Wert) | : | #00008b | |
CSS | : | #deb887 | CSS | : | darkblue | |
CSS (Wert) | : | #deb887 | CSS (Wert) | : | #00008b | |
CSS (kürzest) | : | #deb887 | CSS (kürzest) | : | #00008b | |
CSS (RGB) | : | rgb(222,184,135) | CSS (RGB) | : | rgb(0,0,139) | |
CSS (%RGB) | : | rgb(87%,72%,52%) | CSS (%RGB) | : | rgb(0%,0%,54%) |
Verlauf Hintergrundfarbwert #deb887 nach Schriftfarbe darkblue | |||||||
#deb887 | #be9d87 | #9e8388 | #7e6988 | #5f4e89 | #3f3489 | #1f1a8a | #00008b |
#deb887 | #be9d87 | #9e8388 | #7e6988 | #5f4e89 | #3f3489 | #1f1a8a | #00008b |
Kombination von #deb887 und darkblue | |||||||
Cras id velit ante. 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. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. | Auf Hintergrund #deb887 ist darkblue ungeeignet, weil der Farbunterschied zu gering ist Die Ähnlichkeit der Farben darkblue und #deb887 beträgt 60.76%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 39.24%. |
Hintergrundfarbwert #deb887 | Schriftfarbe darkblue | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#deb887 | #deb887 | #deb887 | #deb887 | #00008b | #00008b | #00008b | #00008b |
#e2c298 | #e2c298 | #be9d73 | #be9d73 | #24249b | #24249b | #000077 | #000077 |
#e7cca9 | #e7cca9 | #9e8360 | #9e8360 | #4848ac | #4848ac | #000063 | #000063 |
#ecd6ba | #ecd6ba | #7e694d | #7e694d | #6d6dbc | #6d6dbc | #00004f | #00004f |
#f0e0cb | #f0e0cb | #5f4e39 | #5f4e39 | #9191cd | #9191cd | #00003b | #00003b |
#f5eadc | #f5eadc | #3f3426 | #3f3426 | #b6b6dd | #b6b6dd | #000027 | #000027 |
#faf4ed | #faf4ed | #1f1a13 | #1f1a13 | #dadaee | #dadaee | #000013 | #000013 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man von einem so genannten Zebra-Effekt. Er unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .gerade und .ungerade für <td> mit unterschiedlichen Hintergrundfarben Farbwert #deb887 und Farbe darkblue.
<style type="text/css"><!-- td.gerade { background-color:#deb887; } td.ungerade { background-color:darkblue; } //--> </style>
Diese werden dann abwechselnd angewendet.
<table> <tr><td class="gerade">Pa:a</td><td class="ungerade">Pb:a</td><td class="gerade">Pc:a</td></tr> <tr><td class="gerade">Pa:b</td><td class="ungerade">Pb:b</td><td class="gerade">Pc:b</td></tr> <tr><td class="gerade">Pa:c</td><td class="ungerade">Pb:c</td><td class="gerade">Pc:c</td></tr> </table>
Mehr zu td können Sie in Tabellen in HTML finden. Die Beschreibung vom Befehl td erfahren Sie in der HTML Referenz unter <td>.
Für dieses Beispiel umranden wir <frame> mit einem einfallenden, 5 Punkte dicken Rahmen in Farbe darkblue . Den Hintergrund von <frame> setzen wir entsprechend auf Farbwert #deb887. Das ist in HTML so kaum möglich. Daher verwenden wir CSS.
<style type="text/css"><!-- frame { border:5pt inset darkblue; background-color:#deb887; } //--> </style>
Weiteres zum Befehl frame lesen Sie in der HTML Referenz unter <frame>.