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 navajowhite | Schriftfarbe aquamarine | |||||
Detail | : | Hintergrund navajowhite | Detail | : | Schrift aquamarine | |
Farbe | : | navajowhite | Farbe | : | aquamarine | |
Farbwert | : | #ffdead | Farbwert | : | #7fffd4 | |
HTML | : | navajowhite | HTML | : | aquamarine | |
HTML (Wert) | : | #ffdead | HTML (Wert) | : | #7fffd4 | |
CSS | : | navajowhite | CSS | : | aquamarine | |
CSS (Wert) | : | #ffdead | CSS (Wert) | : | #7fffd4 | |
CSS (kürzest) | : | #ffdead | CSS (kürzest) | : | #7fffd4 | |
CSS (RGB) | : | rgb(255,222,173) | CSS (RGB) | : | rgb(127,255,212) | |
CSS (%RGB) | : | rgb(100%,87%,67%) | CSS (%RGB) | : | rgb(49%,100%,83%) |
Verlauf Hintergrundfarbe navajowhite nach Schriftfarbe aquamarine | |||||||
#ffdead | #ece2b2 | #dae7b8 | #c8ecbd | #b5f0c3 | #a3f5c8 | #91face | #7fffd4 |
#ffdead | #ece2b2 | #dae7b8 | #c8ecbd | #b5f0c3 | #a3f5c8 | #91face | #7fffd4 |
Kombination von navajowhite und aquamarine | |||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. | Die Ähnlichkeit von aquamarine und navajowhite ergibt sich zu 94.99%. Die Lesbarkeit dieser Kombination liegt damit bei 5.01%. aquamarine eignet sich nicht als Schriftfarbe auf Hintergrund navajowhite, weil die Unterschiede in der Helligkeit und Farbe unzureichend sind. |
Hintergrundfarbe navajowhite | Schriftfarbe aquamarine | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#ffdead | #ffdead | #ffdead | #ffdead | #7fffd4 | #7fffd4 | #7fffd4 | #7fffd4 |
#ffe2b8 | #ffe2b8 | #dabe94 | #dabe94 | #91ffda | #91ffda | #6cdab5 | #6cdab5 |
#ffe7c4 | #ffe7c4 | #b69e7b | #b69e7b | #a3ffe0 | #a3ffe0 | #5ab697 | #5ab697 |
#ffecd0 | #ffecd0 | #917e62 | #917e62 | #b5ffe6 | #b5ffe6 | #489179 | #489179 |
#fff0db | #fff0db | #6d5f4a | #6d5f4a | #c8ffec | #c8ffec | #366d5a | #366d5a |
#fff5e7 | #fff5e7 | #483f31 | #483f31 | #dafff2 | #dafff2 | #24483c | #24483c |
#fffaf3 | #fffaf3 | #241f18 | #241f18 | #ecfff8 | #ecfff8 | #12241e | #12241e |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Die Hintergrundfarbe soll sich von Farbe navajowhite auf Farbe aquamarine ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <acronym> in Farbe navajowhite vor.
Zum Beispiel legen wir Farbe navajowhite als Hintergrundfarbe von <acronym> fest. Zwar behalten wir die Textfarbe bei, ändern jedoch die Schriftart auf monospace. Die Größe der Schrift setzen wir auf 90%:
<style type="text/css"><!-- acronym { font-size: 90%; font-family: monospace; background-color: navajowhite; } //--> </style>Jetzt fordern wir, dass bei Berührung mit der Maus die Hintergrundfarbe auf aquamarine gesetzt wird.
<style type="text/css"><!-- acronym: hover { background-color: aquamarine; } //--> </style>
Einzelheiten vom HTML-Befehl acronym sind in der HTML Referenz unter <acronym> genau zusammengestellt.
Die Rahmenfarbe soll sich von Farbe navajowhite auf Farbe aquamarine ändern, wenn man mit der Maus auf <center> zeigt. Bereiten wir zunächst die Darstellung von <center> in Farbe navajowhite vor.
In diesem Beispiel umranden wir <center> mit einem 2 Pixel dicken, gefurchten Rahmen in Farbe navajowhite.
<style type="text/css"><!-- center { border:2px groove navajowhite; } //--> </style>Jetzt fordern wir, dass bei Mausberührung die Rahmenfarbe auf aquamarine geändert wird.
<style type="text/css"><!-- center:hover { border-color:aquamarine; } //--> </style>
Mehr zum Thema center können Sie in Grundlegende Gestaltungselemente in HTML erfahren. Möglichkeiten des hier genutzten Tag <center>.