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 #8b008b | Schriftfarbwert #87cefa | |||||
Detail | : | Hintergrund #8b008b | Detail | : | Schrift #87cefa | |
Farbwert | : | #8b008b | Farbwert | : | #87cefa | |
Farbe | : | darkmagenta | Farbe | : | lightskyblue | |
HTML | : | #8b008b | HTML | : | #87cefa | |
HTML (Wert) | : | #8b008b | HTML (Wert) | : | #87cefa | |
CSS | : | #8b008b | CSS | : | #87cefa | |
CSS (Wert) | : | #8b008b | CSS (Wert) | : | #87cefa | |
CSS (kürzest) | : | #8b008b | CSS (kürzest) | : | #87cefa | |
CSS (RGB) | : | rgb(139,0,139) | CSS (RGB) | : | rgb(135,206,250) | |
CSS (%RGB) | : | rgb(54%,0%,54%) | CSS (%RGB) | : | rgb(52%,80%,98%) |
Verlauf Hintergrundfarbwert #8b008b nach Schriftfarbwert #87cefa | |||||||
#8b008b | #8a1d9a | #893aaa | #8958ba | #8875ca | #8893da | #87b0ea | #87cefa |
#8b008b | #8a1d9a | #893aaa | #8958ba | #8875ca | #8893da | #87b0ea | #87cefa |
Kombination von #8b008b und #87cefa | |||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. 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. | Die Ähnlichkeit von #87cefa und #8b008b ergibt sich zu 76.41%. Die Lesbarkeit dieser Kombination ergibt sich zu 23.59%. Auf Hintergrund #8b008b ist #87cefa ungeeignet, da der Farbunterschied nicht ausreichend ist |
Hintergrundfarbwert #8b008b | Schriftfarbwert #87cefa | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#8b008b | #8b008b | #8b008b | #8b008b | #87cefa | #87cefa | #87cefa | #87cefa |
#9b249b | #9b249b | #770077 | #770077 | #98d5fa | #98d5fa | #73b0d6 | #73b0d6 |
#ac48ac | #ac48ac | #630063 | #630063 | #a9dcfb | #a9dcfb | #6093b2 | #6093b2 |
#bc6dbc | #bc6dbc | #4f004f | #4f004f | #bae3fc | #bae3fc | #4d758e | #4d758e |
#cd91cd | #cd91cd | #3b003b | #3b003b | #cbeafc | #cbeafc | #39586b | #39586b |
#ddb6dd | #ddb6dd | #270027 | #270027 | #dcf1fd | #dcf1fd | #263a47 | #263a47 |
#eedaee | #eedaee | #130013 | #130013 | #edf8fe | #edf8fe | #131d23 | #131d23 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Hier ändern wir die Textfarbe von <label> auf Farbwert #87cefa. Die Schriftart ändern wir auf courier new und verkleinern die Schriftgröße auf 96%. Wir unterstreichen den Inhalt von <label> mit Hilfe eines doppelten Rahmens mit 2 Pixel Dicke in Farbwert #8b008b. In HTML ist das kaum machbar. Deshalb formatieren wir hier mit CSS.
<style type="text/css"><!-- label { font-size:96%; color:#87cefa; font-family:courier new; border-bottom:2px double #8b008b; } //--> </style>
Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.
Mehr zu label erfahren Sie in Formulare in HTML. Mehr zum HTML-Tag <label>.
Ein Hyperlink wird mit Befehl <a> erzeugt. Diesen kann man farblich gestalten und hervorheben.
Die Hintergrundfarbe soll sich von Farbwert #8b008b auf Farbwert #87cefa ändern, wenn man mit der Maus auf <a> zeigt. Wir bereiten zunächst eine Darstellung von <a> in Farbwert #8b008b vor.
Wir legen für dieses Beispiel die Hintergrundfarbe von <a> auf Farbwert #8b008b fest:
<style type="text/css"><!-- a { background-color:#8b008b; } //--> </style>Jetzt stellen wir ein, dass bei Hover die Hintergrundfarbe auf #87cefa geändert wird.
<style type="text/css"><!-- a:hover { background-color:#87cefa; } //--> </style>
Mehr zu a finden Sie in Verweise und Protokolle in HTML. Beschreibung des HTML-Befehl <a>.