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 yellowgreen | Schriftfarbe lightcyan | |||||
Detail | : | Hintergrund yellowgreen | Detail | : | Schrift lightcyan | |
Farbe | : | yellowgreen | Farbe | : | lightcyan | |
Farbwert | : | #9acd32 | Farbwert | : | #e0ffff | |
HTML | : | yellowgreen | HTML | : | lightcyan | |
HTML (Wert) | : | #9acd32 | HTML (Wert) | : | #e0ffff | |
CSS | : | yellowgreen | CSS | : | lightcyan | |
CSS (Wert) | : | #9acd32 | CSS (Wert) | : | #e0ffff | |
CSS (kürzest) | : | #9acd32 | CSS (kürzest) | : | #e0ffff | |
CSS (RGB) | : | rgb(154,205,50) | CSS (RGB) | : | rgb(224,255,255) | |
CSS (%RGB) | : | rgb(60%,80%,19%) | CSS (%RGB) | : | rgb(87%,100%,100%) |
Verlauf Hintergrundfarbe yellowgreen nach Schriftfarbe lightcyan | |||||||
#9acd32 | #a4d44f | #aedb6c | #b8e289 | #c2e9a7 | #ccf0c4 | #d6f7e1 | #e0ffff |
#9acd32 | #a4d44f | #aedb6c | #b8e289 | #c2e9a7 | #ccf0c4 | #d6f7e1 | #e0ffff |
Kombination von yellowgreen und lightcyan | |||||||
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. | Die Ähnlichkeit der Farben lightcyan und yellowgreen ergibt sich zu 91.50%. Die Lesbarkeit dieser Kombination liegt damit bei 8.50%. Auf Hintergrund yellowgreen ist lightcyan ungeeignet, weil sowohl Helligkeit als auch die Farben zu ähnlich sind. |
Hintergrundfarbe yellowgreen | Schriftfarbe lightcyan | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#9acd32 | #9acd32 | #9acd32 | #9acd32 | #e0ffff | #e0ffff | #e0ffff | #e0ffff |
#a8d44f | #a8d44f | #84af2a | #84af2a | #e4ffff | #e4ffff | #c0dada | #c0dada |
#b6db6c | #b6db6c | #6e9223 | #6e9223 | #e8ffff | #e8ffff | #a0b6b6 | #a0b6b6 |
#c5e289 | #c5e289 | #58751c | #58751c | #edffff | #edffff | #809191 | #809191 |
#d3e9a7 | #d3e9a7 | #425715 | #425715 | #f1ffff | #f1ffff | #606d6d | #606d6d |
#e2f0c4 | #e2f0c4 | #2c3a0e | #2c3a0e | #f6ffff | #f6ffff | #404848 | #404848 |
#f0f7e1 | #f0f7e1 | #161d07 | #161d07 | #faffff | #faffff | #202424 | #202424 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Die Rahmenfarbe soll sich von Farbe yellowgreen auf Farbe lightcyan ändern, wenn man mit der Maus auf <dt> zeigt. Bereiten wir zunächst eine Formatierung von <dt> in Farbe yellowgreen vor.
In diesem Beispiel umranden wir <dt> mit einem 1 Pixel dicken, gepunkteten Rahmen in Farbe yellowgreen.
<style type="text/css"><!-- dt { border-style:dotted; border-width:1px; border-color:yellowgreen; } //--> </style>Jetzt fordern wir, dass sich bei Mausberührung die Rahmenfarbe auf lightcyan ändert.
<style type="text/css"><!-- dt:hover { border-color:lightcyan; } //--> </style>
Mehr zum Thema dt erfahren Sie in Listen und Glossare in HTML. Mehr zum HTML-Befehl dt ist in der HTML Referenz bei <dt> gezeigt.
Die Hintergrundfarbe soll sich von Farbe yellowgreen auf Farbe lightcyan ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Darstellung von <cite> in Farbe yellowgreen vor.
Wir setzen in diesem Beispiel bei <cite> die Hintergrundfarbe auf Farbe yellowgreen. Die Textfarbe ändern wir nicht. Die Schriftart ändern wir auf monospace. Die Größe der Schrift erhöhen wir auf 114%.
<style type="text/css"><!-- cite { font-size: 114%; background-color: yellowgreen; font-family: monospace; } //--> </style>Nun fordern wir, dass sich bei Hover die Hintergrundfarbe auf lightcyan ändert.
<style type="text/css"><!-- cite: hover { background-color: lightcyan; } //--> </style>
Der HTML-Befehl cite ist in der HTML Referenz unter <cite> genau beschrieben.