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 aquamarine | Schriftfarbe lightgrey | |||||
Detail | : | Hintergrund aquamarine | Detail | : | Schrift lightgrey | |
Farbe | : | aquamarine | Farbe | : | lightgrey | |
Farbwert | : | #7fffd4 | Farbwert | : | #d3d3d3 | |
HTML | : | aquamarine | HTML | : | lightgrey | |
HTML (Wert) | : | #7fffd4 | HTML (Wert) | : | #d3d3d3 | |
CSS | : | aquamarine | CSS | : | lightgrey | |
CSS (Wert) | : | #7fffd4 | CSS (Wert) | : | #d3d3d3 | |
CSS (kürzest) | : | #7fffd4 | CSS (kürzest) | : | #d3d3d3 | |
CSS (RGB) | : | rgb(127,255,212) | CSS (RGB) | : | rgb(211,211,211) | |
CSS (%RGB) | : | rgb(49%,100%,83%) | CSS (%RGB) | : | rgb(82%,82%,82%) |
Verlauf Hintergrundfarbe aquamarine nach Schriftfarbe lightgrey | |||||||
#7fffd4 | #8bf8d3 | #97f2d3 | #a3ecd3 | #afe5d3 | #bbdfd3 | #c7d9d3 | #d3d3d3 |
#7fffd4 | #8bf8d3 | #97f2d3 | #a3ecd3 | #afe5d3 | #bbdfd3 | #c7d9d3 | #d3d3d3 |
Kombination von aquamarine und lightgrey | |||||||
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. | lightgrey eignet sich nicht als Schriftfarbe auf Hintergrund aquamarine. Die Unterschiede in der Helligkeit und Farbe sind unzureichend. Die Ähnlichkeit der Farben lightgrey und aquamarine beträgt 94.18%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 5.82%. |
Hintergrundfarbe aquamarine | Schriftfarbe lightgrey | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#7fffd4 | #7fffd4 | #7fffd4 | #7fffd4 | #d3d3d3 | #d3d3d3 | #d3d3d3 | #d3d3d3 |
#91ffda | #91ffda | #6cdab5 | #6cdab5 | #d9d9d9 | #d9d9d9 | #b4b4b4 | #b4b4b4 |
#a3ffe0 | #a3ffe0 | #5ab697 | #5ab697 | #dfdfdf | #dfdfdf | #969696 | #969696 |
#b5ffe6 | #b5ffe6 | #489179 | #489179 | #e5e5e5 | #e5e5e5 | #787878 | #787878 |
#c8ffec | #c8ffec | #366d5a | #366d5a | #ececec | #ececec | #5a5a5a | #5a5a5a |
#dafff2 | #dafff2 | #24483c | #24483c | #f2f2f2 | #f2f2f2 | #3c3c3c | #3c3c3c |
#ecfff8 | #ecfff8 | #12241e | #12241e | #f8f8f8 | #f8f8f8 | #1e1e1e | #1e1e1e |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Bei diesem Beispiel umranden wir <p> mit einem 1 Punkte dicken, gezahnten Rahmen in Farbe lightgrey . Den Hintergrund von <p> setzen wir auf Farbe aquamarine. Das geht in HTML kaum. Deshalb nutzen wir hierfür CSS.
<style type="text/css"><!-- p { border:1pt ridge lightgrey; background-color:aquamarine; } //--> </style>
Mehr zum Thema können Sie in Grundlegende Gestaltungselemente in HTML nachlesen. Mehr zum hier genutzten HTML-Befehl <p>.
Mit HTML-Tag <a> wird ein Link gesetzt. Dieser kann hervorgehoben und farblich gestaltet werden.
Die Hintergrundfarbe soll sich von Farbe aquamarine auf Farbe lightgrey ändern, wenn man mit der Maus auf <a> zeigt. Bereiten wir zunächst eine Formatierung von <a> in Farbe aquamarine vor.
Wir setzen für dieses Beispiel bei <a> die Hintergrundfarbe auf Farbe aquamarine. Zwar behalten wir die Textfarbe bei, setzen jedoch die Schriftart auf monospace. Die Schriftgröße erhöhen wir auf 129%:
<style type="text/css"><!-- a { font-size:129%; background-color:aquamarine; font-family:monospace; } //--> </style>Nun fordern wir, dass sich bei Hover die Hintergrundfarbe zu lightgrey ändert.
<style type="text/css"><!-- a: hover { background-color: lightgrey; } //--> </style>
Weiteres zum Thema erfahren Sie in Verweise und Protokolle in HTML. Möglichkeiten des hier verwendeten Tag a sind in der HTML Referenz unter <a> zusammengestellt.