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 orchid | Schriftfarbe moccasin | |||||
Detail | : | Hintergrund orchid | Detail | : | Schrift moccasin | |
Farbe | : | orchid | Farbe | : | moccasin | |
Farbwert | : | #da70d6 | Farbwert | : | #ffe4b5 | |
HTML | : | orchid | HTML | : | moccasin | |
HTML (Wert) | : | #da70d6 | HTML (Wert) | : | #ffe4b5 | |
CSS | : | orchid | CSS | : | moccasin | |
CSS (Wert) | : | #da70d6 | CSS (Wert) | : | #ffe4b5 | |
CSS (kürzest) | : | #da70d6 | CSS (kürzest) | : | #ffe4b5 | |
CSS (RGB) | : | rgb(218,112,214) | CSS (RGB) | : | rgb(255,228,181) | |
CSS (%RGB) | : | rgb(85%,43%,83%) | CSS (%RGB) | : | rgb(100%,89%,70%) |
Verlauf Hintergrundfarbe orchid nach Schriftfarbe moccasin | |||||||
#da70d6 | #df80d1 | #e491cc | #e9a1c7 | #efb2c3 | #f4c2be | #f9d3b9 | #ffe4b5 |
#da70d6 | #df80d1 | #e491cc | #e9a1c7 | #efb2c3 | #f4c2be | #f9d3b9 | #ffe4b5 |
Kombination von orchid und moccasin | |||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. | moccasin ist nicht als Schriftfarbe auf Hintergrund orchid geeignet, weil sich die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit von moccasin und orchid ergibt sich zu 88.85%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 11.15%. |
Hintergrundfarbe orchid | Schriftfarbe moccasin | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#da70d6 | #da70d6 | #da70d6 | #da70d6 | #ffe4b5 | #ffe4b5 | #ffe4b5 | #ffe4b5 |
#df84db | #df84db | #ba60b7 | #ba60b7 | #ffe7bf | #ffe7bf | #dac39b | #dac39b |
#e498e1 | #e498e1 | #9b5098 | #9b5098 | #ffebca | #ffebca | #b6a281 | #b6a281 |
#e9ade7 | #e9ade7 | #7c407a | #7c407a | #ffefd4 | #ffefd4 | #918267 | #918267 |
#efc1ed | #efc1ed | #5d305b | #5d305b | #fff3df | #fff3df | #6d614d | #6d614d |
#f4d6f3 | #f4d6f3 | #3e203d | #3e203d | #fff7e9 | #fff7e9 | #484133 | #484133 |
#f9eaf9 | #f9eaf9 | #1f101e | #1f101e | #fffbf4 | #fffbf4 | #242019 | #242019 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Die Rahmenfarbe soll sich von Farbe orchid auf Farbe moccasin ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Darstellung von <img> in Farbe orchid vor.
In diesem Beispiel umranden wir <img> mit einem 1 Pixel dicken, herausstehenden Rahmen in Farbe orchid.
<style type="text/css"><!-- img { border-color:orchid; border-width:1px; border-style:outset; } //--> </style>Jetzt stellen wir ein, dass sich bei Hover die Rahmenfarbe zu moccasin ändert.
<style type="text/css"><!-- img:hover { border-color:moccasin; } //--> </style>
Weiteres zu img können Sie in Grafik in HTML finden. Einzelheiten des Befehl img finden Sie in der HTML Referenz unter <img>.
Eine Überschrift wird mit Tag <h4> gesetzt. Diese kann farblich gestaltet und hervorgehoben werden.
Wir ändern für dieses Beispiel die Textfarbe von <h4> auf Farbe moccasin und die Hintergrundfarbe von <h4> auf Farbe orchid. Als Schriftart setzen wir sans-serif. Die Schriftgröße verringern wir auf 87%.
<style type="text/css"><!-- h4 { color: moccasin; font-family: sans-serif; background-color: orchid; font-size: 87%; } //--> </style>
Weiteres zum Thema h4 können Sie in Grundlegende Gestaltungselemente in HTML nachlesen. Mehr zum HTML-Befehl h4 ist in der HTML Referenz bei <h4> zusammengestellt.