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 mediumpurple | Schriftfarbe hotpink | |||||
Detail | : | Hintergrund mediumpurple | Detail | : | Schrift hotpink | |
Farbe | : | mediumpurple | Farbe | : | hotpink | |
Farbwert | : | #9370db | Farbwert | : | #ff69b4 | |
HTML | : | mediumpurple | HTML | : | hotpink | |
HTML (Wert) | : | #9370db | HTML (Wert) | : | #ff69b4 | |
CSS | : | mediumpurple | CSS | : | hotpink | |
CSS (Wert) | : | #9370db | CSS (Wert) | : | #ff69b4 | |
CSS (kürzest) | : | #9370db | CSS (kürzest) | : | #ff69b4 | |
CSS (RGB) | : | rgb(147,112,219) | CSS (RGB) | : | rgb(255,105,180) | |
CSS (%RGB) | : | rgb(57%,43%,85%) | CSS (%RGB) | : | rgb(100%,41%,70%) |
Verlauf Hintergrundfarbe mediumpurple nach Schriftfarbe hotpink | |||||||
#9370db | #a26fd5 | #b16ecf | #c16dca | #d06cc4 | #e06bbf | #ef6ab9 | #ff69b4 |
#9370db | #a26fd5 | #b16ecf | #c16dca | #d06cc4 | #e06bbf | #ef6ab9 | #ff69b4 |
Kombination von mediumpurple und hotpink | |||||||
Cras vestibulum tristique erat, ac interdum justo cursus in. 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. | hotpink ist nicht als Schriftfarbe auf Hintergrund mediumpurple geeignet. Die Helligkeit und Farben sind sich zu ähnlich. Die Ähnlichkeit von hotpink und mediumpurple ergibt sich zu 93.23%. Die Lesbarkeit dieser Kombination bewerte ich mit 6.77%. |
Hintergrundfarbe mediumpurple | Schriftfarbe hotpink | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#9370db | #9370db | #9370db | #9370db | #ff69b4 | #ff69b4 | #ff69b4 | #ff69b4 |
#a284e0 | #a284e0 | #7e60bb | #7e60bb | #ff7ebe | #ff7ebe | #da5a9a | #da5a9a |
#b198e5 | #b198e5 | #69509c | #69509c | #ff93c9 | #ff93c9 | #b64b80 | #b64b80 |
#c1adea | #c1adea | #54407d | #54407d | #ffa9d4 | #ffa9d4 | #913c66 | #913c66 |
#d0c1ef | #d0c1ef | #3f305d | #3f305d | #ffbede | #ffbede | #6d2d4d | #6d2d4d |
#e0d6f4 | #e0d6f4 | #2a203e | #2a203e | #ffd4e9 | #ffd4e9 | #481e33 | #481e33 |
#efeaf9 | #efeaf9 | #15101f | #15101f | #ffe9f4 | #ffe9f4 | #240f19 | #240f19 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Für dieses Beispiel umranden wir <frameset> mit einem . Den Hintergrund von <frameset> setzen wir auf Farbe mediumpurple. Dies geht mit HTML nicht. Daher verwenden wir dafür CSS.
<style type="text/css"><!-- frameset { background-color: mediumpurple; border-width: 1pt; border-color: hotpink; border-style: outset; } //--> </style>
Die Beschreibung vom hier verwendeten HTML-Befehl frameset lesen Sie in der HTML Referenz unter <frameset>.
Die Hintergrundfarbe soll sich von Farbe mediumpurple auf Farbe hotpink ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <pre> in Farbe mediumpurple vor.
Als Beispiel ändern wir die Hintergrundfarbe von <pre> auf Farbe mediumpurple. Die Schriftgröße vergrößern wir auf 120%:
<style type="text/css"><!-- pre { font-size: 120%; background-color: mediumpurple; } //--> </style>Nun fordern wir, dass sich bei Berührung mit der Maus die Hintergrundfarbe auf hotpink ändert.
<style type="text/css"><!-- pre: hover { background-color: hotpink; } //--> </style>
Mehr zu pre können Sie in Blockorientierte Elemente in HTML nachlesen. Mehr zum HTML-Tag pre lesen Sie in der HTML Referenz unter <pre>.