von Thomas Salvador.
Farben werden in HTML entweder mit ihrem Namen oder mit ihrem Wert beschrieben.
HTML verfügt seit jeher über 17 Standard Farbnamen.
Sie entstehen dadurch, dass die 8 Grundfarben jeweils maximal und zu 50% enthalten sind.
Zu diesen 16 Farben kommt mit grey eine alternative Schreibweise für gray.
Hintergrundfarbwert #0000ff | Schriftfarbwert #ffffff | |||||
Detail | : | Hintergrund #0000ff | Detail | : | Schrift #ffffff | |
Farbwert | : | #0000ff | Farbwert | : | #ffffff | |
Farbe | : | blue | Farbe | : | white | |
HTML | : | #0000ff | HTML | : | #ffffff | |
HTML (Wert) | : | #0000ff | HTML (Wert) | : | #ffffff | |
CSS | : | #0000ff | CSS | : | #ffffff | |
CSS (Wert) | : | #0000ff | CSS (Wert) | : | #ffffff | |
CSS (kürzest) | : | #00f | CSS (kürzest) | : | #fff | |
CSS (RGB) | : | rgb(0,0,255) | CSS (RGB) | : | rgb(255,255,255) | |
CSS (%RGB) | : | rgb(0%,0%,100%) | CSS (%RGB) | : | rgb(100%,100%,100%) |
Verlauf Hintergrundfarbwert #0000ff nach Schriftfarbwert #ffffff | |||||||
#0000ff | #2424ff | #4848ff | #6d6dff | #9191ff | #b6b6ff | #dadaff | #ffffff |
#0000ff | #2424ff | #4848ff | #6d6dff | #9191ff | #b6b6ff | #dadaff | #ffffff |
Kombination von #0000ff und #ffffff | |||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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. | #ffffff eignet sich als Schriftfarbe auf Hintergrund #0000ff. Sowohl der Helligkeitsunterschied als auch der Unterschied in den Farben sind in Ordnung. Die Ähnlichkeit der Farben #ffffff und #0000ff ergibt sich zu 59.08%. Die Lesbarkeit dieser Kombination ergibt sich zu 40.92%. |
Hintergrundfarbwert #0000ff | Schriftfarbwert #ffffff | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#0000ff | #0000ff | #0000ff | #0000ff | #ffffff | #ffffff | #ffffff | #ffffff |
#2424ff | #2424ff | #0000da | #0000da | #ffffff | #ffffff | #dadada | #dadada |
#4848ff | #4848ff | #0000b6 | #0000b6 | #ffffff | #ffffff | #b6b6b6 | #b6b6b6 |
#6d6dff | #6d6dff | #000091 | #000091 | #ffffff | #ffffff | #919191 | #919191 |
#9191ff | #9191ff | #00006d | #00006d | #ffffff | #ffffff | #6d6d6d | #6d6d6d |
#b6b6ff | #b6b6ff | #000048 | #000048 | #ffffff | #ffffff | #484848 | #484848 |
#dadaff | #dadaff | #000024 | #000024 | #ffffff | #ffffff | #242424 | #242424 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Für dieses Beispiel ändern wir die Textfarbe von <blockquote> auf Farbwert #ffffff und die Hintergrundfarbe von <blockquote> auf Farbwert #0000ff. Als Schriftart wählen wir courier new und als Schriftgröße entscheiden wir uns für 82%.
<style type="text/css"><!-- blockquote { color: #fff; font-size: 82%; background-color: #0000ff; font-family: courier new; } //--> </style>
Weiteres zu blockquote lesen Sie in Blockorientierte Elemente in HTML. Der hier genutzte HTML-Tag blockquote ist in der HTML Referenz unter <blockquote> ausführlich zusammengestellt.
Einen Hyperlink setzt man mit HTML-Befehl <a>. Dieser kann hervorgehoben und farblich gestaltet werden.
Bei diesem Beispiel umranden wir <a> mit einem gefurchten, 5 Pixel dicken Rahmen in Farbwert #ffffff . Die Hintergrundfarbe für <a> setzen wir entsprechend auf Farbwert #0000ff. In HTML ist das kaum machbar. Daher formatieren wir mit CSS.
<style type="text/css"><!-- a { border-width: 5px; border-color: #ffffff; background-color: #0000ff; border-style: groove; } //--> </style>
Mehr zum Thema a erfahren Sie in Verweise und Protokolle in HTML. Weiteres zum HTML-Tag a ist in der HTML Referenz unter <a> ausführlich beschrieben.
Hintergrund | Farbwert | Farbe | und | Schrift | Farbwert | Farbkombination |
---|---|---|---|---|---|---|
aqua | #00ffff | + | aqua | #00ffff | aqua / #0000ff | |
black | #000000 | + | black | #000000 | black / #0000ff | |
blue | #0000ff | + | blue | #0000ff | blue / #0000ff | |
fuchsia | #ff00ff | + | fuchsia | #ff00ff | fuchsia / #0000ff | |
gray | #808080 | + | gray | #808080 | gray / #0000ff | |
grey | #808080 | + | grey | #808080 | grey / #0000ff | |
green | #008000 | + | green | #008000 | green / #0000ff | |
lime | #00ff00 | + | lime | #00ff00 | lime / #0000ff | |
maroon | #800000 | + | maroon | #800000 | maroon / #0000ff | |
navy | #000080 | + | navy | #000080 | navy / #0000ff | |
olive | #808000 | + | olive | #808000 | olive / #0000ff | |
purple | #800080 | + | purple | #800080 | purple / #0000ff | |
red | #ff0000 | + | red | #ff0000 | red / #0000ff | |
silver | #c0c0c0 | + | silver | #c0c0c0 | silver / #0000ff | |
teal | #008080 | + | teal | #008080 | teal / #0000ff | |
white | #ffffff | + | white | #ffffff | white / #0000ff | |
yellow | #ffff00 | + | yellow | #ffff00 | yellow / #0000ff |