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 palevioletred | Schriftfarbe gainsboro | |||||
Detail | : | Hintergrund palevioletred | Detail | : | Schrift gainsboro | |
Farbe | : | palevioletred | Farbe | : | gainsboro | |
Farbwert | : | #db7093 | Farbwert | : | #dcdcdc | |
HTML | : | palevioletred | HTML | : | gainsboro | |
HTML (Wert) | : | #db7093 | HTML (Wert) | : | #dcdcdc | |
CSS | : | palevioletred | CSS | : | gainsboro | |
CSS (Wert) | : | #db7093 | CSS (Wert) | : | #dcdcdc | |
CSS (kürzest) | : | #db7093 | CSS (kürzest) | : | #dcdcdc | |
CSS (RGB) | : | rgb(219,112,147) | CSS (RGB) | : | rgb(220,220,220) | |
CSS (%RGB) | : | rgb(85%,43%,57%) | CSS (%RGB) | : | rgb(86%,86%,86%) |
Verlauf Hintergrundfarbe palevioletred nach Schriftfarbe gainsboro | |||||||
#db7093 | #db7f9d | #db8ea7 | #db9eb2 | #dbadbc | #dbbdc7 | #dbccd1 | #dcdcdc |
#db7093 | #db7f9d | #db8ea7 | #db9eb2 | #dbadbc | #dbbdc7 | #dbccd1 | #dcdcdc |
Kombination von palevioletred und gainsboro | |||||||
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. | Auf Hintergrund palevioletred ist gainsboro ungeeignet. Die Unterschiede in der Helligkeit und Farbe sind nicht ausreichend. Die Ähnlichkeit der Farben gainsboro und palevioletred ergibt sich zu 89.20%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 10.80%. |
Hintergrundfarbe palevioletred | Schriftfarbe gainsboro | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#db7093 | #db7093 | #db7093 | #db7093 | #dcdcdc | #dcdcdc | #dcdcdc | #dcdcdc |
#e084a2 | #e084a2 | #bb607e | #bb607e | #e1e1e1 | #e1e1e1 | #bcbcbc | #bcbcbc |
#e598b1 | #e598b1 | #9c5069 | #9c5069 | #e6e6e6 | #e6e6e6 | #9d9d9d | #9d9d9d |
#eaadc1 | #eaadc1 | #7d4054 | #7d4054 | #ebebeb | #ebebeb | #7d7d7d | #7d7d7d |
#efc1d0 | #efc1d0 | #5d303f | #5d303f | #f0f0f0 | #f0f0f0 | #5e5e5e | #5e5e5e |
#f4d6e0 | #f4d6e0 | #3e202a | #3e202a | #f5f5f5 | #f5f5f5 | #3e3e3e | #3e3e3e |
#f9eaef | #f9eaef | #1f1015 | #1f1015 | #fafafa | #fafafa | #1f1f1f | #1f1f1f |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Man spricht von einem so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Er unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <td> mit den Hintergrundfarben Farbe palevioletred und Farbe gainsboro.
<style type="text/css"><!-- td.ger { background-color: palevioletred; } td.ung { background-color:gainsboro; } //--> </style>
Diese Klassen werden abwechselnd verwendet.
<table> <tr><td class="ger"><tt>A~A</td><td class="ung"></tt>B~A</td><td class="ger"><tt>C~A</td></tr> <tr><td class="ger"></tt>A~B</td><td class="ung"><tt>B~B</td><td class="ger"></tt>C~B</td></tr> <tr><td class="ger"><tt>A~C</td><td class="ung"></tt>B~C</td><td class="ger">@C~C</td></tr> </table>
Weiteres zum Thema können Sie in Tabellen in HTML erfahren. Zur Beschreibung des Tag <td>.
Einen Hyperlink erzeugen Sie mit Befehl <a>. Diesen kann man hervorheben und farblich gestalten.
Die Rahmenfarbe soll sich von Farbe palevioletred auf Farbe gainsboro ändern, wenn man mit der Maus auf <a> zeigt. Wir bereiten zunächst eine Formatierung von <a> in Farbe palevioletred vor.
In diesem Beispiel umranden wir <a> mit einem 3 Pixel dicken, herausstehenden Rahmen in Farbe palevioletred.
<style type="text/css"><!-- a { border:3px outset palevioletred; } //--> </style>Jetzt stellen wir ein, dass sich bei Berührung mit der Maus die Rahmenfarbe auf gainsboro ändert.
<style type="text/css"><!-- a:hover { border-color:gainsboro; } //--> </style>
Weiteres zu a können Sie in Verweise und Protokolle in HTML nachsehen. Zur Beschreibung vom hier gezeigten HTML-Befehl <a>.