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 violet | Schriftfarbwert #228b22 | |||||
| Detail | : | Hintergrund violet | Detail | : | Schrift #228b22 | |
| Farbe | : | violet | Farbwert | : | #228b22 | |
| Farbwert | : | #ee82ee | Farbe | : | forestgreen | |
| HTML | : | violet | HTML | : | #228b22 | |
| HTML (Wert) | : | #ee82ee | HTML (Wert) | : | #228b22 | |
| CSS | : | violet | CSS | : | #228b22 | |
| CSS (Wert) | : | #ee82ee | CSS (Wert) | : | #228b22 | |
| CSS (kürzest) | : | #ee82ee | CSS (kürzest) | : | #228b22 | |
| CSS (RGB) | : | rgb(238,130,238) | CSS (RGB) | : | rgb(34,139,34) | |
| CSS (%RGB) | : | rgb(93%,50%,93%) | CSS (%RGB) | : | rgb(13%,54%,13%) | |
Verlauf Hintergrundfarbe violet nach Schriftfarbwert #228b22 | |||||||
| #ee82ee | #d083d0 | #b384b3 | #968596 | #798779 | #5c885c | #3f893f | #228b22 |
| #ee82ee | #d083d0 | #b384b3 | #968596 | #798779 | #5c885c | #3f893f | #228b22 |
Kombination von violet und #228b22 | |||||||
| 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. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Auf Hintergrund violet ist #228b22 ungeeignet. Die Helligkeit und Farben sind sich zu ähnlich. Die Ähnlichkeit von #228b22 und violet beträgt 90.98%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 9.02%. | ||||||
Hintergrundfarbe violet | Schriftfarbwert #228b22 | ||||||
| Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
| #ee82ee | #ee82ee | #ee82ee | #ee82ee | #228b22 | #228b22 | #228b22 | #228b22 |
| #f093f0 | #f093f0 | #cc6fcc | #cc6fcc | #419b41 | #419b41 | #1d771d | #1d771d |
| #f2a5f2 | #f2a5f2 | #aa5caa | #aa5caa | #61ac61 | #61ac61 | #186318 | #186318 |
| #f5b7f5 | #f5b7f5 | #884a88 | #884a88 | #80bc80 | #80bc80 | #134f13 | #134f13 |
| #f7c9f7 | #f7c9f7 | #663766 | #663766 | #a0cda0 | #a0cda0 | #0e3b0e | #0e3b0e |
| #fadbfa | #fadbfa | #442544 | #442544 | #bfddbf | #bfddbf | #092709 | #092709 |
| #fcedfc | #fcedfc | #221222 | #221222 | #dfeedf | #dfeedf | #041304 | #041304 |
| #ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Wir ändern für dieses Beispiel die Textfarbe von <li> auf Farbwert #228b22 und die Hintergrundfarbe von <li> auf Farbe violet. Als Schriftart setzen wir courier new. Die Schriftgröße verkleinern wir auf 98%.
<style type="text/css"><!-- li { font-family:courier new; color:#228b22; font-size:98%; background-color:violet; } //--> </style>
Weiteres zum Thema li erfahren Sie in Listen und Glossare in HTML. Mehr zum hier verwendeten HTML-Tag <li>.