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 midnightblue | Schriftfarbwert #fffaf0 | |||||
Detail | : | Hintergrund midnightblue | Detail | : | Schrift #fffaf0 | |
Farbe | : | midnightblue | Farbwert | : | #fffaf0 | |
Farbwert | : | #191970 | Farbe | : | floralwhite | |
HTML | : | midnightblue | HTML | : | #fffaf0 | |
HTML (Wert) | : | #191970 | HTML (Wert) | : | #fffaf0 | |
CSS | : | midnightblue | CSS | : | #fffaf0 | |
CSS (Wert) | : | #191970 | CSS (Wert) | : | #fffaf0 | |
CSS (kürzest) | : | #191970 | CSS (kürzest) | : | #fffaf0 | |
CSS (RGB) | : | rgb(25,25,112) | CSS (RGB) | : | rgb(255,250,240) | |
CSS (%RGB) | : | rgb(9%,9%,43%) | CSS (%RGB) | : | rgb(100%,98%,94%) |
Verlauf Hintergrundfarbe midnightblue nach Schriftfarbwert #fffaf0 | |||||||
#191970 | #393982 | #5a5994 | #7b79a6 | #9c99b9 | #bdb9cb | #ded9dd | #fffaf0 |
#191970 | #393982 | #5a5994 | #7b79a6 | #9c99b9 | #bdb9cb | #ded9dd | #fffaf0 |
Kombination von midnightblue und #fffaf0 | |||||||
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. | Die Ähnlichkeit der Farben #fffaf0 und midnightblue ergibt sich zu 32.04%. Die Lesbarkeit dieser Kombination bewerte ich mit 67.96%. #fffaf0 eignet sich als Schriftfarbe auf Hintergrund midnightblue, weil sowohl der Unterschied in den Helligkeiten als auch der Unterschied in den Farben in Ordnung sind. |
Hintergrundfarbe midnightblue | Schriftfarbwert #fffaf0 | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#191970 | #191970 | #191970 | #191970 | #fffaf0 | #fffaf0 | #fffaf0 | #fffaf0 |
#393984 | #393984 | #151560 | #151560 | #fffaf2 | #fffaf2 | #dad6cd | #dad6cd |
#5a5a98 | #5a5a98 | #111150 | #111150 | #fffbf4 | #fffbf4 | #b6b2ab | #b6b2ab |
#7b7bad | #7b7bad | #0e0e40 | #0e0e40 | #fffcf6 | #fffcf6 | #918e89 | #918e89 |
#9c9cc1 | #9c9cc1 | #0a0a30 | #0a0a30 | #fffcf8 | #fffcf8 | #6d6b66 | #6d6b66 |
#bdbdd6 | #bdbdd6 | #070720 | #070720 | #fffdfa | #fffdfa | #484744 | #484744 |
#dedeea | #dedeea | #030310 | #030310 | #fffefc | #fffefc | #242322 | #242322 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Die Rahmenfarbe soll sich von Farbe midnightblue auf Farbwert #fffaf0 ändern, wenn man mit der Maus auf <img> zeigt. Bereiten wir zunächst die Darstellung von <img> in Farbe midnightblue vor.
In diesem Beispiel umranden wir <img> mit einem 4 Pixel dicken, herausstehenden Rahmen in Farbe midnightblue.
<style type="text/css"><!-- img { border:4px outset midnightblue; } //--> </style>Jetzt fordern wir, dass sich bei Hover die Rahmenfarbe auf #fffaf0 ändert.
<style type="text/css"><!-- img: hover { border-color: #fffaf0; } //--> </style>
Weiteres zu img können Sie in Grafik in HTML lesen. Mehr zum hier genutzten Befehl <img>.
Die Unterstreichungsfarbe soll sich von Farbe midnightblue auf Farbwert #fffaf0 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <em> in Farbe midnightblue vor.
Hier unterstreichen wir <em> mit einem gezahnten Rahmen mit 1 Pixel Dicke in Farbe midnightblue.
<style type="text/css"><!-- em { border-bottom:1px ridge midnightblue; } //--> </style>Nun stellen wir ein, dass sich bei Hover die Unterstreichungsfarbe zu #fffaf0 ändert.
<style type="text/css"><!-- em:hover { border-bottom-color:#fffaf0; } //--> </style>
Die Idee ist dabei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sehen Sie dies bei Verweisen. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Dies ist aber keine normale Unterstreichung, der Text selbst ist gar nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.
Mehr zum Thema lesen Sie in Text in HTML. Einzelheiten des HTML-Befehl em finden Sie in der HTML Referenz unter <em>.