Ressourcen: 120 HTML Farbnamen - Kombination von Farbe seagreen und Farbe rosybrown

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 seagreen			Schriftfarbe rosybrown
Detail	:	Hintergrund seagreen	Detail	:	Schrift rosybrown
Farbe	:	seagreen	Farbe	:	rosybrown
Farbwert	:	#2e8b57	Farbwert	:	#bc8f8f
HTML	:	seagreen	HTML	:	rosybrown
HTML (Wert)	:	#2e8b57	HTML (Wert)	:	#bc8f8f
CSS	:	seagreen	CSS	:	rosybrown
CSS (Wert)	:	#2e8b57	CSS (Wert)	:	#bc8f8f
CSS (kürzest)	:	#2e8b57	CSS (kürzest)	:	#bc8f8f
CSS (RGB)	:	rgb(46,139,87)	CSS (RGB)	:	rgb(188,143,143)
CSS (%RGB)	:	rgb(18%,54%,34%)	CSS (%RGB)	:	rgb(73%,56%,56%)

Verlauf Hintergrundfarbe seagreen nach Schriftfarbe rosybrown
#2e8b57	#428b5f	#568c67	#6a8c6f	#7f8d77	#938d7f	#a78e87	#bc8f8f
#2e8b57	#428b5f	#568c67	#6a8c6f	#7f8d77	#938d7f	#a78e87	#bc8f8f

Kombination von seagreen und rosybrown
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Auf Hintergrund seagreen ist rosybrown ungeeignet. Die Unterschiede in der Helligkeit und Farbe sind unzureichend. Die Ähnlichkeit von rosybrown und seagreen ergibt sich zu 92.82%. Die Lesbarkeit dieser Kombination ergibt sich zu 7.18%.

Hintergrundfarbe seagreen				Schriftfarbe rosybrown
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#2e8b57	#2e8b57	#2e8b57	#2e8b57	#bc8f8f	#bc8f8f	#bc8f8f	#bc8f8f
#4b9b6f	#4b9b6f	#27774a	#27774a	#c59f9f	#c59f9f	#a17a7a	#a17a7a
#69ac87	#69ac87	#20633e	#20633e	#cfafaf	#cfafaf	#866666	#866666
#87bc9f	#87bc9f	#1a4f31	#1a4f31	#d8bfbf	#d8bfbf	#6b5151	#6b5151
#a5cdb7	#a5cdb7	#133b25	#133b25	#e2cfcf	#e2cfcf	#503d3d	#503d3d
#c3ddcf	#c3ddcf	#0d2718	#0d2718	#ebdfdf	#ebdfdf	#352828	#352828
#e1eee7	#e1eee7	#06130c	#06130c	#f5efef	#f5efef	#1a1414	#1a1414
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe seagreen und Farbe rosybrown

Wechsel der Unterstreichung bei Hover mit Tag a

Mit Befehl <a> wird ein Verweis erzeugt. Dieser kann farblich gestaltet werden.

Die Farbe der Unterstreichung soll sich von Farbe seagreen auf Farbe rosybrown ändern, wenn man mit der Maus auf <a> zeigt. Wir bereiten zunächst eine Darstellung von <a> in Farbe seagreen vor.

Hier unterstreichen wir <a> mit einem gezahnten Rahmen mit 5 Pixel Dicke in Farbe seagreen.

<style type="text/css"><!--
  a { 
    border-bottom-width: 5px; 
    border-bottom-style: ridge; 
    border-bottom-color: seagreen;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Berührung mit der Maus die Unterstreichungsfarbe auf rosybrown ändert.

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

Die Idee ist dabei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu haben. Manchmal sehen Sie das bei Hyperlinks. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Hierbei handelt es sich aber nicht um eine normale Unterstreichung, der Text selbst ist nicht unterstrichen. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Weiteres zum Thema lesen Sie in Verweise und Protokolle in HTML. Möglichkeiten vom Tag <a>.

Hintergrund/Text-Kombination von Befehl h1

Eine Überschrift wird mit HTML-Tag <h1> gesetzt. Diese kann farblich gestaltet werden.

In diesem Beispiel ändern wir die Textfarbe von <h1> auf Farbe rosybrown und die Hintergrundfarbe von <h1> auf Farbe seagreen. Als Schriftart setzen wir sans-serif und ändern die Schriftgröße auf 9px.

<style type="text/css"><!--
  h1 { 
    font-family: sans-serif; 
    font-size: 9px; 
    background-color: seagreen; 
    color: rosybrown;
  }
//-->
</style>

Mehr zum Thema h1 können Sie in Grundlegende Gestaltungselemente in HTML nachlesen. Einzelheiten des hier genutzten HTML-Befehl <h1>.