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 #deb887 | Schriftfarbwert #00bfff | |||||
Detail | : | Hintergrund #deb887 | Detail | : | Schrift #00bfff | |
Farbwert | : | #deb887 | Farbwert | : | #00bfff | |
Farbe | : | burlywood | Farbe | : | deepskyblue | |
HTML | : | #deb887 | HTML | : | #00bfff | |
HTML (Wert) | : | #deb887 | HTML (Wert) | : | #00bfff | |
CSS | : | #deb887 | CSS | : | #00bfff | |
CSS (Wert) | : | #deb887 | CSS (Wert) | : | #00bfff | |
CSS (kürzest) | : | #deb887 | CSS (kürzest) | : | #00bfff | |
CSS (RGB) | : | rgb(222,184,135) | CSS (RGB) | : | rgb(0,191,255) | |
CSS (%RGB) | : | rgb(87%,72%,52%) | CSS (%RGB) | : | rgb(0%,74%,100%) |
Verlauf Hintergrundfarbwert #deb887 nach Schriftfarbwert #00bfff | |||||||
#deb887 | #beb998 | #9ebaa9 | #7ebbba | #5fbccb | #3fbddc | #1fbeed | #00bfff |
#deb887 | #beb998 | #9ebaa9 | #7ebbba | #5fbccb | #3fbddc | #1fbeed | #00bfff |
Kombination von #deb887 und #00bfff | |||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. | Die Ähnlichkeit der Farben #00bfff und #deb887 ergibt sich zu 94.56%. Die Lesbarkeit dieser Farbkombination liegt damit bei 5.44%. Auf Hintergrund #deb887 ist #00bfff ungeeignet, da sich die Helligkeit und Farben zu ähnlich sind. |
Hintergrundfarbwert #deb887 | Schriftfarbwert #00bfff | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#deb887 | #deb887 | #deb887 | #deb887 | #00bfff | #00bfff | #00bfff | #00bfff |
#e2c298 | #e2c298 | #be9d73 | #be9d73 | #24c8ff | #24c8ff | #00a3da | #00a3da |
#e7cca9 | #e7cca9 | #9e8360 | #9e8360 | #48d1ff | #48d1ff | #0088b6 | #0088b6 |
#ecd6ba | #ecd6ba | #7e694d | #7e694d | #6ddaff | #6ddaff | #006d91 | #006d91 |
#f0e0cb | #f0e0cb | #5f4e39 | #5f4e39 | #91e3ff | #91e3ff | #00516d | #00516d |
#f5eadc | #f5eadc | #3f3426 | #3f3426 | #b6ecff | #b6ecff | #003648 | #003648 |
#faf4ed | #faf4ed | #1f1a13 | #1f1a13 | #daf5ff | #daf5ff | #001b24 | #001b24 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Wir ändern bei diesem Beispiel die Textfarbe von <dd> auf Farbwert #00bfff und die Hintergrundfarbe von <dd> auf Farbwert #deb887. Als Schriftart wählen wir sans-serif. Die Schriftgröße erhöhen wir auf 123%.
<style type="text/css"><!-- dd { font-size: 123%; background-color: #deb887; font-family: sans-serif; color: #00bfff; } //--> </style>
Weiteres zum Thema finden Sie in Listen und Glossare in HTML. Der HTML-Befehl dd ist in der HTML Referenz unter <dd> beschrieben.
Mit Befehl <a> setzen Sie einen Hyperlink. Diesen können Sie farblich gestalten und hervorheben.
Die Hintergrundfarbe soll sich von Farbwert #deb887 auf Farbwert #00bfff ändern, wenn man mit der Maus auf <a> zeigt. Bereiten wir zunächst die Formatierung von <a> in Farbwert #deb887 vor.
Wir ändern als Beispiel die Hintergrundfarbe von <a> auf Farbwert #deb887. Die Textfarbe ändern wir nicht. Die Schriftart ändern wir auf sans-serif. Die Schriftgröße verkleinern wir auf 91%:
<style type="text/css"><!-- a { background-color:#deb887; font-family:sans-serif; font-size:91%; } //--> </style>Nun fordern wir, dass bei Mausberührung die Hintergrundfarbe auf #00bfff gesetzt wird.
<style type="text/css"><!-- a:hover { background-color:#00bfff; } //--> </style>
Mehr zum Thema können Sie in Verweise und Protokolle in HTML finden. Möglichkeiten vom hier verwendeten HTML-Befehl a sind in der HTML Referenz unter <a> beschrieben.