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 deepskyblue | Schriftfarbe ghostwhite | |||||
Detail | : | Hintergrund deepskyblue | Detail | : | Schrift ghostwhite | |
Farbe | : | deepskyblue | Farbe | : | ghostwhite | |
Farbwert | : | #00bfff | Farbwert | : | #f8f8ff | |
HTML | : | deepskyblue | HTML | : | ghostwhite | |
HTML (Wert) | : | #00bfff | HTML (Wert) | : | #f8f8ff | |
CSS | : | deepskyblue | CSS | : | ghostwhite | |
CSS (Wert) | : | #00bfff | CSS (Wert) | : | #f8f8ff | |
CSS (kürzest) | : | #00bfff | CSS (kürzest) | : | #f8f8ff | |
CSS (RGB) | : | rgb(0,191,255) | CSS (RGB) | : | rgb(248,248,255) | |
CSS (%RGB) | : | rgb(0%,74%,100%) | CSS (%RGB) | : | rgb(97%,97%,100%) |
Verlauf Hintergrundfarbe deepskyblue nach Schriftfarbe ghostwhite | |||||||
#00bfff | #23c7ff | #46cfff | #6ad7ff | #8ddfff | #b1e7ff | #d4efff | #f8f8ff |
#00bfff | #23c7ff | #46cfff | #6ad7ff | #8ddfff | #b1e7ff | #d4efff | #f8f8ff |
Kombination von deepskyblue und ghostwhite | |||||||
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras vestibulum tristique erat, ac interdum justo cursus in. | ghostwhite eignet sich nicht als Schriftfarbe auf Hintergrund deepskyblue. Die Unterschiede in der Helligkeit und Farbe sind zu gering. Die Ähnlichkeit von ghostwhite und deepskyblue ergibt sich zu 90.44%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 9.56%. |
Hintergrundfarbe deepskyblue | Schriftfarbe ghostwhite | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#00bfff | #00bfff | #00bfff | #00bfff | #f8f8ff | #f8f8ff | #f8f8ff | #f8f8ff |
#24c8ff | #24c8ff | #00a3da | #00a3da | #f9f9ff | #f9f9ff | #d4d4da | #d4d4da |
#48d1ff | #48d1ff | #0088b6 | #0088b6 | #fafaff | #fafaff | #b1b1b6 | #b1b1b6 |
#6ddaff | #6ddaff | #006d91 | #006d91 | #fbfbff | #fbfbff | #8d8d91 | #8d8d91 |
#91e3ff | #91e3ff | #00516d | #00516d | #fcfcff | #fcfcff | #6a6a6d | #6a6a6d |
#b6ecff | #b6ecff | #003648 | #003648 | #fdfdff | #fdfdff | #464648 | #464648 |
#daf5ff | #daf5ff | #001b24 | #001b24 | #fefeff | #fefeff | #232324 | #232324 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Einen Verweis setzen Sie mit HTML-Tag <a>. Dieser kann farblich gestaltet und hervorgehoben werden.
Die Hintergrundfarbe soll sich von Farbe deepskyblue auf Farbe ghostwhite ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <a> in Farbe deepskyblue vor.
Wir legen in diesem Beispiel Farbe deepskyblue als Hintergrundfarbe von <a> fest. Zwar verändern wir die Textfarbe nicht, ändern jedoch die Schriftart auf sans-serif und setzen die Schriftgröße auf 86%.
<style type="text/css"><!-- a { font-family:sans-serif; background-color:deepskyblue; font-size:86%; } //--> </style>Nun stellen wir ein, dass bei Berührung mit der Maus die Hintergrundfarbe auf ghostwhite geändert wird.
<style type="text/css"><!-- a:hover { background-color:ghostwhite; } //--> </style>
Mehr zum Thema a erfahren Sie in Verweise und Protokolle in HTML. Mehr zum Tag a ist in der HTML Referenz bei <a> genau beschrieben.
Die Textfarbe soll sich von Farbe deepskyblue auf Farbe ghostwhite ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <pre> in Farbe deepskyblue vor.
Wir ändern in diesem Beispiel die Textfarbe von <pre> auf Farbe deepskyblue und setzen die Größe der Schrift auf 13px:
<style type="text/css"><!-- pre { color:deepskyblue; font-size:13px; } //--> </style>Jetzt stellen wir ein, dass sich bei Hover die Textfarbe auf ghostwhite ändert.
<style type="text/css"><!-- pre:hover { color:ghostwhite; } //--> </style>
Weiteres zu pre können Sie in Blockorientierte Elemente in HTML nachlesen. Die Beschreibung des HTML-Befehl pre lesen Sie in der HTML Referenz unter <pre>.