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 lightcoral | Schriftfarbe turquoise | |||||
Detail | : | Hintergrund lightcoral | Detail | : | Schrift turquoise | |
Farbe | : | lightcoral | Farbe | : | turquoise | |
Farbwert | : | #f08080 | Farbwert | : | #40e0d0 | |
HTML | : | lightcoral | HTML | : | turquoise | |
HTML (Wert) | : | #f08080 | HTML (Wert) | : | #40e0d0 | |
CSS | : | lightcoral | CSS | : | turquoise | |
CSS (Wert) | : | #f08080 | CSS (Wert) | : | #40e0d0 | |
CSS (kürzest) | : | #f08080 | CSS (kürzest) | : | #40e0d0 | |
CSS (RGB) | : | rgb(240,128,128) | CSS (RGB) | : | rgb(64,224,208) | |
CSS (%RGB) | : | rgb(94%,50%,50%) | CSS (%RGB) | : | rgb(25%,87%,81%) |
Verlauf Hintergrundfarbe lightcoral nach Schriftfarbe turquoise | |||||||
#f08080 | #d68d8b | #bd9b96 | #a4a9a2 | #8bb6ad | #72c4b9 | #59d2c4 | #40e0d0 |
#f08080 | #d68d8b | #bd9b96 | #a4a9a2 | #8bb6ad | #72c4b9 | #59d2c4 | #40e0d0 |
Kombination von lightcoral und turquoise | |||||||
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. 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. | turquoise eignet sich nicht als Schriftfarbe auf Hintergrund lightcoral, da weder der Helligkeitsunterschied noch der Farbunterschied ausreichend sind. Die Ähnlichkeit von turquoise und lightcoral ergibt sich zu 92.48%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 7.52%. |
Hintergrundfarbe lightcoral | Schriftfarbe turquoise | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#f08080 | #f08080 | #f08080 | #f08080 | #40e0d0 | #40e0d0 | #40e0d0 | #40e0d0 |
#f29292 | #f29292 | #cd6d6d | #cd6d6d | #5be4d6 | #5be4d6 | #36c0b2 | #36c0b2 |
#f4a4a4 | #f4a4a4 | #ab5b5b | #ab5b5b | #76e8dd | #76e8dd | #2da094 | #2da094 |
#f6b6b6 | #f6b6b6 | #894949 | #894949 | #91ede4 | #91ede4 | #248076 | #248076 |
#f8c8c8 | #f8c8c8 | #663636 | #663636 | #adf1ea | #adf1ea | #1b6059 | #1b6059 |
#fadada | #fadada | #442424 | #442424 | #c8f6f1 | #c8f6f1 | #12403b | #12403b |
#fcecec | #fcecec | #221212 | #221212 | #e3faf8 | #e3faf8 | #09201d | #09201d |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Mit HTML-Befehl <h4> setzen Sie eine Überschrift der 4. Stufe. Diese kann man farblich gestalten und hervorheben.
Hier ändern wir die Textfarbe von <h4> auf Farbe turquoise und die Hintergrundfarbe von <h4> auf Farbe lightcoral. Die Schriftart ändern wir auf verdana. Als Schriftgröße wählen wir 13px.
<style type="text/css"><!-- h4 { background-color: lightcoral; color: turquoise; font-size: 13px; font-family: verdana; } //--> </style>
Weiteres zum Thema h4 können Sie in Grundlegende Gestaltungselemente in HTML lesen. Einzelheiten vom HTML-Befehl h4 erfahren Sie in der HTML Referenz unter <h4>.
Für dieses Beispiel umranden wir <table> mit einem . Den Hintergrund von <table> färben wir entsprechend mit Farbe lightcoral. In HTML geht dies nicht. Wir nutzen daher CSS zur Formatierung.
<style type="text/css"><!-- table { border:2pt dotted turquoise; background-color:lightcoral; } //--> </style>
Mehr zu table können Sie in Tabellen in HTML erfahren. Zur Beschreibung vom hier genutzten Befehl <table>.