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.
Hintergrundfarbe gray | Schriftfarbe yellow | |||||
Detail | : | Hintergrund gray | Detail | : | Schrift yellow | |
Farbe | : | gray | Farbe | : | yellow | |
Farbwert | : | #808080 | Farbwert | : | #ffff00 | |
HTML | : | gray | HTML | : | yellow | |
HTML (Wert) | : | #808080 | HTML (Wert) | : | #ffff00 | |
CSS | : | gray | CSS | : | yellow | |
CSS (Wert) | : | #808080 | CSS (Wert) | : | #ffff00 | |
CSS (kürzest) | : | #808080 | CSS (kürzest) | : | #ff0 | |
CSS (RGB) | : | rgb(128,128,128) | CSS (RGB) | : | rgb(255,255,0) | |
CSS (%RGB) | : | rgb(50%,50%,50%) | CSS (%RGB) | : | rgb(100%,100%,0%) |
Verlauf Hintergrundfarbe gray nach Schriftfarbe yellow | |||||||
#808080 | #92926d | #a4a45b | #b6b649 | #c8c836 | #dada24 | #ecec12 | #ffff00 |
#808080 | #92926d | #a4a45b | #b6b649 | #c8c836 | #dada24 | #ecec12 | #ffff00 |
Kombination von gray und yellow | |||||||
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. | Auf Hintergrund gray ist yellow ungeeignet. Die Helligkeit und Farben sind sich zu ähnlich. Die Ähnlichkeit von yellow und gray ergibt sich zu 82.49%. Die Lesbarkeit dieser Kombination ergibt sich zu 17.51%. |
Hintergrundfarbe gray | Schriftfarbe yellow | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#808080 | #808080 | #808080 | #808080 | #ffff00 | #ffff00 | #ffff00 | #ffff00 |
#929292 | #929292 | #6d6d6d | #6d6d6d | #ffff24 | #ffff24 | #dada00 | #dada00 |
#a4a4a4 | #a4a4a4 | #5b5b5b | #5b5b5b | #ffff48 | #ffff48 | #b6b600 | #b6b600 |
#b6b6b6 | #b6b6b6 | #494949 | #494949 | #ffff6d | #ffff6d | #919100 | #919100 |
#c8c8c8 | #c8c8c8 | #363636 | #363636 | #ffff91 | #ffff91 | #6d6d00 | #6d6d00 |
#dadada | #dadada | #242424 | #242424 | #ffffb6 | #ffffb6 | #484800 | #484800 |
#ececec | #ececec | #121212 | #121212 | #ffffda | #ffffda | #242400 | #242400 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Mit HTML-Befehl <h1> setzen Sie eine Überschrift der 1. Stufe. Diese können Sie hervorheben und farblich gestalten.
Hier umranden wir <h1> mit einem 3 Pixel dicken, gepunkteten Rahmen in Farbe yellow . Die Hintergrundfarbe für <h1> färben wir mit Farbe gray. In HTML geht dies nicht. Deshalb nutzen wir hier CSS zur Formatierung.
<style type="text/css"><!-- h1 { border-color: yellow; border-width: 3px; background-color: gray; border-style: dotted; } //--> </style>
Mehr zu h1 können Sie in Grundlegende Gestaltungselemente in HTML lesen. Der Tag h1 ist in der HTML Referenz bei <h1> beschrieben.
Hintergrund | Farbwert | Farbe | und | Schrift | Farbwert | Farbkombination |
---|---|---|---|---|---|---|
aqua | #00ffff | + | aqua | #00ffff | aqua / gray | |
black | #000000 | + | black | #000000 | black / gray | |
blue | #0000ff | + | blue | #0000ff | blue / gray | |
fuchsia | #ff00ff | + | fuchsia | #ff00ff | fuchsia / gray | |
gray | #808080 | + | gray | #808080 | gray / gray | |
grey | #808080 | + | grey | #808080 | grey / gray | |
green | #008000 | + | green | #008000 | green / gray | |
lime | #00ff00 | + | lime | #00ff00 | lime / gray | |
maroon | #800000 | + | maroon | #800000 | maroon / gray | |
navy | #000080 | + | navy | #000080 | navy / gray | |
olive | #808000 | + | olive | #808000 | olive / gray | |
purple | #800080 | + | purple | #800080 | purple / gray | |
red | #ff0000 | + | red | #ff0000 | red / gray | |
silver | #c0c0c0 | + | silver | #c0c0c0 | silver / gray | |
teal | #008080 | + | teal | #008080 | teal / gray | |
white | #ffffff | + | white | #ffffff | white / gray | |
yellow | #ffff00 | + | yellow | #ffff00 | yellow / gray |