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.
Hintergrundfarbwert #ff7f50 | Schriftfarbe lightgoldenrodyellow | |||||
| Detail | : | Hintergrund #ff7f50 | Detail | : | Schrift lightgoldenrodyellow | |
| Farbwert | : | #ff7f50 | Farbe | : | lightgoldenrodyellow | |
| Farbe | : | coral | Farbwert | : | #fafad2 | |
| HTML | : | #ff7f50 | HTML | : | lightgoldenrodyellow | |
| HTML (Wert) | : | #ff7f50 | HTML (Wert) | : | #fafad2 | |
| CSS | : | #ff7f50 | CSS | : | lightgoldenrodyellow | |
| CSS (Wert) | : | #ff7f50 | CSS (Wert) | : | #fafad2 | |
| CSS (kürzest) | : | #ff7f50 | CSS (kürzest) | : | #fafad2 | |
| CSS (RGB) | : | rgb(255,127,80) | CSS (RGB) | : | rgb(250,250,210) | |
| CSS (%RGB) | : | rgb(100%,49%,31%) | CSS (%RGB) | : | rgb(98%,98%,82%) | |
Verlauf Hintergrundfarbwert #ff7f50 nach Schriftfarbe lightgoldenrodyellow | |||||||
| #ff7f50 | #fe9062 | #fda275 | #fcb387 | #fcc59a | #fbd6ac | #fae8bf | #fafad2 |
| #ff7f50 | #fe9062 | #fda275 | #fcb387 | #fcc59a | #fbd6ac | #fae8bf | #fafad2 |
Kombination von #ff7f50 und lightgoldenrodyellow | |||||||
| Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. | Die Ähnlichkeit von lightgoldenrodyellow und #ff7f50 beträgt 88.85%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 11.15%. Auf Hintergrund #ff7f50 ist lightgoldenrodyellow ungeeignet, da die Unterschiede in der Helligkeit und Farbe zu gering sind. | ||||||
Hintergrundfarbwert #ff7f50 | Schriftfarbe lightgoldenrodyellow | ||||||
| Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
| #ff7f50 | #ff7f50 | #ff7f50 | #ff7f50 | #fafad2 | #fafad2 | #fafad2 | #fafad2 |
| #ff9169 | #ff9169 | #da6c44 | #da6c44 | #fafad8 | #fafad8 | #d6d6b4 | #d6d6b4 |
| #ffa382 | #ffa382 | #b65a39 | #b65a39 | #fbfbde | #fbfbde | #b2b296 | #b2b296 |
| #ffb59b | #ffb59b | #91482d | #91482d | #fcfce5 | #fcfce5 | #8e8e78 | #8e8e78 |
| #ffc8b4 | #ffc8b4 | #6d3622 | #6d3622 | #fcfceb | #fcfceb | #6b6b5a | #6b6b5a |
| #ffdacd | #ffdacd | #482416 | #482416 | #fdfdf2 | #fdfdf2 | #47473c | #47473c |
| #ffece6 | #ffece6 | #24120b | #24120b | #fefef8 | #fefef8 | #23231e | #23231e |
| #ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Mit Tag <h5> wird eine Überschrift der 5. Stufe gesetzt. Diese kann farblich gestaltet werden.
Wir ändern für dieses Beispiel die Textfarbe von <h5> auf Farbe lightgoldenrodyellow und die Hintergrundfarbe von <h5> auf Farbwert #ff7f50. Die Schriftart setzen wir auf sans-serif und erhöhen die Schriftgröße auf 125%.
<style type="text/css"><!-- h5 { color: lightgoldenrodyellow; font-size: 125%; background-color: #ff7f50; font-family: sans-serif; } //--> </style>
Weiteres zu h5 lesen Sie in Grundlegende Gestaltungselemente in HTML. Der hier genutzte Tag h5 ist in der HTML Referenz unter <h5> genau zusammengestellt.
Die Hintergrundfarbe soll sich von Farbwert #ff7f50 auf Farbe lightgoldenrodyellow ändern, wenn man mit der Maus auf <em> zeigt. Bereiten wir zunächst die Darstellung von <em> in Farbwert #ff7f50 vor.
Wir setzen für dieses Beispiel bei <em> die Hintergrundfarbe auf Farbwert #ff7f50.
<style type="text/css"><!-- em { background-color: #ff7f50; } //--> </style>Nun stellen wir ein, dass sich bei Berührung mit der Maus die Hintergrundfarbe auf lightgoldenrodyellow ändert.
<style type="text/css"><!-- em:hover { background-color:lightgoldenrodyellow; } //--> </style>
Weiteres zu em können Sie in Text in HTML lesen. Einzelheiten des Befehl em erfahren Sie in der HTML Referenz unter <em>.