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 #20b2aa | Schriftfarbwert #228b22 | |||||
Detail | : | Hintergrund #20b2aa | Detail | : | Schrift #228b22 | |
Farbwert | : | #20b2aa | Farbwert | : | #228b22 | |
Farbe | : | lightseagreen | Farbe | : | forestgreen | |
HTML | : | #20b2aa | HTML | : | #228b22 | |
HTML (Wert) | : | #20b2aa | HTML (Wert) | : | #228b22 | |
CSS | : | #20b2aa | CSS | : | #228b22 | |
CSS (Wert) | : | #20b2aa | CSS (Wert) | : | #228b22 | |
CSS (kürzest) | : | #20b2aa | CSS (kürzest) | : | #228b22 | |
CSS (RGB) | : | rgb(32,178,170) | CSS (RGB) | : | rgb(34,139,34) | |
CSS (%RGB) | : | rgb(12%,69%,66%) | CSS (%RGB) | : | rgb(13%,54%,13%) |
Verlauf Hintergrundfarbwert #20b2aa nach Schriftfarbwert #228b22 | |||||||
#20b2aa | #20ac96 | #20a683 | #20a16f | #219b5c | #219648 | #219035 | #228b22 |
#20b2aa | #20ac96 | #20a683 | #20a16f | #219b5c | #219648 | #219035 | #228b22 |
Kombination von #20b2aa und #228b22 | |||||||
Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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. | Die Ähnlichkeit der Farben #228b22 und #20b2aa ergibt sich zu 92.03%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 7.97%. Auf Hintergrund #20b2aa ist #228b22 ungeeignet, weil weder der Helligkeitsunterschied noch der Farbunterschied gross genug sind. |
Hintergrundfarbwert #20b2aa | Schriftfarbwert #228b22 | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#20b2aa | #20b2aa | #20b2aa | #20b2aa | #228b22 | #228b22 | #228b22 | #228b22 |
#3fbdb6 | #3fbdb6 | #1b9891 | #1b9891 | #419b41 | #419b41 | #1d771d | #1d771d |
#5fc8c2 | #5fc8c2 | #167f79 | #167f79 | #61ac61 | #61ac61 | #186318 | #186318 |
#7fd3ce | #7fd3ce | #126561 | #126561 | #80bc80 | #80bc80 | #134f13 | #134f13 |
#9fdeda | #9fdeda | #0d4c48 | #0d4c48 | #a0cda0 | #a0cda0 | #0e3b0e | #0e3b0e |
#bfe9e6 | #bfe9e6 | #093230 | #093230 | #bfddbf | #bfddbf | #092709 | #092709 |
#dff4f2 | #dff4f2 | #041918 | #041918 | #dfeedf | #dfeedf | #041304 | #041304 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Bei diesem Beispiel umranden wir <dd> mit einem 3 Pixel dicken, einfallenden Rahmen in Farbwert #228b22 . Den Hintergrund von <dd> färben wir mit Farbwert #20b2aa. Das ist in HTML so kaum möglich. Wir verwenden deshalb CSS.
<style type="text/css"><!-- dd { border:3px inset #228b22; background-color:#20b2aa; } //--> </style>
Mehr zum Thema dd erfahren Sie in Listen und Glossare in HTML. Beschreibung des hier gezeigten HTML-Befehl <dd>.
Hier ändern wir die Textfarbe von <ins> auf Farbwert #228b22 und die Hintergrundfarbe von <ins> auf Farbwert #20b2aa. Als Schriftart setzen wir arial und als Schriftgröße wählen wir 82%.
<style type="text/css"><!-- ins { background-color:#20b2aa; font-size:82%; font-family:arial; color:#228b22; } //--> </style>
Die Beschreibung des HTML-Befehl ins lesen Sie in der HTML Referenz unter <ins>.