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 #ff4500 | Schriftfarbwert #d2691e | |||||
Detail | : | Hintergrund #ff4500 | Detail | : | Schrift #d2691e | |
Farbwert | : | #ff4500 | Farbwert | : | #d2691e | |
Farbe | : | orangered | Farbe | : | chocolate | |
HTML | : | #ff4500 | HTML | : | #d2691e | |
HTML (Wert) | : | #ff4500 | HTML (Wert) | : | #d2691e | |
CSS | : | #ff4500 | CSS | : | #d2691e | |
CSS (Wert) | : | #ff4500 | CSS (Wert) | : | #d2691e | |
CSS (kürzest) | : | #ff4500 | CSS (kürzest) | : | #d2691e | |
CSS (RGB) | : | rgb(255,69,0) | CSS (RGB) | : | rgb(210,105,30) | |
CSS (%RGB) | : | rgb(100%,27%,0%) | CSS (%RGB) | : | rgb(82%,41%,11%) |
Verlauf Hintergrundfarbwert #ff4500 nach Schriftfarbwert #d2691e | |||||||
#ff4500 | #f84a04 | #f24f08 | #eb540c | #e55911 | #de5e15 | #d86319 | #d2691e |
#ff4500 | #f84a04 | #f24f08 | #eb540c | #e55911 | #de5e15 | #d86319 | #d2691e |
Kombination von #ff4500 und #d2691e | |||||||
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. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Die Ähnlichkeit der Farben #d2691e und #ff4500 beträgt 94.97%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 5.03%. #d2691e eignet sich nicht als Schriftfarbe auf Hintergrund #ff4500, da sich sowohl Helligkeit als auch die Farben zu ähnlich sind. |
Hintergrundfarbwert #ff4500 | Schriftfarbwert #d2691e | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#ff4500 | #ff4500 | #ff4500 | #ff4500 | #d2691e | #d2691e | #d2691e | #d2691e |
#ff5f24 | #ff5f24 | #da3b00 | #da3b00 | #d87e3e | #d87e3e | #b45a19 | #b45a19 |
#ff7a48 | #ff7a48 | #b63100 | #b63100 | #de935e | #de935e | #964b15 | #964b15 |
#ff946d | #ff946d | #912700 | #912700 | #e5a97e | #e5a97e | #783c11 | #783c11 |
#ffaf91 | #ffaf91 | #6d1d00 | #6d1d00 | #ebbe9e | #ebbe9e | #5a2d0c | #5a2d0c |
#ffc9b6 | #ffc9b6 | #481300 | #481300 | #f2d4be | #f2d4be | #3c1e08 | #3c1e08 |
#ffe4da | #ffe4da | #240900 | #240900 | #f8e9de | #f8e9de | #1e0f04 | #1e0f04 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Die Textfarbe soll sich von Farbwert #ff4500 auf Farbwert #d2691e ändern, wenn man mit der Maus auf <cite> zeigt. Bereiten wir zunächst eine Formatierung von <cite> in Farbwert #ff4500 vor.
Hier legen wir bei <cite> die Textfarbe auf Farbwert #ff4500 fest. Zwar behalten wir die Hintergrundfarbe bei, ändern jedoch die Schriftart auf verdana. Die Schriftgröße verringern wir auf 98%.
<style type="text/css"><!-- cite { color: #ff4500; font-size: 98%; font-family: verdana; } //--> </style>Jetzt stellen wir ein, dass sich bei Berührung mit der Maus die Textfarbe auf #d2691e ändert.
<style type="text/css"><!-- cite:hover { color:#d2691e; } //--> </style>
Mehr zum Tag cite finden Sie in der HTML Referenz unter <cite>.
Für dieses Beispiel umranden wir <tfoot> mit einem gezahnten, 1 Pixel dicken Rahmen in Farbwert #d2691e . Den Hintergrund von <tfoot> färben wir entsprechend mit Farbwert #ff4500. Mit HTML ist das nicht machbar. Deshalb verwenden wir dafür CSS.
<style type="text/css"><!-- tfoot { border:1px ridge #d2691e; background-color:#ff4500; } //--> </style>
Weiteres zu tfoot finden Sie in Tabellen in HTML. Beschreibung vom HTML-Befehl <tfoot>.