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 #00008b | Schriftfarbe hotpink | |||||
Detail | : | Hintergrund #00008b | Detail | : | Schrift hotpink | |
Farbwert | : | #00008b | Farbe | : | hotpink | |
Farbe | : | darkblue | Farbwert | : | #ff69b4 | |
HTML | : | #00008b | HTML | : | hotpink | |
HTML (Wert) | : | #00008b | HTML (Wert) | : | #ff69b4 | |
CSS | : | #00008b | CSS | : | hotpink | |
CSS (Wert) | : | #00008b | CSS (Wert) | : | #ff69b4 | |
CSS (kürzest) | : | #00008b | CSS (kürzest) | : | #ff69b4 | |
CSS (RGB) | : | rgb(0,0,139) | CSS (RGB) | : | rgb(255,105,180) | |
CSS (%RGB) | : | rgb(0%,0%,54%) | CSS (%RGB) | : | rgb(100%,41%,70%) |
Verlauf Hintergrundfarbwert #00008b nach Schriftfarbe hotpink | |||||||
#00008b | #240f90 | #481e96 | #6d2d9c | #913ca2 | #b64ba8 | #da5aae | #ff69b4 |
#00008b | #240f90 | #481e96 | #6d2d9c | #913ca2 | #b64ba8 | #da5aae | #ff69b4 |
Kombination von #00008b und hotpink | |||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. | Die Ähnlichkeit der Farben hotpink und #00008b beträgt 72.49%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 27.51%. hotpink eignet sich nicht als Schriftfarbe auf Hintergrund #00008b. Zwar ist der Helligkeitsunterschied ok, die Farben selbst sind jedoch zu ähnlich. |
Hintergrundfarbwert #00008b | Schriftfarbe hotpink | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#00008b | #00008b | #00008b | #00008b | #ff69b4 | #ff69b4 | #ff69b4 | #ff69b4 |
#24249b | #24249b | #000077 | #000077 | #ff7ebe | #ff7ebe | #da5a9a | #da5a9a |
#4848ac | #4848ac | #000063 | #000063 | #ff93c9 | #ff93c9 | #b64b80 | #b64b80 |
#6d6dbc | #6d6dbc | #00004f | #00004f | #ffa9d4 | #ffa9d4 | #913c66 | #913c66 |
#9191cd | #9191cd | #00003b | #00003b | #ffbede | #ffbede | #6d2d4d | #6d2d4d |
#b6b6dd | #b6b6dd | #000027 | #000027 | #ffd4e9 | #ffd4e9 | #481e33 | #481e33 |
#dadaee | #dadaee | #000013 | #000013 | #ffe9f4 | #ffe9f4 | #240f19 | #240f19 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Mit HTML-Tag <a> wird ein Hyperlink erzeugt. Diesen kann man hervorheben und farblich gestalten.
Die Textfarbe soll sich von Farbwert #00008b auf Farbe hotpink ändern, wenn man mit der Maus auf <a> zeigt. Bereiten wir zunächst die Formatierung von <a> in Farbwert #00008b vor.
Zum Beispiel setzen wir die Textfarbe von <a> auf Farbwert #00008b. Zwar lassen wir die Hintergrundfarbe unverändert, ändern jedoch die Schriftart auf verdana. Die Schriftgröße setzen wir auf 95S%.
<style type="text/css"><!-- a { font-size: 95S%; color: #00008b; font-family: verdana; } //--> </style>Nun stellen wir ein, dass bei Hover die Textfarbe auf hotpink gesetzt wird.
<style type="text/css"><!-- a: hover { color: hotpink; } //--> </style>
Mehr zu a können Sie in Verweise und Protokolle in HTML lesen. Die Beschreibung des HTML-Befehl a finden Sie in der HTML Referenz unter <a>.
Die Hintergrundfarbe soll sich von Farbwert #00008b auf Farbe hotpink ändern, wenn man mit der Maus auf <cite> zeigt. Bereiten wir zunächst eine Formatierung von <cite> in Farbwert #00008b vor.
Wir ändern zum Beispiel bei <cite> die Hintergrundfarbe auf Farbwert #00008b. Die Textfarbe behalten wir bei, ändern jedoch die Schriftart auf arial und ändern die Schriftgröße auf 13px.
<style type="text/css"><!-- cite { font-size:13px; background-color:#00008b; font-family:arial; } //--> </style>Jetzt fordern wir, dass bei Berührung mit der Maus die Hintergrundfarbe auf hotpink geändert wird.
<style type="text/css"><!-- cite:hover { background-color:hotpink; } //--> </style>
Der hier genutzte Befehl cite ist in der HTML Referenz unter <cite> genau zusammengestellt.