Ressourcen: 120 HTML Farbnamen - Kombination von Farbe dimgray und Farbe chocolate

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 dimgray			Schriftfarbe chocolate
Detail	:	Hintergrund dimgray	Detail	:	Schrift chocolate
Farbe	:	dimgray	Farbe	:	chocolate
Farbwert	:	#696969	Farbwert	:	#d2691e
HTML	:	dimgray	HTML	:	chocolate
HTML (Wert)	:	#696969	HTML (Wert)	:	#d2691e
CSS	:	dimgray	CSS	:	chocolate
CSS (Wert)	:	#696969	CSS (Wert)	:	#d2691e
CSS (kürzest)	:	#696969	CSS (kürzest)	:	#d2691e
CSS (RGB)	:	rgb(105,105,105)	CSS (RGB)	:	rgb(210,105,30)
CSS (%RGB)	:	rgb(41%,41%,41%)	CSS (%RGB)	:	rgb(82%,41%,11%)

Verlauf Hintergrundfarbe dimgray nach Schriftfarbe chocolate
#696969	#78695e	#876953	#966948	#a5693e	#b46933	#c36928	#d2691e
#696969	#78695e	#876953	#966948	#a5693e	#b46933	#c36928	#d2691e

Kombination von dimgray und chocolate
Cras vestibulum tristique erat, ac interdum justo cursus in. 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.				Auf Hintergrund dimgray ist chocolate ungeeignet. Sowohl Helligkeit als auch die Farben sind sich zu ähnlich. Die Ähnlichkeit von chocolate und dimgray ergibt sich zu 92.81%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 7.19%.

Hintergrundfarbe dimgray				Schriftfarbe chocolate
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#696969	#696969	#696969	#696969	#d2691e	#d2691e	#d2691e	#d2691e
#7e7e7e	#7e7e7e	#5a5a5a	#5a5a5a	#d87e3e	#d87e3e	#b45a19	#b45a19
#939393	#939393	#4b4b4b	#4b4b4b	#de935e	#de935e	#964b15	#964b15
#a9a9a9	#a9a9a9	#3c3c3c	#3c3c3c	#e5a97e	#e5a97e	#783c11	#783c11
#bebebe	#bebebe	#2d2d2d	#2d2d2d	#ebbe9e	#ebbe9e	#5a2d0c	#5a2d0c
#d4d4d4	#d4d4d4	#1e1e1e	#1e1e1e	#f2d4be	#f2d4be	#3c1e08	#3c1e08
#e9e9e9	#e9e9e9	#0f0f0f	#0f0f0f	#f8e9de	#f8e9de	#1e0f04	#1e0f04
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe dimgray und Farbe chocolate

Wechsel der Textfarbe bei Hover bei HTML-Befehl blockquote

Die Textfarbe soll sich von Farbe dimgray auf Farbe chocolate ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <blockquote> in Farbe dimgray vor.

Wir legen z.B. die Textfarbe von <blockquote> auf Farbe dimgray fest. Die Hintergrundfarbe lassen wir unverändert, ändern jedoch die Schriftart auf monospace und verringern die Größe der Schrift auf 92%:

<style type="text/css"><!--
  blockquote { 
    color:dimgray; 
    font-size:92%; 
    font-family:monospace;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Berührung mit der Maus die Textfarbe auf chocolate gesetzt wird.

<style type="text/css"><!--
  blockquote:hover { 
    color:chocolate;
  }
//-->
</style>

Weiteres zum Thema blockquote können Sie in Blockorientierte Elemente in HTML nachsehen. Weiteres zum Tag blockquote finden Sie in der HTML Referenz unter <blockquote>.

Text- und Unterstreichungsfarben mit HTML-Tag h1

Eine Überschrift der 1. Stufe erzeugt man mit HTML-Tag <h1>. Sie kann hervorgehoben und farblich gestaltet werden.

Wir ändern Hher die Textfarbe von <h1> auf Farbe chocolate. Die Schriftart ändern wir auf courier new. Die Schriftgröße setzen wir auf 95%. Wir unterstreichen den Inhalt von <h1> mit Hilfe eines gefurchten Rahmens mit 5 Punkte Dicke in Farbe dimgray. Dies ist mit HTML kaum möglich. Daher verwenden wir CSS.

<style type="text/css"><!--
  h1 { 
    color:chocolate; 
    font-size:95%; 
    font-family:courier new; 
    border-bottom-color:dimgray; 
    border-bottom-width:5pt; 
    border-bottom-style:groove;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Mehr zum Thema finden Sie in Grundlegende Gestaltungselemente in HTML. Möglichkeiten vom hier verwendeten HTML-Tag h1 erfahren Sie in der HTML Referenz unter <h1>.