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 #d2691e | Schriftfarbe lightgoldenrodyellow | |||||
Detail | : | Hintergrund #d2691e | Detail | : | Schrift lightgoldenrodyellow | |
Farbwert | : | #d2691e | Farbe | : | lightgoldenrodyellow | |
Farbe | : | chocolate | Farbwert | : | #fafad2 | |
HTML | : | #d2691e | HTML | : | lightgoldenrodyellow | |
HTML (Wert) | : | #d2691e | HTML (Wert) | : | #fafad2 | |
CSS | : | #d2691e | CSS | : | lightgoldenrodyellow | |
CSS (Wert) | : | #d2691e | CSS (Wert) | : | #fafad2 | |
CSS (kürzest) | : | #d2691e | CSS (kürzest) | : | #fafad2 | |
CSS (RGB) | : | rgb(210,105,30) | CSS (RGB) | : | rgb(250,250,210) | |
CSS (%RGB) | : | rgb(82%,41%,11%) | CSS (%RGB) | : | rgb(98%,98%,82%) |
Verlauf Hintergrundfarbwert #d2691e nach Schriftfarbe lightgoldenrodyellow | |||||||
#d2691e | #d77d37 | #dd9251 | #e3a76b | #e8bb84 | #eed09e | #f4e5b8 | #fafad2 |
#d2691e | #d77d37 | #dd9251 | #e3a76b | #e8bb84 | #eed09e | #f4e5b8 | #fafad2 |
Kombination von #d2691e und lightgoldenrodyellow | |||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. 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. | lightgoldenrodyellow ist nicht als Schriftfarbe auf Hintergrund #d2691e geeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind gross genug. Die Ähnlichkeit von lightgoldenrodyellow und #d2691e ergibt sich zu 83.79%. Die Lesbarkeit dieser Farbkombination liegt damit bei 16.21%. |
Hintergrundfarbwert #d2691e | Schriftfarbe lightgoldenrodyellow | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#d2691e | #d2691e | #d2691e | #d2691e | #fafad2 | #fafad2 | #fafad2 | #fafad2 |
#d87e3e | #d87e3e | #b45a19 | #b45a19 | #fafad8 | #fafad8 | #d6d6b4 | #d6d6b4 |
#de935e | #de935e | #964b15 | #964b15 | #fbfbde | #fbfbde | #b2b296 | #b2b296 |
#e5a97e | #e5a97e | #783c11 | #783c11 | #fcfce5 | #fcfce5 | #8e8e78 | #8e8e78 |
#ebbe9e | #ebbe9e | #5a2d0c | #5a2d0c | #fcfceb | #fcfceb | #6b6b5a | #6b6b5a |
#f2d4be | #f2d4be | #3c1e08 | #3c1e08 | #fdfdf2 | #fdfdf2 | #47473c | #47473c |
#f8e9de | #f8e9de | #1e0f04 | #1e0f04 | #fefef8 | #fefef8 | #23231e | #23231e |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
In diesem Beispiel umranden wir <p> mit einem gestrichelten, 5 Pixel dicken Rahmen in Farbe lightgoldenrodyellow . Die Hintergrundfarbe für <p> setzen wir auf Farbwert #d2691e. Dies ist in HTML kaum möglich. Wir verwenden daher CSS.
<style type="text/css"><!-- p { border-width:5px; border-color:lightgoldenrodyellow; background-color:#d2691e; border-style:dashed; } //--> </style>
Weiteres zu p können Sie in Grundlegende Gestaltungselemente in HTML lesen. Beschreibung vom HTML-Tag <p>.
Für dieses Beispiel ändern wir die Textfarbe von <col> auf Farbe lightgoldenrodyellow und die Hintergrundfarbe von <col> auf Farbwert #d2691e. Als Schriftart wählen wir monospace und als Schriftgröße setzen wir 128%.
<style type="text/css"><!-- col { color:lightgoldenrodyellow; font-size:128%; font-family:monospace; background-color:#d2691e; } //--> </style>
Mehr zu col können Sie in Tabellen in HTML erfahren. Weiteres zum hier verwendeten Tag col ist in der HTML Referenz bei <col> genau gezeigt.