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 blueviolet | Schriftfarbe forestgreen | |||||
Detail | : | Hintergrund blueviolet | Detail | : | Schrift forestgreen | |
Farbe | : | blueviolet | Farbe | : | forestgreen | |
Farbwert | : | #8a2be2 | Farbwert | : | #228b22 | |
HTML | : | blueviolet | HTML | : | forestgreen | |
HTML (Wert) | : | #8a2be2 | HTML (Wert) | : | #228b22 | |
CSS | : | blueviolet | CSS | : | forestgreen | |
CSS (Wert) | : | #8a2be2 | CSS (Wert) | : | #228b22 | |
CSS (kürzest) | : | #8a2be2 | CSS (kürzest) | : | #228b22 | |
CSS (RGB) | : | rgb(138,43,226) | CSS (RGB) | : | rgb(34,139,34) | |
CSS (%RGB) | : | rgb(54%,16%,88%) | CSS (%RGB) | : | rgb(13%,54%,13%) |
Verlauf Hintergrundfarbe blueviolet nach Schriftfarbe forestgreen | |||||||
#8a2be2 | #7b38c6 | #6c46ab | #5d548f | #4e6174 | #3f6f58 | #307d3d | #228b22 |
#8a2be2 | #7b38c6 | #6c46ab | #5d548f | #4e6174 | #3f6f58 | #307d3d | #228b22 |
Kombination von blueviolet und forestgreen | |||||||
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 id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. | Die Ähnlichkeit der Farben forestgreen und blueviolet ergibt sich zu 93.54%. Die Lesbarkeit dieser Kombination liegt damit bei 6.46%. Auf Hintergrund blueviolet ist forestgreen ungeeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind gross genug. |
Hintergrundfarbe blueviolet | Schriftfarbe forestgreen | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#8a2be2 | #8a2be2 | #8a2be2 | #8a2be2 | #228b22 | #228b22 | #228b22 | #228b22 |
#9a49e6 | #9a49e6 | #7624c1 | #7624c1 | #419b41 | #419b41 | #1d771d | #1d771d |
#ab67ea | #ab67ea | #621ea1 | #621ea1 | #61ac61 | #61ac61 | #186318 | #186318 |
#bc85ee | #bc85ee | #4e1881 | #4e1881 | #80bc80 | #80bc80 | #134f13 | #134f13 |
#cca4f2 | #cca4f2 | #3b1260 | #3b1260 | #a0cda0 | #a0cda0 | #0e3b0e | #0e3b0e |
#ddc2f6 | #ddc2f6 | #270c40 | #270c40 | #bfddbf | #bfddbf | #092709 | #092709 |
#eee0fa | #eee0fa | #130620 | #130620 | #dfeedf | #dfeedf | #041304 | #041304 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Die Rahmenfarbe soll sich von Farbe blueviolet auf Farbe forestgreen ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <form> in Farbe blueviolet vor.
In diesem Beispiel umranden wir <form> mit einem 4 Pixel dicken, einfallenden Rahmen in Farbe blueviolet.
<style type="text/css"><!-- form { border-width: 4px; border-color: blueviolet; border-style: inset; } //--> </style>Nun fordern wir, dass sich bei Berührung mit der Maus die Rahmenfarbe auf forestgreen ändert.
<style type="text/css"><!-- form: hover { border-color: forestgreen; } //--> </style>
Weiteres zu form lesen Sie in Formulare in HTML. Mehr zum HTML-Tag form ist in der HTML Referenz bei <form> genau zusammengestellt.
In diesem Beispiel umranden wir <blockquote> mit einem doppelten, 1 Punkte dicken Rahmen in Farbe forestgreen . Die Hintergrundfarbe für <blockquote> setzen wir entsprechend auf Farbe blueviolet. Mit HTML ist dies kaum machbar. Daher formatieren wir mit CSS.
<style type="text/css"><!-- blockquote { border-color: forestgreen; border-width: 1pt; background-color: blueviolet; border-style: double; } //--> </style>
Weiteres zum Thema blockquote finden Sie in Blockorientierte Elemente in HTML. Mehr zum HTML-Tag blockquote ist in der HTML Referenz bei <blockquote> genau zusammengestellt.