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 lightgreen | Schriftfarbe cadetblue | |||||
Detail | : | Hintergrund lightgreen | Detail | : | Schrift cadetblue | |
Farbe | : | lightgreen | Farbe | : | cadetblue | |
Farbwert | : | #90ee90 | Farbwert | : | #5f9ea0 | |
HTML | : | lightgreen | HTML | : | cadetblue | |
HTML (Wert) | : | #90ee90 | HTML (Wert) | : | #5f9ea0 | |
CSS | : | lightgreen | CSS | : | cadetblue | |
CSS (Wert) | : | #90ee90 | CSS (Wert) | : | #5f9ea0 | |
CSS (kürzest) | : | #90ee90 | CSS (kürzest) | : | #5f9ea0 | |
CSS (RGB) | : | rgb(144,238,144) | CSS (RGB) | : | rgb(95,158,160) | |
CSS (%RGB) | : | rgb(56%,93%,56%) | CSS (%RGB) | : | rgb(37%,61%,62%) |
Verlauf Hintergrundfarbe lightgreen nach Schriftfarbe cadetblue | |||||||
#90ee90 | #89e292 | #82d794 | #7bcb96 | #74c099 | #6db49b | #66a99d | #5f9ea0 |
#90ee90 | #89e292 | #82d794 | #7bcb96 | #74c099 | #6db49b | #66a99d | #5f9ea0 |
Kombination von lightgreen und cadetblue | |||||||
Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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. | Auf Hintergrund lightgreen ist cadetblue ungeeignet, da sich die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit von cadetblue und lightgreen beträgt 89.75%. Die Lesbarkeit dieser Kombination bewerte ich mit 10.25%. |
Hintergrundfarbe lightgreen | Schriftfarbe cadetblue | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#90ee90 | #90ee90 | #90ee90 | #90ee90 | #5f9ea0 | #5f9ea0 | #5f9ea0 | #5f9ea0 |
#9ff09f | #9ff09f | #7bcc7b | #7bcc7b | #75abad | #75abad | #518789 | #518789 |
#aff2af | #aff2af | #66aa66 | #66aa66 | #8cb9bb | #8cb9bb | #437072 | #437072 |
#bff5bf | #bff5bf | #528852 | #528852 | #a3c7c8 | #a3c7c8 | #365a5b | #365a5b |
#cff7cf | #cff7cf | #3d663d | #3d663d | #bad5d6 | #bad5d6 | #284344 | #284344 |
#dffadf | #dffadf | #294429 | #294429 | #d1e3e3 | #d1e3e3 | #1b2d2d | #1b2d2d |
#effcef | #effcef | #142214 | #142214 | #e8f1f1 | #e8f1f1 | #0d1616 | #0d1616 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Für dieses Beispiel umranden wir <pre> mit einem 3 Pixel dicken, herausstehenden Rahmen in Farbe cadetblue . Die Hintergrundfarbe für <pre> setzen wir auf Farbe lightgreen. Mit HTML ist dies nicht möglich. Deshalb formatieren wir mit CSS.
<style type="text/css"><!-- pre { background-color: lightgreen; border-style: outset; border-color: cadetblue; border-width: 3px; } //--> </style>
Mehr zu pre finden Sie in Blockorientierte Elemente in HTML. Mehr zum HTML-Tag pre ist in der HTML Referenz bei <pre> ausführlich beschrieben.
Man spricht vom so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Er unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <th> mit unterschiedlichen Hintergrundfarben Farbe lightgreen und Farbe cadetblue.
<style type="text/css"><!-- th.ger { background-color:lightgreen; } th.ung { background-color: cadetblue; } //--> </style>
Diese Klassen werden abwechselnd angewendet.
<table> <tr><td class="ger">D1:1</td><td class="ung">D2:1</td><td class="ger">D3:1</td></tr> <tr><td class="ger">D1:2</td><td class="ung">D2:2</td><td class="ger">D3:2</td></tr> <tr><td class="ger">D1:3</td><td class="ung">D2:3</td><td class="ger">D3:3</td></tr> </table>
Mehr zu th erfahren Sie in Tabellen in HTML. Der Tag th ist in der HTML Referenz unter <th> genau gezeigt.