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 #66cdaa | Schriftfarbwert #2f4f4f | |||||
Detail | : | Hintergrund #66cdaa | Detail | : | Schrift #2f4f4f | |
Farbwert | : | #66cdaa | Farbwert | : | #2f4f4f | |
Farbe | : | mediumaquamarine | Farbe | : | darkslategray | |
HTML | : | #66cdaa | HTML | : | #2f4f4f | |
HTML (Wert) | : | #66cdaa | HTML (Wert) | : | #2f4f4f | |
CSS | : | #66cdaa | CSS | : | #2f4f4f | |
CSS (Wert) | : | #66cdaa | CSS (Wert) | : | #2f4f4f | |
CSS (kürzest) | : | #66cdaa | CSS (kürzest) | : | #2f4f4f | |
CSS (RGB) | : | rgb(102,205,170) | CSS (RGB) | : | rgb(47,79,79) | |
CSS (%RGB) | : | rgb(40%,80%,66%) | CSS (%RGB) | : | rgb(18%,30%,30%) |
Verlauf Hintergrundfarbwert #66cdaa nach Schriftfarbwert #2f4f4f | |||||||
#66cdaa | #5ebb9d | #56a990 | #4e9783 | #468576 | #3e7369 | #36615c | #2f4f4f |
#66cdaa | #5ebb9d | #56a990 | #4e9783 | #468576 | #3e7369 | #36615c | #2f4f4f |
Kombination von #66cdaa und #2f4f4f | |||||||
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. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. | #2f4f4f ist nicht als Schriftfarbe auf Hintergrund #66cdaa geeignet. Sowohl Helligkeit als auch die Farben sind zu ähnlich. Die Ähnlichkeit der Farben #2f4f4f und #66cdaa beträgt 77.98%. Die Lesbarkeit dieser Kombination bewerte ich mit 22.02%. |
Hintergrundfarbwert #66cdaa | Schriftfarbwert #2f4f4f | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#66cdaa | #66cdaa | #66cdaa | #66cdaa | #2f4f4f | #2f4f4f | #2f4f4f | #2f4f4f |
#7bd4b6 | #7bd4b6 | #57af91 | #57af91 | #4c6868 | #4c6868 | #284343 | #284343 |
#91dbc2 | #91dbc2 | #489279 | #489279 | #6a8181 | #6a8181 | #213838 | #213838 |
#a7e2ce | #a7e2ce | #3a7561 | #3a7561 | #889a9a | #889a9a | #1a2d2d | #1a2d2d |
#bde9da | #bde9da | #2b5748 | #2b5748 | #a5b3b3 | #a5b3b3 | #142121 | #142121 |
#d3f0e6 | #d3f0e6 | #1d3a30 | #1d3a30 | #c3cccc | #c3cccc | #0d1616 | #0d1616 |
#e9f7f2 | #e9f7f2 | #0e1d18 | #0e1d18 | #e1e5e5 | #e1e5e5 | #060b0b | #060b0b |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Für dieses Beispiel umranden wir <textarea> mit einem gestrichelten, 4 Pixel dicken Rahmen in Farbwert #2f4f4f . Die Hintergrundfarbe für <textarea> färben wir entsprechend mit Farbwert #66cdaa. In HTML ist das kaum möglich. Wir nutzen deshalb CSS.
<style type="text/css"><!-- textarea { border-color:#2f4f4f; border-style:dashed; background-color:#66cdaa; border-width:4px; } //--> </style>
Mehr zum Thema textarea erfahren Sie in Formulare in HTML. Möglichkeiten vom Befehl <textarea>.
Mit Befehl <h6> erzeugen Sie eine Überschrift der 6. Stufe. Sie kann farblich gestaltet werden.
Die Hintergrundfarbe soll sich von Farbwert #66cdaa auf Farbwert #2f4f4f ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <h6> in Farbwert #66cdaa vor.
Zum Beispiel ändern wir bei <h6> die Hintergrundfarbe auf Farbwert #66cdaa. Zwar behalten wir die Textfarbe bei, setzen jedoch die Schriftart auf courier new:
<style type="text/css"><!-- h6 { font-family:courier new; background-color:#66cdaa; } //--> </style>Jetzt stellen wir ein, dass bei Berührung mit der Maus die Hintergrundfarbe auf #2f4f4f geändert wird.
<style type="text/css"><!-- h6: hover { background-color: #2f4f4f; } //--> </style>
Weiteres zu h6 lesen Sie in Grundlegende Gestaltungselemente in HTML. Der HTML-Tag h6 ist in der HTML Referenz bei <h6> ausführlich beschrieben.