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 #ff4500 | Schriftfarbe darkorange | |||||
| Detail | : | Hintergrund #ff4500 | Detail | : | Schrift darkorange | |
| Farbwert | : | #ff4500 | Farbe | : | darkorange | |
| Farbe | : | orangered | Farbwert | : | #ff8c00 | |
| HTML | : | #ff4500 | HTML | : | darkorange | |
| HTML (Wert) | : | #ff4500 | HTML (Wert) | : | #ff8c00 | |
| CSS | : | #ff4500 | CSS | : | darkorange | |
| CSS (Wert) | : | #ff4500 | CSS (Wert) | : | #ff8c00 | |
| CSS (kürzest) | : | #ff4500 | CSS (kürzest) | : | #ff8c00 | |
| CSS (RGB) | : | rgb(255,69,0) | CSS (RGB) | : | rgb(255,140,0) | |
| CSS (%RGB) | : | rgb(100%,27%,0%) | CSS (%RGB) | : | rgb(100%,54%,0%) | |
Verlauf Hintergrundfarbwert #ff4500 nach Schriftfarbe darkorange | |||||||
| #ff4500 | #ff4f00 | #ff5900 | #ff6300 | #ff6d00 | #ff7700 | #ff8100 | #ff8c00 |
| #ff4500 | #ff4f00 | #ff5900 | #ff6300 | #ff6d00 | #ff7700 | #ff8100 | #ff8c00 |
Kombination von #ff4500 und darkorange | |||||||
| 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. | Auf Hintergrund #ff4500 ist darkorange ungeeignet. Die Unterschiede in der Helligkeit und Farbe sind unzureichend. Die Ähnlichkeit von darkorange und #ff4500 ergibt sich zu 92.98%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 7.02%. | ||||||
Hintergrundfarbwert #ff4500 | Schriftfarbe darkorange | ||||||
| Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
| #ff4500 | #ff4500 | #ff4500 | #ff4500 | #ff8c00 | #ff8c00 | #ff8c00 | #ff8c00 |
| #ff5f24 | #ff5f24 | #da3b00 | #da3b00 | #ff9c24 | #ff9c24 | #da7800 | #da7800 |
| #ff7a48 | #ff7a48 | #b63100 | #b63100 | #ffac48 | #ffac48 | #b66400 | #b66400 |
| #ff946d | #ff946d | #912700 | #912700 | #ffbd6d | #ffbd6d | #915000 | #915000 |
| #ffaf91 | #ffaf91 | #6d1d00 | #6d1d00 | #ffcd91 | #ffcd91 | #6d3c00 | #6d3c00 |
| #ffc9b6 | #ffc9b6 | #481300 | #481300 | #ffdeb6 | #ffdeb6 | #482800 | #482800 |
| #ffe4da | #ffe4da | #240900 | #240900 | #ffeeda | #ffeeda | #241400 | #241400 |
| #ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Einen Link erzeugt man mit Tag <a>. Diesen kann man farblich gestalten.
Die Farbe der Unterstreichung soll sich von Farbwert #ff4500 auf Farbe darkorange ändern, wenn man mit der Maus auf <a> zeigt. Wir bereiten zunächst eine Formatierung von <a> in Farbwert #ff4500 vor.
Beispielsweise unterstreichen wir <a> mit einem einfallenden Rahmen mit 3 Pixel Dicke in Farbwert #ff4500.
<style type="text/css"><!-- a { border-bottom:3px inset #ff4500; } //--> </style>Nun stellen wir ein, dass sich bei Berührung mit der Maus die Farbe der Unterstreichung zu darkorange ändert.
<style type="text/css"><!-- a: hover { border-bottom-color: darkorange; } //--> </style>
Die Idee ist dabei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu haben. Manchmal sieht man diesen Effekt bei Hyperlinks. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine "normale" Unterstreichung, der Text selbst ist nicht unterstrichen. Sie wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.
Mehr zum Thema können Sie in Verweise und Protokolle in HTML nachlesen. Weiteres zum Tag a erfahren Sie in der HTML Referenz unter <a>.