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 darkslategray | Schriftfarbe mintcream | |||||
| Detail | : | Hintergrund darkslategray | Detail | : | Schrift mintcream | |
| Farbe | : | darkslategray | Farbe | : | mintcream | |
| Farbwert | : | #2f4f4f | Farbwert | : | #f5fffa | |
| HTML | : | darkslategray | HTML | : | mintcream | |
| HTML (Wert) | : | #2f4f4f | HTML (Wert) | : | #f5fffa | |
| CSS | : | darkslategray | CSS | : | mintcream | |
| CSS (Wert) | : | #2f4f4f | CSS (Wert) | : | #f5fffa | |
| CSS (kürzest) | : | #2f4f4f | CSS (kürzest) | : | #f5fffa | |
| CSS (RGB) | : | rgb(47,79,79) | CSS (RGB) | : | rgb(245,255,250) | |
| CSS (%RGB) | : | rgb(18%,30%,30%) | CSS (%RGB) | : | rgb(96%,100%,98%) | |
Verlauf Hintergrundfarbe darkslategray nach Schriftfarbe mintcream | |||||||
| #2f4f4f | #4b6867 | #67817f | #839a98 | #a0b3b0 | #bcccc9 | #d8e5e1 | #f5fffa |
| #2f4f4f | #4b6867 | #67817f | #839a98 | #a0b3b0 | #bcccc9 | #d8e5e1 | #f5fffa |
Kombination von darkslategray und mintcream | |||||||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. 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. | mintcream eignet sich als Schriftfarbe auf Hintergrund darkslategray. Die Unterschiede in Helligkeit und Farbe sind gut. Die Ähnlichkeit der Farben mintcream und darkslategray ergibt sich zu 58.36%. Die Lesbarkeit dieser Kombination liegt damit bei 41.64%. | ||||||
Hintergrundfarbe darkslategray | Schriftfarbe mintcream | ||||||
| Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
| #2f4f4f | #2f4f4f | #2f4f4f | #2f4f4f | #f5fffa | #f5fffa | #f5fffa | #f5fffa |
| #4c6868 | #4c6868 | #284343 | #284343 | #f6fffa | #f6fffa | #d2dad6 | #d2dad6 |
| #6a8181 | #6a8181 | #213838 | #213838 | #f7fffb | #f7fffb | #afb6b2 | #afb6b2 |
| #889a9a | #889a9a | #1a2d2d | #1a2d2d | #f9fffc | #f9fffc | #8c918e | #8c918e |
| #a5b3b3 | #a5b3b3 | #142121 | #142121 | #fafffc | #fafffc | #696d6b | #696d6b |
| #c3cccc | #c3cccc | #0d1616 | #0d1616 | #fcfffd | #fcfffd | #464847 | #464847 |
| #e1e5e5 | #e1e5e5 | #060b0b | #060b0b | #fdfffe | #fdfffe | #232423 | #232423 |
| #ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Eine Überschrift der 4. Stufe setzen Sie mit Tag <h4>. Diese können Sie farblich gestalten und hervorheben.
Die Hintergrundfarbe soll sich von Farbe darkslategray auf Farbe mintcream ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <h4> in Farbe darkslategray vor.
In diesem Beispiel legen wir bei <h4> die Hintergrundfarbe auf Farbe darkslategray fest:
<style type="text/css"><!-- h4 { background-color:darkslategray; } //--> </style>Jetzt fordern wir, dass bei Berührung mit der Maus die Hintergrundfarbe auf mintcream gesetzt wird.
<style type="text/css"><!-- h4: hover { background-color: mintcream; } //--> </style>
Mehr zum Thema finden Sie in Grundlegende Gestaltungselemente in HTML. Einzelheiten des hier verwendeten Tag h4 sind in der HTML Referenz bei <h4> beschrieben.