Ressourcen: 120 HTML Farbnamen - Kombination von Farbe darkorange und Farbwert #faebd7

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 darkorange			Schriftfarbwert #faebd7
Detail	:	Hintergrund darkorange	Detail	:	Schrift #faebd7
Farbe	:	darkorange	Farbwert	:	#faebd7
Farbwert	:	#ff8c00	Farbe	:	antiquewhite
HTML	:	darkorange	HTML	:	#faebd7
HTML (Wert)	:	#ff8c00	HTML (Wert)	:	#faebd7
CSS	:	darkorange	CSS	:	#faebd7
CSS (Wert)	:	#ff8c00	CSS (Wert)	:	#faebd7
CSS (kürzest)	:	#ff8c00	CSS (kürzest)	:	#faebd7
CSS (RGB)	:	rgb(255,140,0)	CSS (RGB)	:	rgb(250,235,215)
CSS (%RGB)	:	rgb(100%,54%,0%)	CSS (%RGB)	:	rgb(98%,92%,84%)

Verlauf Hintergrundfarbe darkorange nach Schriftfarbwert #faebd7
#ff8c00	#fe991e	#fda73d	#fcb45c	#fcc27a	#fbcf99	#faddb8	#faebd7
#ff8c00	#fe991e	#fda73d	#fcb45c	#fcc27a	#fbcf99	#faddb8	#faebd7

Kombination von darkorange und #faebd7
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit der Farben #faebd7 und darkorange beträgt 90.52%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 9.48%. #faebd7 eignet sich nicht als Schriftfarbe auf Hintergrund darkorange, weil sich sowohl Helligkeit als auch die Farben zu ähnlich sind.

Hintergrundfarbe darkorange				Schriftfarbwert #faebd7
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ff8c00	#ff8c00	#ff8c00	#ff8c00	#faebd7	#faebd7	#faebd7	#faebd7
#ff9c24	#ff9c24	#da7800	#da7800	#faeddc	#faeddc	#d6c9b8	#d6c9b8
#ffac48	#ffac48	#b66400	#b66400	#fbf0e2	#fbf0e2	#b2a799	#b2a799
#ffbd6d	#ffbd6d	#915000	#915000	#fcf3e8	#fcf3e8	#8e867a	#8e867a
#ffcd91	#ffcd91	#6d3c00	#6d3c00	#fcf6ed	#fcf6ed	#6b645c	#6b645c
#ffdeb6	#ffdeb6	#482800	#482800	#fdf9f3	#fdf9f3	#47433d	#47433d
#ffeeda	#ffeeda	#241400	#241400	#fefcf9	#fefcf9	#23211e	#23211e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe darkorange und Farbwert #faebd7

Wechsel der Hintergrundfarbe bei Hover mit Tag legend

Die Hintergrundfarbe soll sich von Farbe darkorange auf Farbwert #faebd7 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Darstellung von <legend> in Farbe darkorange vor.

Als Beispiel legen wir die Hintergrundfarbe von <legend> auf Farbe darkorange fest:

<style type="text/css"><!--
  legend { 
    background-color:darkorange;
  }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Hintergrundfarbe auf #faebd7 geändert wird.

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

Mehr zum Thema legend können Sie in Formulare in HTML nachsehen. Einzelheiten vom Befehl legend lesen Sie in der HTML Referenz unter <legend>.

Wechsel der Unterstreichung bei Hover von HTML-Tag h5

Mit HTML-Tag <h5> erzeugen Sie eine Überschrift. Sie kann hervorgehoben und farblich gestaltet werden.

Die Unterstreichungsfarbe soll sich von Farbe darkorange auf Farbwert #faebd7 ändern, wenn man mit der Maus auf <h5> zeigt. Wir bereiten zunächst die Formatierung von <h5> in Farbe darkorange vor.

Beispielsweise unterstreichen wir <h5> mit Hilfe eines gezahnten Rahmens mit 3 Pixel Dicke in Farbe darkorange.

<style type="text/css"><!--
  h5 { 
    border-bottom-style: ridge; 
    border-bottom-width: 3px; 
    border-bottom-color: darkorange;
  }
//-->
</style>

Nun stellen wir ein, dass bei Berührung mit der Maus die Unterstreichungsfarbe auf #faebd7 gesetzt wird.

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

Die Idee ist hierbei, verschiedene Formatierungen für Inhalt und Unterstreichung zu verwenden. Öfter sehen Sie dies bei Verweisen. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Es ist aber keine normale Unterstreichung, der Text selbst hat gar keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Mehr zum Thema finden Sie in Grundlegende Gestaltungselemente in HTML. Mehr zum HTML-Tag h5 ist in der HTML Referenz unter <h5> ausführlich zusammengestellt.