Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #cd853f und Farbwert #ffb6c1

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.

Hintergrundfarbwert #cd853f			Schriftfarbwert #ffb6c1
Detail	:	Hintergrund #cd853f	Detail	:	Schrift #ffb6c1
Farbwert	:	#cd853f	Farbwert	:	#ffb6c1
Farbe	:	peru	Farbe	:	lightpink
HTML	:	#cd853f	HTML	:	#ffb6c1
HTML (Wert)	:	#cd853f	HTML (Wert)	:	#ffb6c1
CSS	:	#cd853f	CSS	:	#ffb6c1
CSS (Wert)	:	#cd853f	CSS (Wert)	:	#ffb6c1
CSS (kürzest)	:	#cd853f	CSS (kürzest)	:	#ffb6c1
CSS (RGB)	:	rgb(205,133,63)	CSS (RGB)	:	rgb(255,182,193)
CSS (%RGB)	:	rgb(80%,52%,24%)	CSS (%RGB)	:	rgb(100%,71%,75%)

Verlauf Hintergrundfarbwert #cd853f nach Schriftfarbwert #ffb6c1
#cd853f	#d48c51	#db9364	#e29a76	#e9a189	#f0a89b	#f7afae	#ffb6c1
#cd853f	#d48c51	#db9364	#e29a76	#e9a189	#f0a89b	#f7afae	#ffb6c1

Kombination von #cd853f und #ffb6c1
Cras vestibulum tristique erat, ac interdum justo cursus in. 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 id velit ante.				Die Ähnlichkeit der Farben #ffb6c1 und #cd853f beträgt 91.38%. Die Lesbarkeit dieser Kombination ergibt sich zu 8.62%. Auf Hintergrund #cd853f ist #ffb6c1 ungeeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind gross genug.

Hintergrundfarbwert #cd853f				Schriftfarbwert #ffb6c1
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#cd853f	#cd853f	#cd853f	#cd853f	#ffb6c1	#ffb6c1	#ffb6c1	#ffb6c1
#d4965a	#d4965a	#af7236	#af7236	#ffc0c9	#ffc0c9	#da9ca5	#da9ca5
#dba775	#dba775	#925f2d	#925f2d	#ffcad2	#ffcad2	#b68289	#b68289
#e2b991	#e2b991	#754c24	#754c24	#ffd5db	#ffd5db	#91686e	#91686e
#e9caac	#e9caac	#57391b	#57391b	#ffdfe4	#ffdfe4	#6d4e52	#6d4e52
#f0dcc8	#f0dcc8	#3a2612	#3a2612	#ffeaed	#ffeaed	#483437	#483437
#f7ede3	#f7ede3	#1d1309	#1d1309	#fff4f6	#fff4f6	#241a1b	#241a1b
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #cd853f und Farbwert #ffb6c1

Wechsel der Hintergrundfarbe bei Hover von HTML-Befehl center

Die Hintergrundfarbe soll sich von Farbwert #cd853f auf Farbwert #ffb6c1 ändern, wenn man mit der Maus auf <center> zeigt. Wir bereiten zunächst die Darstellung von <center> in Farbwert #cd853f vor.

Als Beispiel legen wir Farbwert #cd853f als Hintergrundfarbe von <center> fest. Die Größe der Schrift vergrößern wir auf 123%:

<style type="text/css"><!--
  center { 
    background-color: #cd853f; 
    font-size: 123%;
  }
//-->
</style>

Nun stellen wir ein, dass bei Mausberührung die Hintergrundfarbe auf #ffb6c1 gesetzt wird.

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

Weiteres zum Thema finden Sie in Grundlegende Gestaltungselemente in HTML. Einzelheiten vom Tag center sind in der HTML Referenz bei <center> ausführlich gezeigt.

Wechsel der Umrandung bei Hover von Befehl pre

Die Rahmenfarbe soll sich von Farbwert #cd853f auf Farbwert #ffb6c1 ändern, wenn man mit der Maus auf <pre> zeigt. Bereiten wir zunächst die Darstellung von <pre> in Farbwert #cd853f vor.

In diesem Beispiel umranden wir <pre> mit einem 5 Pixel dicken, einfallenden Rahmen in Farbwert #cd853f.

<style type="text/css"><!--
  pre { 
    border-width: 5px; 
    border-color: #cd853f; 
    border-style: inset;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Hover die Rahmenfarbe zu #ffb6c1 ändert.

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

Mehr zu pre können Sie in Blockorientierte Elemente in HTML nachsehen. Einzelheiten vom hier verwendeten HTML-Tag pre lesen Sie in der HTML Referenz unter <pre>.