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 #ffd700 | Schriftfarbe darkgreen | |||||
Detail | : | Hintergrund #ffd700 | Detail | : | Schrift darkgreen | |
Farbwert | : | #ffd700 | Farbe | : | darkgreen | |
Farbe | : | gold | Farbwert | : | #006400 | |
HTML | : | #ffd700 | HTML | : | darkgreen | |
HTML (Wert) | : | #ffd700 | HTML (Wert) | : | #006400 | |
CSS | : | #ffd700 | CSS | : | darkgreen | |
CSS (Wert) | : | #ffd700 | CSS (Wert) | : | #006400 | |
CSS (kürzest) | : | #ffd700 | CSS (kürzest) | : | #006400 | |
CSS (RGB) | : | rgb(255,215,0) | CSS (RGB) | : | rgb(0,100,0) | |
CSS (%RGB) | : | rgb(100%,84%,0%) | CSS (%RGB) | : | rgb(0%,39%,0%) |
Verlauf Hintergrundfarbwert #ffd700 nach Schriftfarbe darkgreen | |||||||
#ffd700 | #dac600 | #b6b600 | #91a500 | #6d9500 | #488400 | #247400 | #006400 |
#ffd700 | #dac600 | #b6b600 | #91a500 | #6d9500 | #488400 | #247400 | #006400 |
Kombination von #ffd700 und darkgreen | |||||||
Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras vestibulum tristique erat, ac interdum justo cursus in. | Die Ähnlichkeit von darkgreen und #ffd700 beträgt 74.74%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 25.26%. darkgreen eignet sich nicht als Schriftfarbe auf Hintergrund #ffd700. Zwar ist der Helligkeitsunterschied in Ordnung, die Farben selbst sind zu ähnlich. |
Hintergrundfarbwert #ffd700 | Schriftfarbe darkgreen | ||||||
Verlauf nach Weiß | Verlauf nach Schwarz | Verlauf nach Weiß | Verlauf nach Schwarz | ||||
#ffd700 | #ffd700 | #ffd700 | #ffd700 | #006400 | #006400 | #006400 | #006400 |
#ffdc24 | #ffdc24 | #dab800 | #dab800 | #247a24 | #247a24 | #005500 | #005500 |
#ffe248 | #ffe248 | #b69900 | #b69900 | #489048 | #489048 | #004700 | #004700 |
#ffe86d | #ffe86d | #917a00 | #917a00 | #6da66d | #6da66d | #003900 | #003900 |
#ffed91 | #ffed91 | #6d5c00 | #6d5c00 | #91bc91 | #91bc91 | #002a00 | #002a00 |
#fff3b6 | #fff3b6 | #483d00 | #483d00 | #b6d2b6 | #b6d2b6 | #001c00 | #001c00 |
#fff9da | #fff9da | #241e00 | #241e00 | #dae8da | #dae8da | #000e00 | #000e00 |
#ffffff | #ffffff | #000000 | #000000 | #ffffff | #ffffff | #000000 | #000000 |
Die Textfarbe soll sich von Farbwert #ffd700 auf Farbe darkgreen ändern, wenn man mit der Maus auf <p> zeigt. Bereiten wir zunächst eine Formatierung von <p> in Farbwert #ffd700 vor.
Wir ändern hier bei <p> die Textfarbe auf Farbwert #ffd700. Die Größe der Schrift setzen wir auf 110%.
<style type="text/css"><!-- p { color: #ffd700; font-size: 110%; } //--> </style>Nun fordern wir, dass sich bei Mausberührung die Textfarbe auf darkgreen ändert.
<style type="text/css"><!-- p:hover { color:darkgreen; } //--> </style>
Weiteres zu p können Sie in Grundlegende Gestaltungselemente in HTML finden. Einzelheiten des Befehl p lesen Sie in der HTML Referenz unter <p>.
Hier umranden wir <fieldset> mit einem gezahnten, 4 Punkte dicken Rahmen in Farbe darkgreen . Den Hintergrund von <fieldset> setzen wir entsprechend auf Farbwert #ffd700. Das geht mit HTML nicht. Deshalb nutzen wir hier CSS.
<style type="text/css"><!-- fieldset { border-color:darkgreen; background-color:#ffd700; border-style:ridge; border-width:4pt; } //--> </style>
Mehr zum Thema fieldset finden Sie in Formulare in HTML. Die Beschreibung vom hier gezeigten Tag fieldset erfahren Sie in der HTML Referenz unter <fieldset>.