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.
Hintergrundfarbwert #dc143c | Schriftfarbe cornflowerblue | |||||
| Detail | : | Hintergrund #dc143c | Detail | : | Schrift cornflowerblue | |
| Farbwert | : | #dc143c | Farbe | : | cornflowerblue | |
| Farbe | : | crimson | Farbwert | : | #6495ed | |
| HTML | : | #dc143c | HTML | : | cornflowerblue | |
| HTML (Wert) | : | #dc143c | HTML (Wert) | : | #6495ed | |
| CSS | : | #dc143c | CSS | : | cornflowerblue | |
| CSS (Wert) | : | #dc143c | CSS (Wert) | : | #6495ed | |
| CSS (kürzest) | : | #dc143c | CSS (kürzest) | : | #6495ed | |
| CSS (RGB) | : | rgb(220,20,60) | CSS (RGB) | : | rgb(100,149,237) | |
| CSS (%RGB) | : | rgb(86%,7%,23%) | CSS (%RGB) | : | rgb(39%,58%,92%) | |
Verlauf Hintergrundfarbwert #dc143c nach Schriftfarbe cornflowerblue | |||||||
| #dc143c | #ca2655 | #b9386e | #a84b87 | #975da1 | #8670ba | #7582d3 | #6495ed |
| #dc143c | #ca2655 | #b9386e | #a84b87 | #975da1 | #8670ba | #7582d3 | #6495ed |
Kombination von #dc143c und cornflowerblue | |||||||
| 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. | cornflowerblue ist nicht als Schriftfarbe auf Hintergrund #dc143c geeignet. Sowohl Helligkeit als auch die Farben sind zu ähnlich. Die Ähnlichkeit von cornflowerblue und #dc143c ergibt sich zu 92.01%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 7.99%. | ||||||
Hintergrundfarbwert #dc143c | Schriftfarbe cornflowerblue | ||||||
| Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
| #dc143c | #dc143c | #dc143c | #dc143c | #6495ed | #6495ed | #6495ed | #6495ed |
| #e13557 | #e13557 | #bc1133 | #bc1133 | #7aa4ef | #7aa4ef | #557fcb | #557fcb |
| #e65773 | #e65773 | #9d0e2a | #9d0e2a | #90b3f2 | #90b3f2 | #476aa9 | #476aa9 |
| #eb788f | #eb788f | #7d0b22 | #7d0b22 | #a6c2f4 | #a6c2f4 | #395587 | #395587 |
| #f09aab | #f09aab | #5e0819 | #5e0819 | #bcd1f7 | #bcd1f7 | #2a3f65 | #2a3f65 |
| #f5bbc7 | #f5bbc7 | #3e0511 | #3e0511 | #d2e0f9 | #d2e0f9 | #1c2a43 | #1c2a43 |
| #fadde3 | #fadde3 | #1f0208 | #1f0208 | #e8effc | #e8effc | #0e1521 | #0e1521 |
| #ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
In diesem Beispiel umranden wir <p> mit einem gefurchten, 2 Punkte dicken Rahmen in Farbe cornflowerblue . Die Hintergrundfarbe für <p> färben wir entsprechend mit Farbwert #dc143c. In HTML ist dies kaum machbar. Daher nutzen wir hier CSS.
<style type="text/css"><!-- p { border:2pt groove cornflowerblue; background-color:#dc143c; } //--> </style>
Mehr zum Thema p lesen Sie in Grundlegende Gestaltungselemente in HTML. Möglichkeiten des hier genutzten Tag <p>.
Ein Link wird mit HTML-Befehl <a> erzeugt. Er kann farblich gestaltet und hervorgehoben werden.
Hier ändern wir die Textfarbe von <a> auf Farbe cornflowerblue und die Hintergrundfarbe von <a> auf Farbwert #dc143c. Als Schriftart setzen wir sans-serif und setzen die Schriftgröße auf 110%.
<style type="text/css"><!-- a { font-family: sans-serif; color: cornflowerblue; background-color: #dc143c; font-size: 110%; } //--> </style>
Weiteres zum Thema a finden Sie in Verweise und Protokolle in HTML. Mehr zum Tag <a>.