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 darkgoldenrod | Schriftfarbe lightyellow | |||||
Detail | : | Hintergrund darkgoldenrod | Detail | : | Schrift lightyellow | |
Farbe | : | darkgoldenrod | Farbe | : | lightyellow | |
Farbwert | : | #b8860b | Farbwert | : | #ffffe0 | |
HTML | : | darkgoldenrod | HTML | : | lightyellow | |
HTML (Wert) | : | #b8860b | HTML (Wert) | : | #ffffe0 | |
CSS | : | darkgoldenrod | CSS | : | lightyellow | |
CSS (Wert) | : | #b8860b | CSS (Wert) | : | #ffffe0 | |
CSS (kürzest) | : | #b8860b | CSS (kürzest) | : | #ffffe0 | |
CSS (RGB) | : | rgb(184,134,11) | CSS (RGB) | : | rgb(255,255,224) | |
CSS (%RGB) | : | rgb(72%,52%,4%) | CSS (%RGB) | : | rgb(100%,100%,87%) |
Verlauf Hintergrundfarbe darkgoldenrod nach Schriftfarbe lightyellow | |||||||
#b8860b | #c29729 | #cca847 | #d6b966 | #e0cb84 | #eadca3 | #f4edc1 | #ffffe0 |
#b8860b | #c29729 | #cca847 | #d6b966 | #e0cb84 | #eadca3 | #f4edc1 | #ffffe0 |
Kombination von darkgoldenrod und lightyellow | |||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras vestibulum tristique erat, ac interdum justo cursus in. | Die Ähnlichkeit der Farben lightyellow und darkgoldenrod beträgt 84.77%. Die Lesbarkeit dieser Farbkombination liegt damit bei 15.23%. lightyellow eignet sich nicht als Schriftfarbe auf Hintergrund darkgoldenrod, da die Unterschiede in der Helligkeit und Farbe nicht ausreichend sind. |
Hintergrundfarbe darkgoldenrod | Schriftfarbe lightyellow | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#b8860b | #b8860b | #b8860b | #b8860b | #ffffe0 | #ffffe0 | #ffffe0 | #ffffe0 |
#c2972d | #c2972d | #9d7209 | #9d7209 | #ffffe4 | #ffffe4 | #dadac0 | #dadac0 |
#cca850 | #cca850 | #835f07 | #835f07 | #ffffe8 | #ffffe8 | #b6b6a0 | #b6b6a0 |
#d6b973 | #d6b973 | #694c06 | #694c06 | #ffffed | #ffffed | #919180 | #919180 |
#e0cb96 | #e0cb96 | #4e3904 | #4e3904 | #fffff1 | #fffff1 | #6d6d60 | #6d6d60 |
#eadcb9 | #eadcb9 | #342603 | #342603 | #fffff6 | #fffff6 | #484840 | #484840 |
#f4eddc | #f4eddc | #1a1301 | #1a1301 | #fffffa | #fffffa | #242420 | #242420 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Eine Überschrift wird mit Befehl <h4> gesetzt und kann hervorgehoben und farblich gestaltet werden.
Für dieses Beispiel umranden wir <h4> mit einem gepunkteten, 3 Pixel dicken Rahmen in Farbe lightyellow . Den Hintergrund von <h4> setzen wir auf Farbe darkgoldenrod. Mit HTML geht das kaum. Wir nutzen deshalb CSS zur Formatierung.
<style type="text/css"><!-- h4 { border-color:lightyellow; background-color:darkgoldenrod; border-style:dotted; border-width:3px; } //--> </style>
Mehr zu h4 erfahren Sie in Grundlegende Gestaltungselemente in HTML. Möglichkeiten vom hier gezeigten HTML-Tag <h4>.
Mit Tag <a> wird ein Hyperlink erzeugt. Diesen kann man hervorheben und farblich gestalten.
Hier ändern wir die Textfarbe von <a> auf Farbe lightyellow und die Hintergrundfarbe von <a> auf Farbe darkgoldenrod. Die Schriftart setzen wir auf arial und als Schriftgröße entscheiden wir uns für 119%.
<style type="text/css"><!-- a { color:lightyellow; background-color:darkgoldenrod; font-family:arial; font-size:119%; } //--> </style>
Weiteres zu a lesen Sie in Verweise und Protokolle in HTML. Der Tag a ist in der HTML Referenz unter <a> genau zusammengestellt.