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 deeppink | Schriftfarbe skyblue | |||||
| Detail | : | Hintergrund deeppink | Detail | : | Schrift skyblue | |
| Farbe | : | deeppink | Farbe | : | skyblue | |
| Farbwert | : | #ff1493 | Farbwert | : | #87ceeb | |
| HTML | : | deeppink | HTML | : | skyblue | |
| HTML (Wert) | : | #ff1493 | HTML (Wert) | : | #87ceeb | |
| CSS | : | deeppink | CSS | : | skyblue | |
| CSS (Wert) | : | #ff1493 | CSS (Wert) | : | #87ceeb | |
| CSS (kürzest) | : | #ff1493 | CSS (kürzest) | : | #87ceeb | |
| CSS (RGB) | : | rgb(255,20,147) | CSS (RGB) | : | rgb(135,206,235) | |
| CSS (%RGB) | : | rgb(100%,7%,57%) | CSS (%RGB) | : | rgb(52%,80%,92%) | |
Verlauf Hintergrundfarbe deeppink nach Schriftfarbe skyblue | |||||||
| #ff1493 | #ed2e9f | #dc49ac | #cb63b8 | #ba7ec5 | #a998d1 | #98b3de | #87ceeb |
| #ff1493 | #ed2e9f | #dc49ac | #cb63b8 | #ba7ec5 | #a998d1 | #98b3de | #87ceeb |
Kombination von deeppink und skyblue | |||||||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras vestibulum tristique erat, ac interdum justo cursus in. | Auf Hintergrund deeppink ist skyblue ungeeignet, da die Unterschiede in der Helligkeit und Farbe zu gering sind. Die Ähnlichkeit von skyblue und deeppink beträgt 90.05%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 9.95%. | ||||||
Hintergrundfarbe deeppink | Schriftfarbe skyblue | ||||||
| Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
| #ff1493 | #ff1493 | #ff1493 | #ff1493 | #87ceeb | #87ceeb | #87ceeb | #87ceeb |
| #ff35a2 | #ff35a2 | #da117e | #da117e | #98d5ed | #98d5ed | #73b0c9 | #73b0c9 |
| #ff57b1 | #ff57b1 | #b60e69 | #b60e69 | #a9dcf0 | #a9dcf0 | #6093a7 | #6093a7 |
| #ff78c1 | #ff78c1 | #910b54 | #910b54 | #bae3f3 | #bae3f3 | #4d7586 | #4d7586 |
| #ff9ad0 | #ff9ad0 | #6d083f | #6d083f | #cbeaf6 | #cbeaf6 | #395864 | #395864 |
| #ffbbe0 | #ffbbe0 | #48052a | #48052a | #dcf1f9 | #dcf1f9 | #263a43 | #263a43 |
| #ffddef | #ffddef | #240215 | #240215 | #edf8fc | #edf8fc | #131d21 | #131d21 |
| #ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Für dieses Beispiel umranden wir <tfoot> mit einem gezahnten, 2 Pixel dicken Rahmen in Farbe skyblue . Den Hintergrund von <tfoot> setzen wir auf Farbe deeppink. Mit HTML ist dies nicht machbar. Deshalb formatieren wir hier mit CSS.
<style type="text/css"><!-- tfoot { border:2px ridge skyblue; background-color:deeppink; } //--> </style>
Mehr zu tfoot können Sie in Tabellen in HTML erfahren. Möglichkeiten des hier verwendeten HTML-Befehl tfoot sind in der HTML Referenz unter <tfoot> zusammengestellt.
Die Rahmenfarbe soll sich von Farbe deeppink auf Farbe skyblue ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <pre> in Farbe deeppink vor.
In diesem Beispiel umranden wir <pre> mit einem 3 Pixel dicken, gestrichelten Rahmen in Farbe deeppink.
<style type="text/css"><!-- pre { border:3px dashed deeppink; } //--> </style>Jetzt fordern wir, dass bei Berührung mit der Maus die Rahmenfarbe auf skyblue gesetzt wird.
<style type="text/css"><!-- pre:hover { border-color:skyblue; } //--> </style>
Weiteres zum Thema erfahren Sie in Blockorientierte Elemente in HTML. Die Beschreibung vom hier gezeigten Tag pre erfahren Sie in der HTML Referenz unter <pre>.