Ressourcen: 120 HTML Farbnamen - Kombination von Farbe orange und Farbwert #696969

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 orange			Schriftfarbwert #696969
Detail	:	Hintergrund orange	Detail	:	Schrift #696969
Farbe	:	orange	Farbwert	:	#696969
Farbwert	:	#ffa500	Farbe	:	dimgray
HTML	:	orange	HTML	:	#696969
HTML (Wert)	:	#ffa500	HTML (Wert)	:	#696969
CSS	:	orange	CSS	:	#696969
CSS (Wert)	:	#ffa500	CSS (Wert)	:	#696969
CSS (kürzest)	:	#ffa500	CSS (kürzest)	:	#696969
CSS (RGB)	:	rgb(255,165,0)	CSS (RGB)	:	rgb(105,105,105)
CSS (%RGB)	:	rgb(100%,64%,0%)	CSS (%RGB)	:	rgb(41%,41%,41%)

Verlauf Hintergrundfarbe orange nach Schriftfarbwert #696969
#ffa500	#e99c0f	#d4931e	#be8b2d	#a9823c	#937a4b	#7e715a	#696969
#ffa500	#e99c0f	#d4931e	#be8b2d	#a9823c	#937a4b	#7e715a	#696969

Kombination von orange und #696969
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras vestibulum tristique erat, ac interdum justo cursus in.				Auf Hintergrund orange ist #696969 ungeeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind gross genug. Die Ähnlichkeit von #696969 und orange ergibt sich zu 86.76%. Die Lesbarkeit dieser Kombination bewerte ich mit 13.24%.

Hintergrundfarbe orange				Schriftfarbwert #696969
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffa500	#ffa500	#ffa500	#ffa500	#696969	#696969	#696969	#696969
#ffb124	#ffb124	#da8d00	#da8d00	#7e7e7e	#7e7e7e	#5a5a5a	#5a5a5a
#ffbe48	#ffbe48	#b67500	#b67500	#939393	#939393	#4b4b4b	#4b4b4b
#ffcb6d	#ffcb6d	#915e00	#915e00	#a9a9a9	#a9a9a9	#3c3c3c	#3c3c3c
#ffd891	#ffd891	#6d4600	#6d4600	#bebebe	#bebebe	#2d2d2d	#2d2d2d
#ffe5b6	#ffe5b6	#482f00	#482f00	#d4d4d4	#d4d4d4	#1e1e1e	#1e1e1e
#fff2da	#fff2da	#241700	#241700	#e9e9e9	#e9e9e9	#0f0f0f	#0f0f0f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe orange und Farbwert #696969

Wechsel der Umrandung bei Hover mit Tag li

Die Rahmenfarbe soll sich von Farbe orange auf Farbwert #696969 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <li> in Farbe orange vor.

In diesem Beispiel umranden wir <li> mit einem 3 Pixel dicken, herausstehenden Rahmen in Farbe orange.

<style type="text/css"><!--
  li { border:3px outset orange; }
//-->
</style>

Jetzt fordern wir, dass bei Hover die Rahmenfarbe auf #696969 gesetzt wird.

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

Weiteres zum Thema können Sie in Listen und Glossare in HTML nachlesen. Möglichkeiten des Tag <li>.

Wechsel der Hintergrundfarbe bei Hover von Tag p

Die Hintergrundfarbe soll sich von Farbe orange auf Farbwert #696969 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <p> in Farbe orange vor.

Wir legen für dieses Beispiel Farbe orange als Hintergrundfarbe von <p> fest. Zwar ändern wir die Textfarbe nicht, setzen jedoch die Schriftart auf verdana:

<style type="text/css"><!--
  p { 
    background-color: orange; 
    font-family: verdana;
  }
//-->
</style>

Nun fordern wir, dass sich bei Mausberührung die Hintergrundfarbe auf #696969 ändert.

<style type="text/css"><!--
  p:hover { 
    background-color:#696969;
  }
//-->
</style>

Weiteres zu p finden Sie in Grundlegende Gestaltungselemente in HTML. Beschreibung vom hier verwendeten Befehl <p>.