Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #dc143c und Farbwert #3cb371

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 #dc143c			Schriftfarbwert #3cb371
Detail	:	Hintergrund #dc143c	Detail	:	Schrift #3cb371
Farbwert	:	#dc143c	Farbwert	:	#3cb371
Farbe	:	crimson	Farbe	:	mediumseagreen
HTML	:	#dc143c	HTML	:	#3cb371
HTML (Wert)	:	#dc143c	HTML (Wert)	:	#3cb371
CSS	:	#dc143c	CSS	:	#3cb371
CSS (Wert)	:	#dc143c	CSS (Wert)	:	#3cb371
CSS (kürzest)	:	#dc143c	CSS (kürzest)	:	#3cb371
CSS (RGB)	:	rgb(220,20,60)	CSS (RGB)	:	rgb(60,179,113)
CSS (%RGB)	:	rgb(86%,7%,23%)	CSS (%RGB)	:	rgb(23%,70%,44%)

Verlauf Hintergrundfarbwert #dc143c nach Schriftfarbwert #3cb371
#dc143c	#c52a43	#ae414b	#975852	#806e5a	#698561	#529c69	#3cb371
#dc143c	#c52a43	#ae414b	#975852	#806e5a	#698561	#529c69	#3cb371

Kombination von #dc143c und #3cb371
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in.				Auf Hintergrund #dc143c ist #3cb371 ungeeignet. Die Unterschiede in der Helligkeit und Farbe sind zu gering. Die Ähnlichkeit von #3cb371 und #dc143c ergibt sich zu 91.09%. Die Lesbarkeit dieser Farbkombination liegt damit bei 8.91%.

Hintergrundfarbwert #dc143c				Schriftfarbwert #3cb371
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#dc143c	#dc143c	#dc143c	#dc143c	#3cb371	#3cb371	#3cb371	#3cb371
#e13557	#e13557	#bc1133	#bc1133	#57bd85	#57bd85	#339960	#339960
#e65773	#e65773	#9d0e2a	#9d0e2a	#73c899	#73c899	#2a7f50	#2a7f50
#eb788f	#eb788f	#7d0b22	#7d0b22	#8fd3ad	#8fd3ad	#226640	#226640
#f09aab	#f09aab	#5e0819	#5e0819	#abdec2	#abdec2	#194c30	#194c30
#f5bbc7	#f5bbc7	#3e0511	#3e0511	#c7e9d6	#c7e9d6	#113320	#113320
#fadde3	#fadde3	#1f0208	#1f0208	#e3f4ea	#e3f4ea	#081910	#081910
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #dc143c und Farbwert #3cb371

Wechsel der Hintergrundfarbe bei Hover bei Befehl abbr

Die Hintergrundfarbe soll sich von Farbwert #dc143c auf Farbwert #3cb371 ändern, wenn man mit der Maus auf <abbr> zeigt. Wir bereiten zunächst die Formatierung von <abbr> in Farbwert #dc143c vor.

Als Beispiel legen wir Farbwert #dc143c als Hintergrundfarbe von <abbr> fest. Zwar lassen wir die Textfarbe unverändert, setzen jedoch die Schriftart auf verdana. Die Größe der Schrift setzen wir auf 86%.

<style type="text/css"><!--
  abbr { 
    font-size:86%; 
    background-color:#dc143c; 
    font-family:verdana;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Mausberührung die Hintergrundfarbe zu #3cb371 ändert.

<style type="text/css"><!--
  abbr:hover { 
    background-color:#3cb371;
  }
//-->
</style>

Mehr zum hier genutzten HTML-Befehl abbr ist in der HTML Referenz unter <abbr> genau zusammengestellt.

Wechsel der Unterstreichung bei Hover von Befehl h2

Eine Überschrift erzeugen Sie mit HTML-Tag <h2> und kann hervorgehoben und farblich gestaltet werden.

Die Unterstreichungsfarbe soll sich von Farbwert #dc143c auf Farbwert #3cb371 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <h2> in Farbwert #dc143c vor.

Beispielsweise unterstreichen wir <h2> mit Hilfe eines gezahnten Rahmens mit 3 Pixel Dicke in Farbwert #dc143c.

<style type="text/css"><!--
  h2 { border-bottom:3px ridge #dc143c; }
//-->
</style>

Nun fordern wir, dass sich bei Hover die Unterstreichungsfarbe auf #3cb371 ändert.

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

Die Idee ist, unabhängige Formatierungen für Inhalt und Unterstreichung zu nutzen. Manchmal sieht man dies bei Hyperlinks. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine normale Unterstreichung, der Text ist überhaupt nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zum Thema lesen Sie in Grundlegende Gestaltungselemente in HTML. Möglichkeiten vom hier gezeigten HTML-Tag h2 sind in der HTML Referenz unter <h2> genau beschrieben.