Ressourcen: 120 HTML Farbnamen - Kombination von Farbe orchid und Farbwert #a9a9a9

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 orchid			Schriftfarbwert #a9a9a9
Detail	:	Hintergrund orchid	Detail	:	Schrift #a9a9a9
Farbe	:	orchid	Farbwert	:	#a9a9a9
Farbwert	:	#da70d6	Farbe	:	darkgray
HTML	:	orchid	HTML	:	#a9a9a9
HTML (Wert)	:	#da70d6	HTML (Wert)	:	#a9a9a9
CSS	:	orchid	CSS	:	#a9a9a9
CSS (Wert)	:	#da70d6	CSS (Wert)	:	#a9a9a9
CSS (kürzest)	:	#da70d6	CSS (kürzest)	:	#a9a9a9
CSS (RGB)	:	rgb(218,112,214)	CSS (RGB)	:	rgb(169,169,169)
CSS (%RGB)	:	rgb(85%,43%,83%)	CSS (%RGB)	:	rgb(66%,66%,66%)

Verlauf Hintergrundfarbe orchid nach Schriftfarbwert #a9a9a9
#da70d6	#d378cf	#cc80c9	#c588c2	#be90bc	#b798b5	#b0a0af	#a9a9a9
#da70d6	#d378cf	#cc80c9	#c588c2	#be90bc	#b798b5	#b0a0af	#a9a9a9

Kombination von orchid und #a9a9a9
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit der Farben #a9a9a9 und orchid ergibt sich zu 94.15%. Die Lesbarkeit dieser Kombination liegt damit bei 5.85%. Auf Hintergrund orchid ist #a9a9a9 ungeeignet. Die Unterschiede in der Helligkeit und Farbe sind unzureichend.

Hintergrundfarbe orchid				Schriftfarbwert #a9a9a9
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#da70d6	#da70d6	#da70d6	#da70d6	#a9a9a9	#a9a9a9	#a9a9a9	#a9a9a9
#df84db	#df84db	#ba60b7	#ba60b7	#b5b5b5	#b5b5b5	#909090	#909090
#e498e1	#e498e1	#9b5098	#9b5098	#c1c1c1	#c1c1c1	#787878	#787878
#e9ade7	#e9ade7	#7c407a	#7c407a	#cdcdcd	#cdcdcd	#606060	#606060
#efc1ed	#efc1ed	#5d305b	#5d305b	#dadada	#dadada	#484848	#484848
#f4d6f3	#f4d6f3	#3e203d	#3e203d	#e6e6e6	#e6e6e6	#303030	#303030
#f9eaf9	#f9eaf9	#1f101e	#1f101e	#f2f2f2	#f2f2f2	#181818	#181818
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe orchid und Farbwert #a9a9a9

Wechsel der Unterstreichung bei Hover mit Tag a

Einen Hyperlink setzt man mit HTML-Tag <a>. Dieser kann farblich gestaltet und hervorgehoben werden.

Die Farbe der Unterstreichung soll sich von Farbe orchid auf Farbwert #a9a9a9 ändern, wenn man mit der Maus auf <a> zeigt. Wir bereiten zunächst eine Darstellung von <a> in Farbe orchid vor.

Hier unterstreichen wir <a> mit einem gepunkteten Rahmen mit 4 Pixel Dicke in Farbe orchid.

<style type="text/css"><!--
  a { 
    border-bottom-width: 4px; 
    border-bottom-style: dotted; 
    border-bottom-color: orchid;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Hover die Unterstreichungsfarbe zu #a9a9a9 ändert.

<style type="text/css"><!--
  a:hover { 
    border-bottom-color:#a9a9a9;
  }
//-->
</style>

Die Idee ist dabei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben. Manchmal sehen Sie diesen Effekt bei Hyperlinks. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine "normale" Unterstreichung, der Text selbst hat überhaupt keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zu a finden Sie in Verweise und Protokolle in HTML. Einzelheiten vom HTML-Befehl <a>.

Wechsel der Umrandung bei Hover mit HTML-Tag del

Die Rahmenfarbe soll sich von Farbe orchid auf Farbwert #a9a9a9 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <del> in Farbe orchid vor.

In diesem Beispiel umranden wir <del> mit einem 2 Pixel dicken, doppelten Rahmen in Farbe orchid.

<style type="text/css"><!--
  del { 
    border-width:2px; 
    border-style:double; 
    border-color:orchid;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Berührung mit der Maus die Rahmenfarbe zu #a9a9a9 ändert.

<style type="text/css"><!--
  del: hover { 
    border-color: #a9a9a9;
  }
//-->
</style>

Mehr zum hier gezeigten HTML-Befehl del ist in der HTML Referenz bei <del> ausführlich zusammengestellt.