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, einem bestimmten Schema folgenden, Farbwerten, definierte man noch 120 Werte und ordnete ihnen Namen zu. Zusammen mit den 17 Standard-HTML-Farben, die ebenfalls Namen haben, ergeben sich so 137 HTML Farbnamen.
Hintergrundfarbe lightgrey | Schriftfarbe coral | |||||
Detail | : | Hintergrund lightgrey | Detail | : | Schrift coral | |
Farbe | : | lightgrey | Farbe | : | coral | |
Farbwert | : | #d3d3d3 | Farbwert | : | #ff7f50 | |
HTML | : | lightgrey | HTML | : | coral | |
HTML (Wert) | : | #d3d3d3 | HTML (Wert) | : | #ff7f50 | |
CSS | : | lightgrey | CSS | : | coral | |
CSS (Wert) | : | #d3d3d3 | CSS (Wert) | : | #ff7f50 | |
CSS (kürzest) | : | #d3d3d3 | CSS (kürzest) | : | #ff7f50 | |
CSS (RGB) | : | rgb(211,211,211) | CSS (RGB) | : | rgb(255,127,80) | |
CSS (%RGB) | : | rgb(82%,82%,82%) | CSS (%RGB) | : | rgb(100%,49%,31%) |
Verlauf Hintergrundfarbe lightgrey nach Schriftfarbe coral | |||||||
#d3d3d3 | #d9c7c0 | #dfbbad | #e5af9a | #eca388 | #f29775 | #f88b62 | #ff7f50 |
#d3d3d3 | #d9c7c0 | #dfbbad | #e5af9a | #eca388 | #f29775 | #f88b62 | #ff7f50 |
Kombination von lightgrey und coral | |||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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 vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. | coral ist nicht als Schriftfarbe auf Hintergrund lightgrey geeignet, weil sowohl Helligkeit als auch die Farben zu ähnlich sind. Die Ähnlichkeit von coral und lightgrey beträgt 92.05%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 7.95%. |
Hintergrundfarbe lightgrey | Schriftfarbe coral | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#d3d3d3 | #d3d3d3 | #d3d3d3 | #d3d3d3 | #ff7f50 | #ff7f50 | #ff7f50 | #ff7f50 |
#d9d9d9 | #d9d9d9 | #b4b4b4 | #b4b4b4 | #ff9169 | #ff9169 | #da6c44 | #da6c44 |
#dfdfdf | #dfdfdf | #969696 | #969696 | #ffa382 | #ffa382 | #b65a39 | #b65a39 |
#e5e5e5 | #e5e5e5 | #787878 | #787878 | #ffb59b | #ffb59b | #91482d | #91482d |
#ececec | #ececec | #5a5a5a | #5a5a5a | #ffc8b4 | #ffc8b4 | #6d3622 | #6d3622 |
#f2f2f2 | #f2f2f2 | #3c3c3c | #3c3c3c | #ffdacd | #ffdacd | #482416 | #482416 |
#f8f8f8 | #f8f8f8 | #1e1e1e | #1e1e1e | #ffece6 | #ffece6 | #24120b | #24120b |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Einen Link setzen Sie mit Befehl <a>. Er kann farblich gestaltet und hervorgehoben werden.
Für dieses Beispiel umranden wir <a> mit einem gefurchten, 5 Pixel dicken Rahmen in Farbe coral . Den Hintergrund von <a> färben wir mit Farbe lightgrey. Mit HTML geht das nicht. Wir verwenden daher CSS zur Formatierung.
<style type="text/css"><!-- a { border:5px groove coral; background-color:lightgrey; } //--> </style>
Weiteres zum Thema erfahren Sie in Verweise und Protokolle in HTML. Die Beschreibung vom HTML-Befehl a finden Sie in der HTML Referenz unter <a>.
Eine Überschrift der 1. Stufe erzeugt man mit HTML-Befehl <h1>. Diese kann man farblich gestalten.
Die Farbe der Unterstreichung soll sich von Farbe lightgrey auf Farbe coral ändern, wenn man mit der Maus auf <h1> zeigt. Bereiten wir zunächst die Formatierung von <h1> in Farbe lightgrey vor.
In diesem Beispiel unterstreichen wir <h1> mit Hilfe eines gestrichelten Rahmens mit 2 Pixel Dicke in Farbe lightgrey.
<style type="text/css"><!-- h1 { border-bottom-style: dashed; border-bottom-color: lightgrey; border-bottom-width: 2px; } //--> </style>Nun fordern wir, dass bei Mausberührung die Unterstreichungsfarbe auf coral geändert wird.
<style type="text/css"><!-- h1:hover { border-bottom-color:coral; } //--> </style>
Die Idee ist hierbei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu nutzen. Manchmal sehen Sie diesen Effekt bei Links. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Es ist jedoch keine "wirkliche" Unterstreichung, der Text hat keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.
Weiteres zum Thema h1 erfahren Sie in Grundlegende Gestaltungselemente in HTML. Einzelheiten des HTML-Befehl h1 erfahren Sie in der HTML Referenz unter <h1>.