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, einem bestimmten Schema folgenden, Farbwerten, definierte man noch 120 Werte und ordnete ihnen Namen zu. Zusammen mit den 17 Standard-HTML-Farben, die ebenfalls Namen haben, ergeben sich so 137 HTML Farbnamen.
Hintergrundfarbwert #f5f5f5 | Schriftfarbe saddlebrown | |||||
| Detail | : | Hintergrund #f5f5f5 | Detail | : | Schrift saddlebrown | |
| Farbwert | : | #f5f5f5 | Farbe | : | saddlebrown | |
| Farbe | : | whitesmoke | Farbwert | : | #8b4513 | |
| HTML | : | #f5f5f5 | HTML | : | saddlebrown | |
| HTML (Wert) | : | #f5f5f5 | HTML (Wert) | : | #8b4513 | |
| CSS | : | #f5f5f5 | CSS | : | saddlebrown | |
| CSS (Wert) | : | #f5f5f5 | CSS (Wert) | : | #8b4513 | |
| CSS (kürzest) | : | #f5f5f5 | CSS (kürzest) | : | #8b4513 | |
| CSS (RGB) | : | rgb(245,245,245) | CSS (RGB) | : | rgb(139,69,19) | |
| CSS (%RGB) | : | rgb(96%,96%,96%) | CSS (%RGB) | : | rgb(54%,27%,7%) | |
Verlauf Hintergrundfarbwert #f5f5f5 nach Schriftfarbe saddlebrown | |||||||
| #f5f5f5 | #e5dbd4 | #d6c2b4 | #c7a994 | #b89073 | #a97753 | #9a5e33 | #8b4513 |
| #f5f5f5 | #e5dbd4 | #d6c2b4 | #c7a994 | #b89073 | #a97753 | #9a5e33 | #8b4513 |
Kombination von #f5f5f5 und saddlebrown | |||||||
| Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. | saddlebrown eignet sich als Schriftfarbe auf Hintergrund #f5f5f5, da die Unterschiede in Helligkeit und Farbe ok sind. Die Ähnlichkeit der Farben saddlebrown und #f5f5f5 ergibt sich zu 69.00%. Die Lesbarkeit dieser Kombination bewerte ich mit 31.00%. | ||||||
Hintergrundfarbwert #f5f5f5 | Schriftfarbe saddlebrown | ||||||
| Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
| #f5f5f5 | #f5f5f5 | #f5f5f5 | #f5f5f5 | #8b4513 | #8b4513 | #8b4513 | #8b4513 |
| #f6f6f6 | #f6f6f6 | #d2d2d2 | #d2d2d2 | #9b5f34 | #9b5f34 | #773b10 | #773b10 |
| #f7f7f7 | #f7f7f7 | #afafaf | #afafaf | #ac7a56 | #ac7a56 | #63310d | #63310d |
| #f9f9f9 | #f9f9f9 | #8c8c8c | #8c8c8c | #bc9478 | #bc9478 | #4f270a | #4f270a |
| #fafafa | #fafafa | #696969 | #696969 | #cdaf99 | #cdaf99 | #3b1d08 | #3b1d08 |
| #fcfcfc | #fcfcfc | #464646 | #464646 | #ddc9bb | #ddc9bb | #271305 | #271305 |
| #fdfdfd | #fdfdfd | #232323 | #232323 | #eee4dd | #eee4dd | #130902 | #130902 |
| #ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Die Textfarbe soll sich von Farbwert #f5f5f5 auf Farbe saddlebrown ändern, wenn man mit der Maus auf <blockquote> zeigt. Bereiten wir zunächst die Darstellung von <blockquote> in Farbwert #f5f5f5 vor.
Als Beispiel legen wir Farbwert #f5f5f5 als Textfarbe von <blockquote> fest und verringern die Größe der Schrift auf 99%:
<style type="text/css"><!-- blockquote { color:#f5f5f5; font-size:99%; } //--> </style>Nun fordern wir, dass bei Hover die Textfarbe auf saddlebrown geändert wird.
<style type="text/css"><!-- blockquote:hover { color:saddlebrown; } //--> </style>
Mehr zum Thema blockquote können Sie in Blockorientierte Elemente in HTML lesen. Einzelheiten vom HTML-Befehl blockquote sind in der HTML Referenz unter <blockquote> genau gezeigt.
In diesem Beispiel umranden wir <dd> mit einem 2 Punkte dicken, einfallenden Rahmen in Farbe saddlebrown . Den Hintergrund von <dd> setzen wir auf Farbwert #f5f5f5. Mit HTML geht das kaum. Wir nutzen daher CSS zur Formatierung.
<style type="text/css"><!-- dd { border:2pt inset saddlebrown; background-color:#f5f5f5; } //--> </style>
Weiteres zum Thema dd finden Sie in Listen und Glossare in HTML. Einzelheiten des hier gezeigten HTML-Befehl dd sind in der HTML Referenz unter <dd> ausführlich zusammengestellt.