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 papayawhip | Schriftfarbe darkorange | |||||
| Detail | : | Hintergrund papayawhip | Detail | : | Schrift darkorange | |
| Farbe | : | papayawhip | Farbe | : | darkorange | |
| Farbwert | : | #ffefd5 | Farbwert | : | #ff8c00 | |
| HTML | : | papayawhip | HTML | : | darkorange | |
| HTML (Wert) | : | #ffefd5 | HTML (Wert) | : | #ff8c00 | |
| CSS | : | papayawhip | CSS | : | darkorange | |
| CSS (Wert) | : | #ffefd5 | CSS (Wert) | : | #ff8c00 | |
| CSS (kürzest) | : | #ffefd5 | CSS (kürzest) | : | #ff8c00 | |
| CSS (RGB) | : | rgb(255,239,213) | CSS (RGB) | : | rgb(255,140,0) | |
| CSS (%RGB) | : | rgb(100%,93%,83%) | CSS (%RGB) | : | rgb(100%,54%,0%) | |
Verlauf Hintergrundfarbe papayawhip nach Schriftfarbe darkorange | |||||||
| #ffefd5 | #ffe0b6 | #ffd298 | #ffc479 | #ffb65b | #ffa83c | #ff9a1e | #ff8c00 |
| #ffefd5 | #ffe0b6 | #ffd298 | #ffc479 | #ffb65b | #ffa83c | #ff9a1e | #ff8c00 |
Kombination von papayawhip und darkorange | |||||||
| Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras id velit ante. | Auf Hintergrund papayawhip ist darkorange ungeeignet, da weder der Helligkeitsunterschied noch der Farbunterschied gross genug sind. Die Ähnlichkeit von darkorange und papayawhip ergibt sich zu 90.18%. Die Lesbarkeit dieser Farbkombination liegt damit bei 9.82%. | ||||||
Hintergrundfarbe papayawhip | Schriftfarbe darkorange | ||||||
| Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
| #ffefd5 | #ffefd5 | #ffefd5 | #ffefd5 | #ff8c00 | #ff8c00 | #ff8c00 | #ff8c00 |
| #fff1db | #fff1db | #daccb6 | #daccb6 | #ff9c24 | #ff9c24 | #da7800 | #da7800 |
| #fff3e1 | #fff3e1 | #b6aa98 | #b6aa98 | #ffac48 | #ffac48 | #b66400 | #b66400 |
| #fff5e7 | #fff5e7 | #918879 | #918879 | #ffbd6d | #ffbd6d | #915000 | #915000 |
| #fff8ed | #fff8ed | #6d665b | #6d665b | #ffcd91 | #ffcd91 | #6d3c00 | #6d3c00 |
| #fffaf3 | #fffaf3 | #48443c | #48443c | #ffdeb6 | #ffdeb6 | #482800 | #482800 |
| #fffcf9 | #fffcf9 | #24221e | #24221e | #ffeeda | #ffeeda | #241400 | #241400 |
| #ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Die Rahmenfarbe soll sich von Farbe papayawhip auf Farbe darkorange ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <blockquote> in Farbe papayawhip vor.
In diesem Beispiel umranden wir <blockquote> mit einem 3 Pixel dicken, gezahnten Rahmen in Farbe papayawhip.
<style type="text/css"><!-- blockquote { border:3px ridge papayawhip; } //--> </style>Nun stellen wir ein, dass sich bei Mausberührung die Rahmenfarbe zu darkorange ändert.
<style type="text/css"><!-- blockquote:hover { border-color:darkorange; } //--> </style>
Weiteres zu blockquote erfahren Sie in Blockorientierte Elemente in HTML. Mehr zum hier gezeigten Tag blockquote lesen Sie in der HTML Referenz unter <blockquote>.