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 #ff69b4 | Schriftfarbe aquamarine | |||||
| Detail | : | Hintergrund #ff69b4 | Detail | : | Schrift aquamarine | |
| Farbwert | : | #ff69b4 | Farbe | : | aquamarine | |
| Farbe | : | hotpink | Farbwert | : | #7fffd4 | |
| HTML | : | #ff69b4 | HTML | : | aquamarine | |
| HTML (Wert) | : | #ff69b4 | HTML (Wert) | : | #7fffd4 | |
| CSS | : | #ff69b4 | CSS | : | aquamarine | |
| CSS (Wert) | : | #ff69b4 | CSS (Wert) | : | #7fffd4 | |
| CSS (kürzest) | : | #ff69b4 | CSS (kürzest) | : | #7fffd4 | |
| CSS (RGB) | : | rgb(255,105,180) | CSS (RGB) | : | rgb(127,255,212) | |
| CSS (%RGB) | : | rgb(100%,41%,70%) | CSS (%RGB) | : | rgb(49%,100%,83%) | |
Verlauf Hintergrundfarbwert #ff69b4 nach Schriftfarbe aquamarine | |||||||
| #ff69b4 | #ec7eb8 | #da93bd | #c8a9c1 | #b5bec6 | #a3d4ca | #91e9cf | #7fffd4 |
| #ff69b4 | #ec7eb8 | #da93bd | #c8a9c1 | #b5bec6 | #a3d4ca | #91e9cf | #7fffd4 |
Kombination von #ff69b4 und aquamarine | |||||||
| Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. | aquamarine ist nicht als Schriftfarbe auf Hintergrund #ff69b4 geeignet. Die Unterschiede in der Helligkeit und Farbe sind zu gering. Die Ähnlichkeit von aquamarine und #ff69b4 ergibt sich zu 89.70%. Die Lesbarkeit dieser Farbkombination liegt damit bei 10.30%. | ||||||
Hintergrundfarbwert #ff69b4 | Schriftfarbe aquamarine | ||||||
| Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
| #ff69b4 | #ff69b4 | #ff69b4 | #ff69b4 | #7fffd4 | #7fffd4 | #7fffd4 | #7fffd4 |
| #ff7ebe | #ff7ebe | #da5a9a | #da5a9a | #91ffda | #91ffda | #6cdab5 | #6cdab5 |
| #ff93c9 | #ff93c9 | #b64b80 | #b64b80 | #a3ffe0 | #a3ffe0 | #5ab697 | #5ab697 |
| #ffa9d4 | #ffa9d4 | #913c66 | #913c66 | #b5ffe6 | #b5ffe6 | #489179 | #489179 |
| #ffbede | #ffbede | #6d2d4d | #6d2d4d | #c8ffec | #c8ffec | #366d5a | #366d5a |
| #ffd4e9 | #ffd4e9 | #481e33 | #481e33 | #dafff2 | #dafff2 | #24483c | #24483c |
| #ffe9f4 | #ffe9f4 | #240f19 | #240f19 | #ecfff8 | #ecfff8 | #12241e | #12241e |
| #ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Die Hintergrundfarbe soll sich von Farbwert #ff69b4 auf Farbe aquamarine ändern, wenn man mit der Maus auf <legend> zeigt. Bereiten wir zunächst die Formatierung von <legend> in Farbwert #ff69b4 vor.
Z.B. setzen wir bei <legend> die Hintergrundfarbe auf Farbwert #ff69b4. Zwar behalten wir die Textfarbe bei, setzen jedoch die Schriftart auf verdana. Die Größe der Schrift ändern wir auf 9px.
<style type="text/css"><!-- legend { font-size:9px; font-family:verdana; background-color:#ff69b4; } //--> </style>Jetzt stellen wir ein, dass bei Mausberührung die Hintergrundfarbe auf aquamarine geändert wird.
<style type="text/css"><!-- legend: hover { background-color: aquamarine; } //--> </style>
Mehr zum Thema legend lesen Sie in Formulare in HTML. Die Beschreibung des hier verwendeten HTML-Befehl legend finden Sie in der HTML Referenz unter <legend>.