Ressourcen: 120 HTML Farbnamen - Kombination von Farbe darkorange und Farbe coral

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			Schriftfarbe coral
Detail	:	Hintergrund darkorange	Detail	:	Schrift coral
Farbe	:	darkorange	Farbe	:	coral
Farbwert	:	#ff8c00	Farbwert	:	#ff7f50
HTML	:	darkorange	HTML	:	coral
HTML (Wert)	:	#ff8c00	HTML (Wert)	:	#ff7f50
CSS	:	darkorange	CSS	:	coral
CSS (Wert)	:	#ff8c00	CSS (Wert)	:	#ff7f50
CSS (kürzest)	:	#ff8c00	CSS (kürzest)	:	#ff7f50
CSS (RGB)	:	rgb(255,140,0)	CSS (RGB)	:	rgb(255,127,80)
CSS (%RGB)	:	rgb(100%,54%,0%)	CSS (%RGB)	:	rgb(100%,49%,31%)

Verlauf Hintergrundfarbe darkorange nach Schriftfarbe coral
#ff8c00	#ff8a0b	#ff8816	#ff8622	#ff842d	#ff8239	#ff8044	#ff7f50
#ff8c00	#ff8a0b	#ff8816	#ff8622	#ff842d	#ff8239	#ff8044	#ff7f50

Kombination von darkorange und coral
Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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.				coral ist nicht als Schriftfarbe auf Hintergrund darkorange geeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind ausreichend. Die Ähnlichkeit von coral und darkorange ergibt sich zu 94.90%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 5.10%.

Hintergrundfarbe darkorange				Schriftfarbe coral
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ff8c00	#ff8c00	#ff8c00	#ff8c00	#ff7f50	#ff7f50	#ff7f50	#ff7f50
#ff9c24	#ff9c24	#da7800	#da7800	#ff9169	#ff9169	#da6c44	#da6c44
#ffac48	#ffac48	#b66400	#b66400	#ffa382	#ffa382	#b65a39	#b65a39
#ffbd6d	#ffbd6d	#915000	#915000	#ffb59b	#ffb59b	#91482d	#91482d
#ffcd91	#ffcd91	#6d3c00	#6d3c00	#ffc8b4	#ffc8b4	#6d3622	#6d3622
#ffdeb6	#ffdeb6	#482800	#482800	#ffdacd	#ffdacd	#482416	#482416
#ffeeda	#ffeeda	#241400	#241400	#ffece6	#ffece6	#24120b	#24120b
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe darkorange und Farbe coral

Wechsel der Umrandung bei Hover von Tag hr

Die Rahmenfarbe soll sich von Farbe darkorange auf Farbe coral ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Darstellung von <hr> in Farbe darkorange vor.

In diesem Beispiel umranden wir <hr> mit einem 4 Pixel dicken, herausstehenden Rahmen in Farbe darkorange.

<style type="text/css"><!--
  hr { border:4px outset darkorange; }
//-->
</style>

Nun fordern wir, dass sich bei Berührung mit der Maus die Rahmenfarbe zu coral ändert.

<style type="text/css"><!--
  hr:hover { 
    border-color:coral;
  }
//-->
</style>

Mehr zu hr können Sie in Grundlegende Gestaltungselemente in HTML lesen. Der Tag hr ist in der HTML Referenz bei <hr> genau beschrieben.

Wechsel der Unterstreichung bei Hover mit Tag caption

Die Unterstreichungsfarbe soll sich von Farbe darkorange auf Farbe coral ändern, wenn man mit der Maus auf <caption> zeigt. Wir bereiten zunächst eine Darstellung von <caption> in Farbe darkorange vor.

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

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

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Unterstreichungsfarbe zu coral ändert.

<style type="text/css"><!--
  caption:hover { 
    border-bottom-color:coral;
  }
//-->
</style>

Die Idee ist dabei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sehen Sie dies bei Verweisen. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Dies ist aber keine "wirkliche" Unterstreichung, der Text hat keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Weiteres zum Thema erfahren Sie in Tabellen in HTML. Zur Beschreibung des HTML-Tag <caption>.