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 #fafad2 | Schriftfarbe lightskyblue | |||||
Detail | : | Hintergrund #fafad2 | Detail | : | Schrift lightskyblue | |
Farbwert | : | #fafad2 | Farbe | : | lightskyblue | |
Farbe | : | lightgoldenrodyellow | Farbwert | : | #87cefa | |
HTML | : | #fafad2 | HTML | : | lightskyblue | |
HTML (Wert) | : | #fafad2 | HTML (Wert) | : | #87cefa | |
CSS | : | #fafad2 | CSS | : | lightskyblue | |
CSS (Wert) | : | #fafad2 | CSS (Wert) | : | #87cefa | |
CSS (kürzest) | : | #fafad2 | CSS (kürzest) | : | #87cefa | |
CSS (RGB) | : | rgb(250,250,210) | CSS (RGB) | : | rgb(135,206,250) | |
CSS (%RGB) | : | rgb(98%,98%,82%) | CSS (%RGB) | : | rgb(52%,80%,98%) |
Verlauf Hintergrundfarbwert #fafad2 nach Schriftfarbe lightskyblue | |||||||
#fafad2 | #e9f3d7 | #d9eddd | #c8e7e3 | #b8e0e8 | #a7daee | #97d4f4 | #87cefa |
#fafad2 | #e9f3d7 | #d9eddd | #c8e7e3 | #b8e0e8 | #a7daee | #97d4f4 | #87cefa |
Kombination von #fafad2 und lightskyblue | |||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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 lightskyblue und #fafad2 ergibt sich zu 92.35%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 7.65%. Auf Hintergrund #fafad2 ist lightskyblue ungeeignet, weil sich die Helligkeit und Farben zu ähnlich sind. |
Hintergrundfarbwert #fafad2 | Schriftfarbe lightskyblue | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#fafad2 | #fafad2 | #fafad2 | #fafad2 | #87cefa | #87cefa | #87cefa | #87cefa |
#fafad8 | #fafad8 | #d6d6b4 | #d6d6b4 | #98d5fa | #98d5fa | #73b0d6 | #73b0d6 |
#fbfbde | #fbfbde | #b2b296 | #b2b296 | #a9dcfb | #a9dcfb | #6093b2 | #6093b2 |
#fcfce5 | #fcfce5 | #8e8e78 | #8e8e78 | #bae3fc | #bae3fc | #4d758e | #4d758e |
#fcfceb | #fcfceb | #6b6b5a | #6b6b5a | #cbeafc | #cbeafc | #39586b | #39586b |
#fdfdf2 | #fdfdf2 | #47473c | #47473c | #dcf1fd | #dcf1fd | #263a47 | #263a47 |
#fefef8 | #fefef8 | #23231e | #23231e | #edf8fe | #edf8fe | #131d23 | #131d23 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Für dieses Beispiel umranden wir <button> mit einem 5 Punkte dicken, doppelten Rahmen in Farbe lightskyblue . Den Hintergrund von <button> setzen wir entsprechend auf Farbwert #fafad2. Das ist mit HTML kaum möglich. Daher formatieren wir hier mit CSS.
<style type="text/css"><!-- button { border:5pt double lightskyblue; background-color:#fafad2; } //--> </style>
Weiteres zum Thema button lesen Sie in Formulare in HTML. Der HTML-Tag button ist in der HTML Referenz bei <button> gezeigt.
Hier ändern wir die Textfarbe von <pre> auf Farbe lightskyblue und die Hintergrundfarbe von <pre> auf Farbwert #fafad2. Als Schriftart setzen wir courier new. Als Schriftgröße wählen wir 13px.
<style type="text/css"><!-- pre { color: lightskyblue; background-color: #fafad2; font-size: 13px; font-family: courier new; } //--> </style>
Weiteres zu pre lesen Sie in Blockorientierte Elemente in HTML. Mehr zum Befehl pre ist in der HTML Referenz bei <pre> gezeigt.