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 burlywood | Schriftfarbe slategray | |||||
Detail | : | Hintergrund burlywood | Detail | : | Schrift slategray | |
Farbe | : | burlywood | Farbe | : | slategray | |
Farbwert | : | #deb887 | Farbwert | : | #708090 | |
HTML | : | burlywood | HTML | : | slategray | |
HTML (Wert) | : | #deb887 | HTML (Wert) | : | #708090 | |
CSS | : | burlywood | CSS | : | slategray | |
CSS (Wert) | : | #deb887 | CSS (Wert) | : | #708090 | |
CSS (kürzest) | : | #deb887 | CSS (kürzest) | : | #708090 | |
CSS (RGB) | : | rgb(222,184,135) | CSS (RGB) | : | rgb(112,128,144) | |
CSS (%RGB) | : | rgb(87%,72%,52%) | CSS (%RGB) | : | rgb(43%,50%,56%) |
Verlauf Hintergrundfarbe burlywood nach Schriftfarbe slategray | |||||||
#deb887 | #ceb088 | #bea889 | #aea08a | #9f988c | #8f908d | #7f888e | #708090 |
#deb887 | #ceb088 | #bea889 | #aea08a | #9f988c | #8f908d | #7f888e | #708090 |
Kombination von burlywood und slategray | |||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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. | slategray eignet sich nicht als Schriftfarbe auf Hintergrund burlywood. Sowohl Helligkeit als auch die Farben sind zu ähnlich. Die Ähnlichkeit der Farben slategray und burlywood beträgt 89.60%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 10.40%. |
Hintergrundfarbe burlywood | Schriftfarbe slategray | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#deb887 | #deb887 | #deb887 | #deb887 | #708090 | #708090 | #708090 | #708090 |
#e2c298 | #e2c298 | #be9d73 | #be9d73 | #84929f | #84929f | #606d7b | #606d7b |
#e7cca9 | #e7cca9 | #9e8360 | #9e8360 | #98a4af | #98a4af | #505b66 | #505b66 |
#ecd6ba | #ecd6ba | #7e694d | #7e694d | #adb6bf | #adb6bf | #404952 | #404952 |
#f0e0cb | #f0e0cb | #5f4e39 | #5f4e39 | #c1c8cf | #c1c8cf | #30363d | #30363d |
#f5eadc | #f5eadc | #3f3426 | #3f3426 | #d6dadf | #d6dadf | #202429 | #202429 |
#faf4ed | #faf4ed | #1f1a13 | #1f1a13 | #eaecef | #eaecef | #101214 | #101214 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Hier umranden wir <center> mit einem gepunkteten, 2 Punkte dicken Rahmen in Farbe slategray . Die Hintergrundfarbe für <center> färben wir entsprechend mit Farbe burlywood. Dies ist mit HTML kaum möglich. Wir nutzen daher CSS.
<style type="text/css"><!-- center { border-style:dotted; border-width:2pt; background-color:burlywood; border-color:slategray; } //--> </style>
Mehr zum Thema center können Sie in Grundlegende Gestaltungselemente in HTML nachlesen. Weiteres zum hier gezeigten HTML-Befehl center ist in der HTML Referenz unter <center> genau beschrieben.
Man redet von einem so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Der Effekt unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .even und .odd für <tr> mit unterschiedlichen Hintergrundfarben Farbe burlywood und Farbe slategray.
<style type="text/css"><!-- tr.even { background-color:burlywood; } tr.odd { background-color:slategray; } //--> </style>
Diese werden abwechselnd angewendet.
<table> <tr class="even"><td><tt>a~a</td><td></tt>b~a</td><td><tt>c~a</td></tr> <tr class="odd"><td></tt>a~b</td><td><tt>b~b</td><td></tt>c~b</td></tr> <tr class="even"><td><tt>a~c</td><td></tt>b~c</td><td>@c~c</td></tr> </table>
Weiteres zum Thema erfahren Sie in Tabellen in HTML. Weiteres zum hier gezeigten Befehl <tr>.