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 #fffaf0 | Schriftfarbe mediumaquamarine | |||||
| Detail | : | Hintergrund #fffaf0 | Detail | : | Schrift mediumaquamarine | |
| Farbwert | : | #fffaf0 | Farbe | : | mediumaquamarine | |
| Farbe | : | floralwhite | Farbwert | : | #66cdaa | |
| HTML | : | #fffaf0 | HTML | : | mediumaquamarine | |
| HTML (Wert) | : | #fffaf0 | HTML (Wert) | : | #66cdaa | |
| CSS | : | #fffaf0 | CSS | : | mediumaquamarine | |
| CSS (Wert) | : | #fffaf0 | CSS (Wert) | : | #66cdaa | |
| CSS (kürzest) | : | #fffaf0 | CSS (kürzest) | : | #66cdaa | |
| CSS (RGB) | : | rgb(255,250,240) | CSS (RGB) | : | rgb(102,205,170) | |
| CSS (%RGB) | : | rgb(100%,98%,94%) | CSS (%RGB) | : | rgb(40%,80%,66%) | |
Verlauf Hintergrundfarbwert #fffaf0 nach Schriftfarbe mediumaquamarine | |||||||
| #fffaf0 | #e9f3e6 | #d3eddc | #bde6d2 | #a7e0c8 | #91d9be | #7bd3b4 | #66cdaa |
| #fffaf0 | #e9f3e6 | #d3eddc | #bde6d2 | #a7e0c8 | #91d9be | #7bd3b4 | #66cdaa |
Kombination von #fffaf0 und mediumaquamarine | |||||||
| Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. | Auf Hintergrund #fffaf0 ist mediumaquamarine ungeeignet. Sowohl Helligkeit als auch die Farben sind zu ähnlich. Die Ähnlichkeit der Farben mediumaquamarine und #fffaf0 ergibt sich zu 91.16%. Die Lesbarkeit dieser Kombination ergibt sich zu 8.84%. | ||||||
Hintergrundfarbwert #fffaf0 | Schriftfarbe mediumaquamarine | ||||||
| Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
| #fffaf0 | #fffaf0 | #fffaf0 | #fffaf0 | #66cdaa | #66cdaa | #66cdaa | #66cdaa |
| #fffaf2 | #fffaf2 | #dad6cd | #dad6cd | #7bd4b6 | #7bd4b6 | #57af91 | #57af91 |
| #fffbf4 | #fffbf4 | #b6b2ab | #b6b2ab | #91dbc2 | #91dbc2 | #489279 | #489279 |
| #fffcf6 | #fffcf6 | #918e89 | #918e89 | #a7e2ce | #a7e2ce | #3a7561 | #3a7561 |
| #fffcf8 | #fffcf8 | #6d6b66 | #6d6b66 | #bde9da | #bde9da | #2b5748 | #2b5748 |
| #fffdfa | #fffdfa | #484744 | #484744 | #d3f0e6 | #d3f0e6 | #1d3a30 | #1d3a30 |
| #fffefc | #fffefc | #242322 | #242322 | #e9f7f2 | #e9f7f2 | #0e1d18 | #0e1d18 |
| #ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Die Hintergrundfarbe soll sich von Farbwert #fffaf0 auf Farbe mediumaquamarine ändern, wenn man mit der Maus auf <select> zeigt. Bereiten wir zunächst die Formatierung von <select> in Farbwert #fffaf0 vor.
Wir legen für dieses Beispiel bei <select> die Hintergrundfarbe auf Farbwert #fffaf0 fest:
<style type="text/css"><!-- select { background-color:#fffaf0; } //--> </style>Jetzt stellen wir ein, dass sich bei Hover die Hintergrundfarbe auf mediumaquamarine ändert.
<style type="text/css"><!-- select:hover { background-color:mediumaquamarine; } //--> </style>
Weiteres zum Thema finden Sie in Formulare in HTML. Möglichkeiten des hier genutzten Tag select finden Sie in der HTML Referenz unter <select>.
Für dieses Beispiel umranden wir <hr> mit einem doppelten, 5 Punkte dicken Rahmen in Farbe mediumaquamarine . Die Hintergrundfarbe für <hr> färben wir entsprechend mit Farbwert #fffaf0. Mit HTML ist das nicht machbar. Daher formatieren wir hier mit CSS.
<style type="text/css"><!-- hr { border:5pt double mediumaquamarine; background-color:#fffaf0; } //--> </style>
Mehr zum Thema hr können Sie in Grundlegende Gestaltungselemente in HTML finden. Der hier genutzte Tag hr ist in der HTML Referenz unter <hr> genau gezeigt.