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 #ffd700 | Schriftfarbe darkkhaki | |||||
| Detail | : | Hintergrund #ffd700 | Detail | : | Schrift darkkhaki | |
| Farbwert | : | #ffd700 | Farbe | : | darkkhaki | |
| Farbe | : | gold | Farbwert | : | #bdb76b | |
| HTML | : | #ffd700 | HTML | : | darkkhaki | |
| HTML (Wert) | : | #ffd700 | HTML (Wert) | : | #bdb76b | |
| CSS | : | #ffd700 | CSS | : | darkkhaki | |
| CSS (Wert) | : | #ffd700 | CSS (Wert) | : | #bdb76b | |
| CSS (kürzest) | : | #ffd700 | CSS (kürzest) | : | #bdb76b | |
| CSS (RGB) | : | rgb(255,215,0) | CSS (RGB) | : | rgb(189,183,107) | |
| CSS (%RGB) | : | rgb(100%,84%,0%) | CSS (%RGB) | : | rgb(74%,71%,41%) | |
Verlauf Hintergrundfarbwert #ffd700 nach Schriftfarbe darkkhaki | |||||||
| #ffd700 | #f5d20f | #eccd1e | #e2c92d | #d9c43d | #cfc04c | #c6bb5b | #bdb76b |
| #ffd700 | #f5d20f | #eccd1e | #e2c92d | #d9c43d | #cfc04c | #c6bb5b | #bdb76b |
Kombination von #ffd700 und darkkhaki | |||||||
| 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. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Die Ähnlichkeit der Farben darkkhaki und #ffd700 ergibt sich zu 92.98%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 7.02%. Auf Hintergrund #ffd700 ist darkkhaki ungeeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind ausreichend. | ||||||
Hintergrundfarbwert #ffd700 | Schriftfarbe darkkhaki | ||||||
| Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
| #ffd700 | #ffd700 | #ffd700 | #ffd700 | #bdb76b | #bdb76b | #bdb76b | #bdb76b |
| #ffdc24 | #ffdc24 | #dab800 | #dab800 | #c6c180 | #c6c180 | #a29c5b | #a29c5b |
| #ffe248 | #ffe248 | #b69900 | #b69900 | #cfcb95 | #cfcb95 | #87824c | #87824c |
| #ffe86d | #ffe86d | #917a00 | #917a00 | #d9d5aa | #d9d5aa | #6c683d | #6c683d |
| #ffed91 | #ffed91 | #6d5c00 | #6d5c00 | #e2e0bf | #e2e0bf | #514e2d | #514e2d |
| #fff3b6 | #fff3b6 | #483d00 | #483d00 | #ecead4 | #ecead4 | #36341e | #36341e |
| #fff9da | #fff9da | #241e00 | #241e00 | #f5f4e9 | #f5f4e9 | #1b1a0f | #1b1a0f |
| #ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Für dieses Beispiel umranden wir <p> mit einem . Den Hintergrund von <p> setzen wir auf Farbwert #ffd700. In HTML ist dies kaum möglich. Deshalb formatieren wir mit CSS.
<style type="text/css"><!-- p { border:2pt dashed darkkhaki; background-color:#ffd700; } //--> </style>
Mehr zum Thema erfahren Sie in Grundlegende Gestaltungselemente in HTML. Zur Beschreibung des hier genutzten Befehl <p>.
Die Textfarbe soll sich von Farbwert #ffd700 auf Farbe darkkhaki ändern, wenn man mit der Maus auf <center> zeigt. Bereiten wir zunächst eine Darstellung von <center> in Farbwert #ffd700 vor.
Wir legen für dieses Beispiel bei <center> die Textfarbe auf Farbwert #ffd700 fest. Die Hintergrundfarbe lassen wir unverändert, ändern jedoch die Schriftart auf sans-serif.
<style type="text/css"><!-- center { font-family: sans-serif; color: #ffd700; } //--> </style>Nun fordern wir, dass bei Hover die Textfarbe auf darkkhaki gesetzt wird.
<style type="text/css"><!-- center:hover { color:darkkhaki; } //--> </style>
Mehr zum Thema lesen Sie in Grundlegende Gestaltungselemente in HTML. Mehr zum Tag center ist in der HTML Referenz unter <center> ausführlich gezeigt.