Ressourcen: 137 HTML Farbnamen - Kombination von Farbe red und Farbe chocolate

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.

Hintergrundfarbe red			Schriftfarbe chocolate
Detail	:	Hintergrund red	Detail	:	Schrift chocolate
Farbe	:	red	Farbe	:	chocolate
Farbwert	:	#ff0000	Farbwert	:	#d2691e
HTML	:	red	HTML	:	chocolate
HTML (Wert)	:	#ff0000	HTML (Wert)	:	#d2691e
CSS	:	red	CSS	:	chocolate
CSS (Wert)	:	#ff0000	CSS (Wert)	:	#d2691e
CSS (kürzest)	:	#f00	CSS (kürzest)	:	#d2691e
CSS (RGB)	:	rgb(255,0,0)	CSS (RGB)	:	rgb(210,105,30)
CSS (%RGB)	:	rgb(100%,0%,0%)	CSS (%RGB)	:	rgb(82%,41%,11%)

Verlauf Hintergrundfarbe red nach Schriftfarbe chocolate
#ff0000	#f80f04	#f21e08	#eb2d0c	#e53c11	#de4b15	#d85a19	#d2691e
#ff0000	#f80f04	#f21e08	#eb2d0c	#e53c11	#de4b15	#d85a19	#d2691e

Kombination von red und chocolate
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. 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.				chocolate ist nicht als Schriftfarbe auf Hintergrund red geeignet, da die Unterschiede in der Helligkeit und Farbe zu gering sind. Die Ähnlichkeit der Farben chocolate und red beträgt 94.76%. Die Lesbarkeit dieser Kombination bewerte ich mit 5.24%.

Hintergrundfarbe red				Schriftfarbe chocolate
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ff0000	#ff0000	#ff0000	#ff0000	#d2691e	#d2691e	#d2691e	#d2691e
#ff2424	#ff2424	#da0000	#da0000	#d87e3e	#d87e3e	#b45a19	#b45a19
#ff4848	#ff4848	#b60000	#b60000	#de935e	#de935e	#964b15	#964b15
#ff6d6d	#ff6d6d	#910000	#910000	#e5a97e	#e5a97e	#783c11	#783c11
#ff9191	#ff9191	#6d0000	#6d0000	#ebbe9e	#ebbe9e	#5a2d0c	#5a2d0c
#ffb6b6	#ffb6b6	#480000	#480000	#f2d4be	#f2d4be	#3c1e08	#3c1e08
#ffdada	#ffdada	#240000	#240000	#f8e9de	#f8e9de	#1e0f04	#1e0f04
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe red und Farbe chocolate

Wechsel der Unterstreichung bei Hover von HTML-Tag var

Die Farbe der Unterstreichung soll sich von Farbe red auf Farbe chocolate ändern, wenn man mit der Maus auf <var> zeigt. Wir bereiten zunächst die Darstellung von <var> in Farbe red vor.

Beispielsweise unterstreichen wir <var> mit Hilfe eines gepunkteten Rahmens mit 2 Pixel Dicke in Farbe red.

<style type="text/css"><!--
  var { border-bottom:2px dotted red; }
//-->
</style>

Nun stellen wir ein, dass bei Hover die Farbe der Unterstreichung auf chocolate geändert wird.

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

Die Idee ist dabei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu haben. Öfter sehen Sie diesen Effekt bei Verweisen. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Das ist jedoch keine normale Unterstreichung, der Text selbst hat keine Unterstreichung. Sie wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Weiteres zum Thema var können Sie in Text in HTML finden. Einzelheiten des hier genutzten HTML-Befehl var sind in der HTML Referenz unter <var> genau gezeigt.

Füllen und Umranden bei HTML-Tag h4

Mit Tag <h4> wird eine Überschrift der 4. Stufe erzeugt und kann farblich gestaltet und hervorgehoben werden.

Hier umranden wir <h4> mit einem doppelten, 4 Punkte dicken Rahmen in Farbe chocolate . Die Hintergrundfarbe für <h4> setzen wir auf Farbe red. Mit HTML ist dies kaum möglich. Wir verwenden daher CSS.

<style type="text/css"><!--
  h4 { border:4pt double chocolate; background-color:red; }
//-->
</style>

Mehr zu h4 können Sie in Grundlegende Gestaltungselemente in HTML finden. Möglichkeiten des hier verwendeten HTML-Befehl <h4>.