Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #dc143c und Farbwert #d3d3d3

Netscape führte seinerzeit die websicheren Farben ein. Neben diesen, einem bestimmten Schema folgenden, Farbwerten, definierte man noch 120 Werte und ordnete ihnen Namen zu. Zusammen mit den 17 Standard-HTML-Farben, die ebenfalls Namen haben, ergeben sich so 137 HTML Farbnamen.

Hintergrundfarbwert #dc143c			Schriftfarbwert #d3d3d3
Detail	:	Hintergrund #dc143c	Detail	:	Schrift #d3d3d3
Farbwert	:	#dc143c	Farbwert	:	#d3d3d3
Farbe	:	crimson	Farbe	:	lightgrey
HTML	:	#dc143c	HTML	:	#d3d3d3
HTML (Wert)	:	#dc143c	HTML (Wert)	:	#d3d3d3
CSS	:	#dc143c	CSS	:	#d3d3d3
CSS (Wert)	:	#dc143c	CSS (Wert)	:	#d3d3d3
CSS (kürzest)	:	#dc143c	CSS (kürzest)	:	#d3d3d3
CSS (RGB)	:	rgb(220,20,60)	CSS (RGB)	:	rgb(211,211,211)
CSS (%RGB)	:	rgb(86%,7%,23%)	CSS (%RGB)	:	rgb(82%,82%,82%)

Verlauf Hintergrundfarbwert #dc143c nach Schriftfarbwert #d3d3d3
#dc143c	#da2f51	#d94a67	#d8657c	#d68192	#d59ca7	#d4b7bd	#d3d3d3
#dc143c	#da2f51	#d94a67	#d8657c	#d68192	#d59ca7	#d4b7bd	#d3d3d3

Kombination von #dc143c und #d3d3d3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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 vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit von #d3d3d3 und #dc143c beträgt 84.13%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 15.87%. #d3d3d3 ist nicht als Schriftfarbe auf Hintergrund #dc143c geeignet. Zwar ist der Helligkeitsunterschied gut, doch die Farben selbst sind zu ähnlich.

Hintergrundfarbwert #dc143c				Schriftfarbwert #d3d3d3
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#dc143c	#dc143c	#dc143c	#dc143c	#d3d3d3	#d3d3d3	#d3d3d3	#d3d3d3
#e13557	#e13557	#bc1133	#bc1133	#d9d9d9	#d9d9d9	#b4b4b4	#b4b4b4
#e65773	#e65773	#9d0e2a	#9d0e2a	#dfdfdf	#dfdfdf	#969696	#969696
#eb788f	#eb788f	#7d0b22	#7d0b22	#e5e5e5	#e5e5e5	#787878	#787878
#f09aab	#f09aab	#5e0819	#5e0819	#ececec	#ececec	#5a5a5a	#5a5a5a
#f5bbc7	#f5bbc7	#3e0511	#3e0511	#f2f2f2	#f2f2f2	#3c3c3c	#3c3c3c
#fadde3	#fadde3	#1f0208	#1f0208	#f8f8f8	#f8f8f8	#1e1e1e	#1e1e1e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #dc143c und Farbwert #d3d3d3

Wechsel der Hintergrundfarbe bei Hover mit HTML-Befehl samp

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

Wir legen hier Farbwert #dc143c als Hintergrundfarbe von <samp> fest. Zwar verändern wir die Textfarbe nicht, setzen jedoch die Schriftart auf courier new. Die Größe der Schrift vergrößern wir auf 113%:

<style type="text/css"><!--
  samp { 
    font-family: courier new; 
    background-color: #dc143c; 
    font-size: 113%;
  }
//-->
</style>

Nun stellen wir ein, dass bei Berührung mit der Maus die Hintergrundfarbe auf #d3d3d3 geändert wird.

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

Mehr zum Thema samp finden Sie in Text in HTML. Mehr zum hier genutzten HTML-Tag samp lesen Sie in der HTML Referenz unter <samp>.

Wechsel der Umrandung bei Hover von Tag p

Die Rahmenfarbe soll sich von Farbwert #dc143c auf Farbwert #d3d3d3 ändern, wenn man mit der Maus auf <p> zeigt. Bereiten wir zunächst eine Formatierung von <p> in Farbwert #dc143c vor.

In diesem Beispiel umranden wir <p> mit einem 1 Pixel dicken, herausstehenden Rahmen in Farbwert #dc143c.

<style type="text/css"><!--
  p { 
    border-color:#dc143c; 
    border-style:outset; 
    border-width:1px;
  }
//-->
</style>

Nun fordern wir, dass sich bei Berührung mit der Maus die Rahmenfarbe auf #d3d3d3 ändert.

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

Mehr zum Thema p lesen Sie in Grundlegende Gestaltungselemente in HTML. Möglichkeiten des Tag p lesen Sie in der HTML Referenz unter <p>.