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 #7fffd4 | Schriftfarbe palevioletred | |||||
Detail | : | Hintergrund #7fffd4 | Detail | : | Schrift palevioletred | |
Farbwert | : | #7fffd4 | Farbe | : | palevioletred | |
Farbe | : | aquamarine | Farbwert | : | #db7093 | |
HTML | : | #7fffd4 | HTML | : | palevioletred | |
HTML (Wert) | : | #7fffd4 | HTML (Wert) | : | #db7093 | |
CSS | : | #7fffd4 | CSS | : | palevioletred | |
CSS (Wert) | : | #7fffd4 | CSS (Wert) | : | #db7093 | |
CSS (kürzest) | : | #7fffd4 | CSS (kürzest) | : | #db7093 | |
CSS (RGB) | : | rgb(127,255,212) | CSS (RGB) | : | rgb(219,112,147) | |
CSS (%RGB) | : | rgb(49%,100%,83%) | CSS (%RGB) | : | rgb(85%,43%,57%) |
Verlauf Hintergrundfarbwert #7fffd4 nach Schriftfarbe palevioletred | |||||||
#7fffd4 | #8ceaca | #99d6c1 | #a6c1b8 | #b3adae | #c098a5 | #cd849c | #db7093 |
#7fffd4 | #8ceaca | #99d6c1 | #a6c1b8 | #b3adae | #c098a5 | #cd849c | #db7093 |
Kombination von #7fffd4 und palevioletred | |||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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. Cras id velit ante. | Die Ähnlichkeit von palevioletred und #7fffd4 beträgt 87.90%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 12.10%. Auf Hintergrund #7fffd4 ist palevioletred ungeeignet. Die Helligkeit und Farben sind sich zu ähnlich. |
Hintergrundfarbwert #7fffd4 | Schriftfarbe palevioletred | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#7fffd4 | #7fffd4 | #7fffd4 | #7fffd4 | #db7093 | #db7093 | #db7093 | #db7093 |
#91ffda | #91ffda | #6cdab5 | #6cdab5 | #e084a2 | #e084a2 | #bb607e | #bb607e |
#a3ffe0 | #a3ffe0 | #5ab697 | #5ab697 | #e598b1 | #e598b1 | #9c5069 | #9c5069 |
#b5ffe6 | #b5ffe6 | #489179 | #489179 | #eaadc1 | #eaadc1 | #7d4054 | #7d4054 |
#c8ffec | #c8ffec | #366d5a | #366d5a | #efc1d0 | #efc1d0 | #5d303f | #5d303f |
#dafff2 | #dafff2 | #24483c | #24483c | #f4d6e0 | #f4d6e0 | #3e202a | #3e202a |
#ecfff8 | #ecfff8 | #12241e | #12241e | #f9eaef | #f9eaef | #1f1015 | #1f1015 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
In diesem Beispiel umranden wir <center> mit einem . Den Hintergrund von <center> setzen wir auf Farbwert #7fffd4. Das ist in HTML nicht möglich. Wir verwenden deshalb CSS.
<style type="text/css"><!-- center { border:1pt ridge palevioletred; background-color:#7fffd4; } //--> </style>
Weiteres zum Thema können Sie in Grundlegende Gestaltungselemente in HTML lesen. Beschreibung vom hier verwendeten HTML-Tag <center>.
Die Hintergrundfarbe soll sich von Farbwert #7fffd4 auf Farbe palevioletred ändern, wenn man mit der Maus auf <p> zeigt. Bereiten wir zunächst die Darstellung von <p> in Farbwert #7fffd4 vor.
Als Beispiel ändern wir die Hintergrundfarbe von <p> auf Farbwert #7fffd4. Die Textfarbe behalten wir bei, setzen jedoch die Schriftart auf arial.
<style type="text/css"><!-- p { background-color: #7fffd4; font-family: arial; } //--> </style>Nun fordern wir, dass bei Berührung mit der Maus die Hintergrundfarbe auf palevioletred geändert wird.
<style type="text/css"><!-- p:hover { background-color:palevioletred; } //--> </style>
Weiteres zum Thema können Sie in Grundlegende Gestaltungselemente in HTML lesen. Die Beschreibung des Tag p finden Sie in der HTML Referenz unter <p>.