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 azure | Schriftfarbwert #e9967a | |||||
Detail | : | Hintergrund azure | Detail | : | Schrift #e9967a | |
Farbe | : | azure | Farbwert | : | #e9967a | |
Farbwert | : | #f0ffff | Farbe | : | darksalmon | |
HTML | : | azure | HTML | : | #e9967a | |
HTML (Wert) | : | #f0ffff | HTML (Wert) | : | #e9967a | |
CSS | : | azure | CSS | : | #e9967a | |
CSS (Wert) | : | #f0ffff | CSS (Wert) | : | #e9967a | |
CSS (kürzest) | : | #f0ffff | CSS (kürzest) | : | #e9967a | |
CSS (RGB) | : | rgb(240,255,255) | CSS (RGB) | : | rgb(233,150,122) | |
CSS (%RGB) | : | rgb(94%,100%,100%) | CSS (%RGB) | : | rgb(91%,58%,47%) |
Verlauf Hintergrundfarbe azure nach Schriftfarbwert #e9967a | |||||||
#f0ffff | #eff0ec | #eee1d9 | #edd2c6 | #ecc3b3 | #ebb4a0 | #eaa58d | #e9967a |
#f0ffff | #eff0ec | #eee1d9 | #edd2c6 | #ecc3b3 | #ebb4a0 | #eaa58d | #e9967a |
Kombination von azure und #e9967a | |||||||
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. | #e9967a ist nicht als Schriftfarbe auf Hintergrund azure geeignet. Die Unterschiede in der Helligkeit und Farbe sind nicht ausreichend. Die Ähnlichkeit von #e9967a und azure beträgt 89.31%. Die Lesbarkeit dieser Farbkombination liegt damit bei 10.69%. |
Hintergrundfarbe azure | Schriftfarbwert #e9967a | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#f0ffff | #f0ffff | #f0ffff | #f0ffff | #e9967a | #e9967a | #e9967a | #e9967a |
#f2ffff | #f2ffff | #cddada | #cddada | #eca58d | #eca58d | #c78068 | #c78068 |
#f4ffff | #f4ffff | #abb6b6 | #abb6b6 | #efb4a0 | #efb4a0 | #a66b57 | #a66b57 |
#f6ffff | #f6ffff | #899191 | #899191 | #f2c3b3 | #f2c3b3 | #855545 | #855545 |
#f8ffff | #f8ffff | #666d6d | #666d6d | #f5d2c6 | #f5d2c6 | #634034 | #634034 |
#faffff | #faffff | #444848 | #444848 | #f8e1d9 | #f8e1d9 | #422a22 | #422a22 |
#fcffff | #fcffff | #222424 | #222424 | #fbf0ec | #fbf0ec | #211511 | #211511 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Für dieses Beispiel ändern wir die Textfarbe von <p> auf Farbwert #e9967a und die Hintergrundfarbe von <p> auf Farbe azure. Die Schriftart setzen wir auf verdana. Als Schriftgröße setzen wir 91%.
<style type="text/css"><!-- p { font-size:91%; background-color:azure; font-family:verdana; color:#e9967a; } //--> </style>
Weiteres zu p erfahren Sie in Grundlegende Gestaltungselemente in HTML. Beschreibung vom HTML-Tag <p>.
Die Hintergrundfarbe soll sich von Farbe azure auf Farbwert #e9967a ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <blockquote> in Farbe azure vor.
Als Beispiel legen wir die Hintergrundfarbe von <blockquote> auf Farbe azure fest. Zwar behalten wir die Textfarbe bei, ändern jedoch die Schriftart auf arial. Die Schriftgröße ändern wir auf 13px:
<style type="text/css"><!-- blockquote { background-color:azure; font-family:arial; font-size:13px; } //--> </style>Jetzt stellen wir ein, dass sich bei Mausberührung die Hintergrundfarbe zu #e9967a ändert.
<style type="text/css"><!-- blockquote:hover { background-color:#e9967a; } //--> </style>
Weiteres zu blockquote können Sie in Blockorientierte Elemente in HTML finden. Zur Beschreibung des Tag <blockquote>.