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 #ff1493 | Schriftfarbe antiquewhite | |||||
Detail | : | Hintergrund #ff1493 | Detail | : | Schrift antiquewhite | |
Farbwert | : | #ff1493 | Farbe | : | antiquewhite | |
Farbe | : | deeppink | Farbwert | : | #faebd7 | |
HTML | : | #ff1493 | HTML | : | antiquewhite | |
HTML (Wert) | : | #ff1493 | HTML (Wert) | : | #faebd7 | |
CSS | : | #ff1493 | CSS | : | antiquewhite | |
CSS (Wert) | : | #ff1493 | CSS (Wert) | : | #faebd7 | |
CSS (kürzest) | : | #ff1493 | CSS (kürzest) | : | #faebd7 | |
CSS (RGB) | : | rgb(255,20,147) | CSS (RGB) | : | rgb(250,235,215) | |
CSS (%RGB) | : | rgb(100%,7%,57%) | CSS (%RGB) | : | rgb(98%,92%,84%) |
Verlauf Hintergrundfarbwert #ff1493 nach Schriftfarbe antiquewhite | |||||||
#ff1493 | #fe329c | #fd51a6 | #fc70b0 | #fc8eb9 | #fbadc3 | #facccd | #faebd7 |
#ff1493 | #fe329c | #fd51a6 | #fc70b0 | #fc8eb9 | #fbadc3 | #facccd | #faebd7 |
Kombination von #ff1493 und antiquewhite | |||||||
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. 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. | antiquewhite eignet sich nicht als Schriftfarbe auf Hintergrund #ff1493, weil der Unterschied in den Farben nicht ausreichend ist Die Ähnlichkeit der Farben antiquewhite und #ff1493 ergibt sich zu 85.21%. Die Lesbarkeit dieser Kombination liegt damit bei 14.79%. |
Hintergrundfarbwert #ff1493 | Schriftfarbe antiquewhite | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#ff1493 | #ff1493 | #ff1493 | #ff1493 | #faebd7 | #faebd7 | #faebd7 | #faebd7 |
#ff35a2 | #ff35a2 | #da117e | #da117e | #faeddc | #faeddc | #d6c9b8 | #d6c9b8 |
#ff57b1 | #ff57b1 | #b60e69 | #b60e69 | #fbf0e2 | #fbf0e2 | #b2a799 | #b2a799 |
#ff78c1 | #ff78c1 | #910b54 | #910b54 | #fcf3e8 | #fcf3e8 | #8e867a | #8e867a |
#ff9ad0 | #ff9ad0 | #6d083f | #6d083f | #fcf6ed | #fcf6ed | #6b645c | #6b645c |
#ffbbe0 | #ffbbe0 | #48052a | #48052a | #fdf9f3 | #fdf9f3 | #47433d | #47433d |
#ffddef | #ffddef | #240215 | #240215 | #fefcf9 | #fefcf9 | #23211e | #23211e |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Die Textfarbe soll sich von Farbwert #ff1493 auf Farbe antiquewhite ändern, wenn man mit der Maus auf <code> zeigt. Bereiten wir zunächst die Darstellung von <code> in Farbwert #ff1493 vor.
Wir legen zum Beispiel bei <code> die Textfarbe auf Farbwert #ff1493 fest. Zwar behalten wir die Hintergrundfarbe bei, setzen jedoch die Schriftart auf courier new:
<style type="text/css"><!-- code { color:#ff1493; font-family:courier new; } //--> </style>Jetzt fordern wir, dass bei Hover die Textfarbe auf antiquewhite gesetzt wird.
<style type="text/css"><!-- code: hover { color: antiquewhite; } //--> </style>
Mehr zum Thema können Sie in Text in HTML finden. Mehr zum hier verwendeten Tag code ist in der HTML Referenz unter <code> ausführlich zusammengestellt.