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 red | Schriftfarbe black | |||||
Detail | : | Hintergrund red | Detail | : | Schrift black | |
Farbe | : | red | Farbe | : | black | |
Farbwert | : | #ff0000 | Farbwert | : | #000000 | |
HTML | : | red | HTML | : | black | |
HTML (Wert) | : | #ff0000 | HTML (Wert) | : | #000000 | |
CSS | : | red | CSS | : | black | |
CSS (Wert) | : | #ff0000 | CSS (Wert) | : | #000000 | |
CSS (kürzest) | : | #f00 | CSS (kürzest) | : | #000 | |
CSS (RGB) | : | rgb(255,0,0) | CSS (RGB) | : | rgb(0,0,0) | |
CSS (%RGB) | : | rgb(100%,0%,0%) | CSS (%RGB) | : | rgb(0%,0%,0%) |
Verlauf Hintergrundfarbe red nach Schriftfarbe black | |||||||
#ff0000 | #da0000 | #b60000 | #910000 | #6d0000 | #480000 | #240000 | #000000 |
#ff0000 | #da0000 | #b60000 | #910000 | #6d0000 | #480000 | #240000 | #000000 |
Kombination von red und black | |||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. | Die Ähnlichkeit der Farben black und red beträgt 74.99%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 25.01%. black eignet sich nicht als Schriftfarbe auf Hintergrund red, da weder der Helligkeitsunterschied noch der Farbunterschied geeignet sind. |
Hintergrundfarbe red | Schriftfarbe black | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#ff0000 | #ff0000 | #ff0000 | #ff0000 | #000000 | #000000 | #000000 | #000000 |
#ff2424 | #ff2424 | #da0000 | #da0000 | #242424 | #242424 | #000000 | #000000 |
#ff4848 | #ff4848 | #b60000 | #b60000 | #484848 | #484848 | #000000 | #000000 |
#ff6d6d | #ff6d6d | #910000 | #910000 | #6d6d6d | #6d6d6d | #000000 | #000000 |
#ff9191 | #ff9191 | #6d0000 | #6d0000 | #919191 | #919191 | #000000 | #000000 |
#ffb6b6 | #ffb6b6 | #480000 | #480000 | #b6b6b6 | #b6b6b6 | #000000 | #000000 |
#ffdada | #ffdada | #240000 | #240000 | #dadada | #dadada | #000000 | #000000 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Eine Überschrift der 5. Stufe erzeugen Sie mit Tag <h5>. Diese können Sie hervorheben und farblich gestalten.
Hier ändern wir die Textfarbe von <h5> auf Farbe black und die Hintergrundfarbe von <h5> auf Farbe red. Die Schriftart ändern wir auf monospace und als Schriftgröße setzen wir 9pt.
<style type="text/css"><!-- h5 { font-size: 9pt; color: black; background-color: red; font-family: monospace; } //--> </style>
Weiteres zu h5 finden Sie in Grundlegende Gestaltungselemente in HTML. Weiteres zum hier gezeigten Befehl h5 lesen Sie in der HTML Referenz unter <h5>.
Die Textfarbe soll sich von Farbe red auf Farbe black ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <dt> in Farbe red vor.
Z.B. legen wir Farbe red als Textfarbe von <dt> fest.
<style type="text/css"><!-- dt { color: red; } //--> </style>Nun stellen wir ein, dass sich bei Mausberührung die Textfarbe auf black ändert.
<style type="text/css"><!-- dt: hover { color: black; } //--> </style>
Mehr zum Thema dt können Sie in Listen und Glossare in HTML nachlesen. Möglichkeiten des Befehl dt erfahren Sie in der HTML Referenz unter <dt>.
Hintergrund | Farbwert | Farbe | und | Schrift | Farbwert | Farbkombination |
---|---|---|---|---|---|---|
aqua | #00ffff | + | aqua | #00ffff | aqua / red | |
black | #000000 | + | black | #000000 | black / red | |
blue | #0000ff | + | blue | #0000ff | blue / red | |
fuchsia | #ff00ff | + | fuchsia | #ff00ff | fuchsia / red | |
gray | #808080 | + | gray | #808080 | gray / red | |
grey | #808080 | + | grey | #808080 | grey / red | |
green | #008000 | + | green | #008000 | green / red | |
lime | #00ff00 | + | lime | #00ff00 | lime / red | |
maroon | #800000 | + | maroon | #800000 | maroon / red | |
navy | #000080 | + | navy | #000080 | navy / red | |
olive | #808000 | + | olive | #808000 | olive / red | |
purple | #800080 | + | purple | #800080 | purple / red | |
red | #ff0000 | + | red | #ff0000 | red / red | |
silver | #c0c0c0 | + | silver | #c0c0c0 | silver / red | |
teal | #008080 | + | teal | #008080 | teal / red | |
white | #ffffff | + | white | #ffffff | white / red | |
yellow | #ffff00 | + | yellow | #ffff00 | yellow / red |