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 #eee8aa | Schriftfarbwert #ff1493 | |||||
Detail | : | Hintergrund #eee8aa | Detail | : | Schrift #ff1493 | |
Farbwert | : | #eee8aa | Farbwert | : | #ff1493 | |
Farbe | : | palegoldenrod | Farbe | : | deeppink | |
HTML | : | #eee8aa | HTML | : | #ff1493 | |
HTML (Wert) | : | #eee8aa | HTML (Wert) | : | #ff1493 | |
CSS | : | #eee8aa | CSS | : | #ff1493 | |
CSS (Wert) | : | #eee8aa | CSS (Wert) | : | #ff1493 | |
CSS (kürzest) | : | #eee8aa | CSS (kürzest) | : | #ff1493 | |
CSS (RGB) | : | rgb(238,232,170) | CSS (RGB) | : | rgb(255,20,147) | |
CSS (%RGB) | : | rgb(93%,90%,66%) | CSS (%RGB) | : | rgb(100%,7%,57%) |
Verlauf Hintergrundfarbwert #eee8aa nach Schriftfarbwert #ff1493 | |||||||
#eee8aa | #f0c9a6 | #f2aba3 | #f58da0 | #f76e9c | #fa5099 | #fc3296 | #ff1493 |
#eee8aa | #f0c9a6 | #f2aba3 | #f58da0 | #f76e9c | #fa5099 | #fc3296 | #ff1493 |
Kombination von #eee8aa und #ff1493 | |||||||
Cras id velit ante. 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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Die Ähnlichkeit von #ff1493 und #eee8aa ergibt sich zu 86.18%. Die Lesbarkeit dieser Farbkombination liegt damit bei 13.82%. #ff1493 ist nicht als Schriftfarbe auf Hintergrund #eee8aa geeignet, da sich die Helligkeit und Farben zu ähnlich sind. |
Hintergrundfarbwert #eee8aa | Schriftfarbwert #ff1493 | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#eee8aa | #eee8aa | #eee8aa | #eee8aa | #ff1493 | #ff1493 | #ff1493 | #ff1493 |
#f0ebb6 | #f0ebb6 | #ccc691 | #ccc691 | #ff35a2 | #ff35a2 | #da117e | #da117e |
#f2eec2 | #f2eec2 | #aaa579 | #aaa579 | #ff57b1 | #ff57b1 | #b60e69 | #b60e69 |
#f5f1ce | #f5f1ce | #888461 | #888461 | #ff78c1 | #ff78c1 | #910b54 | #910b54 |
#f7f5da | #f7f5da | #666348 | #666348 | #ff9ad0 | #ff9ad0 | #6d083f | #6d083f |
#faf8e6 | #faf8e6 | #444230 | #444230 | #ffbbe0 | #ffbbe0 | #48052a | #48052a |
#fcfbf2 | #fcfbf2 | #222118 | #222118 | #ffddef | #ffddef | #240215 | #240215 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Wir ändern in diesem Beispiel die Textfarbe von <dd> auf Farbwert #ff1493 und die Hintergrundfarbe von <dd> auf Farbwert #eee8aa. Die Schriftart setzen wir auf verdana und erhöhen die Schriftgröße auf 127%.
<style type="text/css"><!-- dd { font-family:verdana; font-size:127%; color:#ff1493; background-color:#eee8aa; } //--> </style>
Mehr zum Thema können Sie in Listen und Glossare in HTML lesen. Weiteres zum Befehl dd ist in der HTML Referenz bei <dd> zusammengestellt.
Die Hintergrundfarbe soll sich von Farbwert #eee8aa auf Farbwert #ff1493 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <p> in Farbwert #eee8aa vor.
Z.B. legen wir Farbwert #eee8aa als Hintergrundfarbe von <p> fest. Die Größe der Schrift erhöhen wir auf 124%:
<style type="text/css"><!-- p { background-color:#eee8aa; font-size:124%; } //--> </style>Jetzt fordern wir, dass sich bei Hover die Hintergrundfarbe zu #ff1493 ändert.
<style type="text/css"><!-- p: hover { background-color: #ff1493; } //--> </style>
Mehr zum Thema p können Sie in Grundlegende Gestaltungselemente in HTML erfahren. Mehr zum hier gezeigten HTML-Tag p ist in der HTML Referenz bei <p> beschrieben.