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 oldlace | Schriftfarbe forestgreen | |||||
Detail | : | Hintergrund oldlace | Detail | : | Schrift forestgreen | |
Farbe | : | oldlace | Farbe | : | forestgreen | |
Farbwert | : | #fdf5e6 | Farbwert | : | #228b22 | |
HTML | : | oldlace | HTML | : | forestgreen | |
HTML (Wert) | : | #fdf5e6 | HTML (Wert) | : | #228b22 | |
CSS | : | oldlace | CSS | : | forestgreen | |
CSS (Wert) | : | #fdf5e6 | CSS (Wert) | : | #228b22 | |
CSS (kürzest) | : | #fdf5e6 | CSS (kürzest) | : | #228b22 | |
CSS (RGB) | : | rgb(253,245,230) | CSS (RGB) | : | rgb(34,139,34) | |
CSS (%RGB) | : | rgb(99%,96%,90%) | CSS (%RGB) | : | rgb(13%,54%,13%) |
Verlauf Hintergrundfarbe oldlace nach Schriftfarbe forestgreen | |||||||
#fdf5e6 | #dde5ca | #bed6ae | #9fc792 | #7fb876 | #60a95a | #419a3e | #228b22 |
#fdf5e6 | #dde5ca | #bed6ae | #9fc792 | #7fb876 | #60a95a | #419a3e | #228b22 |
Kombination von oldlace und forestgreen | |||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in. | Die Ähnlichkeit von forestgreen und oldlace ergibt sich zu 80.71%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 19.29%. forestgreen eignet sich als Schriftfarbe auf Hintergrund oldlace, da die Unterschiede in Helligkeit und Farbe in Ordnung sind. |
Hintergrundfarbe oldlace | Schriftfarbe forestgreen | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#fdf5e6 | #fdf5e6 | #fdf5e6 | #fdf5e6 | #228b22 | #228b22 | #228b22 | #228b22 |
#fdf6e9 | #fdf6e9 | #d8d2c5 | #d8d2c5 | #419b41 | #419b41 | #1d771d | #1d771d |
#fdf7ed | #fdf7ed | #b4afa4 | #b4afa4 | #61ac61 | #61ac61 | #186318 | #186318 |
#fdf9f0 | #fdf9f0 | #908c83 | #908c83 | #80bc80 | #80bc80 | #134f13 | #134f13 |
#fefaf4 | #fefaf4 | #6c6962 | #6c6962 | #a0cda0 | #a0cda0 | #0e3b0e | #0e3b0e |
#fefcf7 | #fefcf7 | #484641 | #484641 | #bfddbf | #bfddbf | #092709 | #092709 |
#fefdfb | #fefdfb | #242320 | #242320 | #dfeedf | #dfeedf | #041304 | #041304 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Wir ändern in diesem Beispiel die Textfarbe von <blockquote> auf Farbe forestgreen und die Hintergrundfarbe von <blockquote> auf Farbe oldlace. Die Schriftart setzen wir auf sans-serif. Als Schriftgröße setzen wir 98%.
<style type="text/css"><!-- blockquote { font-size: 98%; color: forestgreen; font-family: sans-serif; background-color: oldlace; } //--> </style>
Weiteres zum Thema blockquote finden Sie in Blockorientierte Elemente in HTML. Einzelheiten des hier verwendeten HTML-Tag blockquote finden Sie in der HTML Referenz unter <blockquote>.