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 #cd853f | Schriftfarbe ghostwhite | |||||
Detail | : | Hintergrund #cd853f | Detail | : | Schrift ghostwhite | |
Farbwert | : | #cd853f | Farbe | : | ghostwhite | |
Farbe | : | peru | Farbwert | : | #f8f8ff | |
HTML | : | #cd853f | HTML | : | ghostwhite | |
HTML (Wert) | : | #cd853f | HTML (Wert) | : | #f8f8ff | |
CSS | : | #cd853f | CSS | : | ghostwhite | |
CSS (Wert) | : | #cd853f | CSS (Wert) | : | #f8f8ff | |
CSS (kürzest) | : | #cd853f | CSS (kürzest) | : | #f8f8ff | |
CSS (RGB) | : | rgb(205,133,63) | CSS (RGB) | : | rgb(248,248,255) | |
CSS (%RGB) | : | rgb(80%,52%,24%) | CSS (%RGB) | : | rgb(97%,97%,100%) |
Verlauf Hintergrundfarbwert #cd853f nach Schriftfarbe ghostwhite | |||||||
#cd853f | #d3955a | #d9a575 | #dfb691 | #e5c6ac | #ebd7c8 | #f1e7e3 | #f8f8ff |
#cd853f | #d3955a | #d9a575 | #dfb691 | #e5c6ac | #ebd7c8 | #f1e7e3 | #f8f8ff |
Kombination von #cd853f und ghostwhite | |||||||
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. | ghostwhite ist nicht als Schriftfarbe auf Hintergrund #cd853f geeignet. Die Unterschiede in der Helligkeit und Farbe sind nicht ausreichend. Die Ähnlichkeit von ghostwhite und #cd853f ergibt sich zu 86.53%. Die Lesbarkeit dieser Kombination liegt damit bei 13.47%. |
Hintergrundfarbwert #cd853f | Schriftfarbe ghostwhite | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#cd853f | #cd853f | #cd853f | #cd853f | #f8f8ff | #f8f8ff | #f8f8ff | #f8f8ff |
#d4965a | #d4965a | #af7236 | #af7236 | #f9f9ff | #f9f9ff | #d4d4da | #d4d4da |
#dba775 | #dba775 | #925f2d | #925f2d | #fafaff | #fafaff | #b1b1b6 | #b1b1b6 |
#e2b991 | #e2b991 | #754c24 | #754c24 | #fbfbff | #fbfbff | #8d8d91 | #8d8d91 |
#e9caac | #e9caac | #57391b | #57391b | #fcfcff | #fcfcff | #6a6a6d | #6a6a6d |
#f0dcc8 | #f0dcc8 | #3a2612 | #3a2612 | #fdfdff | #fdfdff | #464648 | #464648 |
#f7ede3 | #f7ede3 | #1d1309 | #1d1309 | #fefeff | #fefeff | #232324 | #232324 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Eine Überschrift setzen Sie mit Befehl <h1>. Sie kann hervorgehoben und farblich gestaltet werden.
Hier ändern wir die Textfarbe von <h1> auf Farbe ghostwhite und die Hintergrundfarbe von <h1> auf Farbwert #cd853f. Die Schriftart setzen wir auf monospace und als Schriftgröße entscheiden wir uns für 13px.
<style type="text/css"><!-- h1 { color:ghostwhite; background-color:#cd853f; font-size:13px; font-family:monospace; } //--> </style>
Weiteres zu h1 können Sie in Grundlegende Gestaltungselemente in HTML nachsehen. Einzelheiten des hier gezeigten HTML-Befehl <h1>.
Einen Verweis setzen Sie mit Tag <a>. Diesen kann man farblich gestalten und hervorheben.
Die Hintergrundfarbe soll sich von Farbwert #cd853f auf Farbe ghostwhite ändern, wenn man mit der Maus auf <a> zeigt. Bereiten wir zunächst eine Formatierung von <a> in Farbwert #cd853f vor.
Hier legen wir die Hintergrundfarbe von <a> auf Farbwert #cd853f fest. Zwar behalten wir die Textfarbe bei, ändern jedoch die Schriftart auf verdana. Die Größe der Schrift setzen wir auf 9pt.
<style type="text/css"><!-- a { background-color: #cd853f; font-size: 9pt; font-family: verdana; } //--> </style>Nun fordern wir, dass sich bei Berührung mit der Maus die Hintergrundfarbe zu ghostwhite ändert.
<style type="text/css"><!-- a: hover { background-color: ghostwhite; } //--> </style>
Mehr zum Thema a finden Sie in Verweise und Protokolle in HTML. Der hier verwendete HTML-Tag a ist in der HTML Referenz bei <a> ausführlich zusammengestellt.