Ressourcen: 120 HTML Farbnamen - Kombination von Farbe blueviolet und Farbwert #ffd700

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 blueviolet			Schriftfarbwert #ffd700
Detail	:	Hintergrund blueviolet	Detail	:	Schrift #ffd700
Farbe	:	blueviolet	Farbwert	:	#ffd700
Farbwert	:	#8a2be2	Farbe	:	gold
HTML	:	blueviolet	HTML	:	#ffd700
HTML (Wert)	:	#8a2be2	HTML (Wert)	:	#ffd700
CSS	:	blueviolet	CSS	:	#ffd700
CSS (Wert)	:	#8a2be2	CSS (Wert)	:	#ffd700
CSS (kürzest)	:	#8a2be2	CSS (kürzest)	:	#ffd700
CSS (RGB)	:	rgb(138,43,226)	CSS (RGB)	:	rgb(255,215,0)
CSS (%RGB)	:	rgb(54%,16%,88%)	CSS (%RGB)	:	rgb(100%,84%,0%)

Verlauf Hintergrundfarbe blueviolet nach Schriftfarbwert #ffd700
#8a2be2	#9a43c1	#ab5ca1	#bc7481	#cc8d60	#dda540	#eebe20	#ffd700
#8a2be2	#9a43c1	#ab5ca1	#bc7481	#cc8d60	#dda540	#eebe20	#ffd700

Kombination von blueviolet und #ffd700
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 #ffd700 und blueviolet beträgt 79.77%. Die Lesbarkeit dieser Farbkombination liegt damit bei 20.23%. Auf Hintergrund blueviolet ist #ffd700 ungeeignet. Zwar ist der Farbunterschied gut, die Helligkeiten sind sich jedoch zu ähnlich.

Hintergrundfarbe blueviolet				Schriftfarbwert #ffd700
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#8a2be2	#8a2be2	#8a2be2	#8a2be2	#ffd700	#ffd700	#ffd700	#ffd700
#9a49e6	#9a49e6	#7624c1	#7624c1	#ffdc24	#ffdc24	#dab800	#dab800
#ab67ea	#ab67ea	#621ea1	#621ea1	#ffe248	#ffe248	#b69900	#b69900
#bc85ee	#bc85ee	#4e1881	#4e1881	#ffe86d	#ffe86d	#917a00	#917a00
#cca4f2	#cca4f2	#3b1260	#3b1260	#ffed91	#ffed91	#6d5c00	#6d5c00
#ddc2f6	#ddc2f6	#270c40	#270c40	#fff3b6	#fff3b6	#483d00	#483d00
#eee0fa	#eee0fa	#130620	#130620	#fff9da	#fff9da	#241e00	#241e00
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe blueviolet und Farbwert #ffd700

Wechsel der Textfarbe bei Hover von Befehl li

Die Textfarbe soll sich von Farbe blueviolet auf Farbwert #ffd700 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <li> in Farbe blueviolet vor.

Wir legen z.B. die Textfarbe von <li> auf Farbe blueviolet fest. Zwar lassen wir die Hintergrundfarbe unverändert, setzen jedoch die Schriftart auf sans-serif. Die Schriftgröße setzen wir auf 14px:

<style type="text/css"><!--
  li { 
    color:blueviolet; 
    font-size:14px; 
    font-family:sans-serif;
  }
//-->
</style>

Jetzt fordern wir, dass bei Berührung mit der Maus die Textfarbe auf #ffd700 geändert wird.

<style type="text/css"><!--
  li: hover { 
    color: #ffd700;
  }
//-->
</style>

Weiteres zum Thema erfahren Sie in Listen und Glossare in HTML. Mehr zum hier genutzten HTML-Tag li ist in der HTML Referenz unter <li> beschrieben.

Text- und Unterstreichungsfarben mit Befehl h2

Eine Überschrift der 2. Stufe setzt man mit HTML-Tag <h2> und kann farblich gestaltet und hervorgehoben werden.

Wir ändern Hher die Textfarbe von <h2> auf Farbwert #ffd700. Die Schriftart setzen wir auf verdana. Die Schriftgröße setzen wir auf 90%. Wir unterstreichen den Inhalt von <h2> mit Hilfe eines gestrichelten Rahmens mit 5 Punkte Dicke in Farbe blueviolet. Dies ist mit HTML kaum möglich. Wir verwenden deshalb CSS.

<style type="text/css"><!--
  h2 { 
    font-size:90%; 
    color:#ffd700; 
    border-bottom-color:blueviolet; 
    border-bottom-style:dashed; 
    font-family:verdana; 
    border-bottom-width:5pt;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Mehr zum Thema können Sie in Grundlegende Gestaltungselemente in HTML nachlesen. Mehr zum hier gezeigten Befehl h2 ist in der HTML Referenz bei <h2> genau beschrieben.