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 #ffdab9 | Schriftfarbe slategray | |||||
Detail | : | Hintergrund #ffdab9 | Detail | : | Schrift slategray | |
Farbwert | : | #ffdab9 | Farbe | : | slategray | |
Farbe | : | peachpuff | Farbwert | : | #708090 | |
HTML | : | #ffdab9 | HTML | : | slategray | |
HTML (Wert) | : | #ffdab9 | HTML (Wert) | : | #708090 | |
CSS | : | #ffdab9 | CSS | : | slategray | |
CSS (Wert) | : | #ffdab9 | CSS (Wert) | : | #708090 | |
CSS (kürzest) | : | #ffdab9 | CSS (kürzest) | : | #708090 | |
CSS (RGB) | : | rgb(255,218,185) | CSS (RGB) | : | rgb(112,128,144) | |
CSS (%RGB) | : | rgb(100%,85%,72%) | CSS (%RGB) | : | rgb(43%,50%,56%) |
Verlauf Hintergrundfarbwert #ffdab9 nach Schriftfarbe slategray | |||||||
#ffdab9 | #eacdb3 | #d6c0ad | #c1b3a7 | #ada6a1 | #98999b | #848c95 | #708090 |
#ffdab9 | #eacdb3 | #d6c0ad | #c1b3a7 | #ada6a1 | #98999b | #848c95 | #708090 |
Kombination von #ffdab9 und slategray | |||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras vestibulum tristique erat, ac interdum justo cursus in. | Die Ähnlichkeit der Farben slategray und #ffdab9 beträgt 85.31%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 14.69%. slategray ist nicht als Schriftfarbe auf Hintergrund #ffdab9 geeignet, weil die Unterschiede in der Helligkeit und Farbe unzureichend sind. |
Hintergrundfarbwert #ffdab9 | Schriftfarbe slategray | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#ffdab9 | #ffdab9 | #ffdab9 | #ffdab9 | #708090 | #708090 | #708090 | #708090 |
#ffdfc3 | #ffdfc3 | #daba9e | #daba9e | #84929f | #84929f | #606d7b | #606d7b |
#ffe4cd | #ffe4cd | #b69b84 | #b69b84 | #98a4af | #98a4af | #505b66 | #505b66 |
#ffe9d7 | #ffe9d7 | #917c69 | #917c69 | #adb6bf | #adb6bf | #404952 | #404952 |
#ffefe1 | #ffefe1 | #6d5d4f | #6d5d4f | #c1c8cf | #c1c8cf | #30363d | #30363d |
#fff4eb | #fff4eb | #483e34 | #483e34 | #d6dadf | #d6dadf | #202429 | #202429 |
#fff9f5 | #fff9f5 | #241f1a | #241f1a | #eaecef | #eaecef | #101214 | #101214 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Die Hintergrundfarbe soll sich von Farbwert #ffdab9 auf Farbe slategray ändern, wenn man mit der Maus auf <tbody> zeigt. Wir bereiten zunächst eine Darstellung von <tbody> in Farbwert #ffdab9 vor.
Zum Beispiel setzen wir die Hintergrundfarbe von <tbody> auf Farbwert #ffdab9. Die Textfarbe lassen wir unverändert, ändern jedoch die Schriftart auf courier new:
<style type="text/css"><!-- tbody { font-family: courier new; background-color: #ffdab9; } //--> </style>Nun stellen wir ein, dass sich bei Hover die Hintergrundfarbe auf slategray ändert.
<style type="text/css"><!-- tbody: hover { background-color: slategray; } //--> </style>
Weiteres zum Thema tbody können Sie in Tabellen in HTML nachsehen. Der HTML-Tag tbody ist in der HTML Referenz bei <tbody> ausführlich gezeigt.
Für dieses Beispiel umranden wir <tr> mit einem . Die Hintergrundfarbe für <tr> färben wir entsprechend mit Farbwert #ffdab9. Dies ist in HTML so kaum möglich. Deshalb nutzen wir CSS zur Formatierung.
<style type="text/css"><!-- tr { border:2px groove slategray; background-color:#ffdab9; } //--> </style>
Mehr zu tr können Sie in Tabellen in HTML nachsehen. Weiteres zum hier gezeigten Befehl <tr>.