Ressourcen: 120 HTML Farbnamen - Kombination von Farbe orangered und Farbe olivedrab

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 orangered			Schriftfarbe olivedrab
Detail	:	Hintergrund orangered	Detail	:	Schrift olivedrab
Farbe	:	orangered	Farbe	:	olivedrab
Farbwert	:	#ff4500	Farbwert	:	#6b8e23
HTML	:	orangered	HTML	:	olivedrab
HTML (Wert)	:	#ff4500	HTML (Wert)	:	#6b8e23
CSS	:	orangered	CSS	:	olivedrab
CSS (Wert)	:	#ff4500	CSS (Wert)	:	#6b8e23
CSS (kürzest)	:	#ff4500	CSS (kürzest)	:	#6b8e23
CSS (RGB)	:	rgb(255,69,0)	CSS (RGB)	:	rgb(107,142,35)
CSS (%RGB)	:	rgb(100%,27%,0%)	CSS (%RGB)	:	rgb(41%,55%,13%)

Verlauf Hintergrundfarbe orangered nach Schriftfarbe olivedrab
#ff4500	#e94f05	#d4590a	#bf640f	#aa6e14	#957919	#80831e	#6b8e23
#ff4500	#e94f05	#d4590a	#bf640f	#aa6e14	#957919	#80831e	#6b8e23

Kombination von orangered und olivedrab
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit der Farben olivedrab und orangered beträgt 94.73%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 5.27%. Auf Hintergrund orangered ist olivedrab ungeeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind geeignet.

Hintergrundfarbe orangered				Schriftfarbe olivedrab
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ff4500	#ff4500	#ff4500	#ff4500	#6b8e23	#6b8e23	#6b8e23	#6b8e23
#ff5f24	#ff5f24	#da3b00	#da3b00	#809e42	#809e42	#5b791e	#5b791e
#ff7a48	#ff7a48	#b63100	#b63100	#95ae61	#95ae61	#4c6519	#4c6519
#ff946d	#ff946d	#912700	#912700	#aabe81	#aabe81	#3d5114	#3d5114
#ffaf91	#ffaf91	#6d1d00	#6d1d00	#bfcea0	#bfcea0	#2d3c0f	#2d3c0f
#ffc9b6	#ffc9b6	#481300	#481300	#d4dec0	#d4dec0	#1e280a	#1e280a
#ffe4da	#ffe4da	#240900	#240900	#e9eedf	#e9eedf	#0f1405	#0f1405
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe orangered und Farbe olivedrab

Wechsel der Unterstreichung bei Hover von Tag legend

Die Farbe der Unterstreichung soll sich von Farbe orangered auf Farbe olivedrab ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <legend> in Farbe orangered vor.

Hier unterstreichen wir <legend> mit einem herausstehenden Rahmen mit 4 Pixel Dicke in Farbe orangered.

<style type="text/css"><!--
  legend { border-bottom:4px outset orangered; }
//-->
</style>

Nun fordern wir, dass bei Hover die Unterstreichungsfarbe auf olivedrab gesetzt wird.

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

Die Idee ist hierbei, unabhängige Formatierungen für Inhalt und Unterstreichung zu haben. Manchmal sehen Sie diesen Effekt bei Verweisen. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine normale Unterstreichung, der Text hat gar keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zu legend können Sie in Formulare in HTML nachsehen. Einzelheiten vom HTML-Tag legend finden Sie in der HTML Referenz unter <legend>.

Hintergrund/Text-Kombination mit HTML-Tag button

In diesem Beispiel ändern wir die Textfarbe von <button> auf Farbe olivedrab und die Hintergrundfarbe von <button> auf Farbe orangered. Die Schriftart setzen wir auf verdana. Als Schriftgröße entscheiden wir uns für 111%.

<style type="text/css"><!--
  button { 
    background-color: orangered; 
    font-size: 111%; 
    font-family: verdana; 
    color: olivedrab;
  }
//-->
</style>

Mehr zum Thema button erfahren Sie in Formulare in HTML. Mehr zum HTML-Tag button ist in der HTML Referenz unter <button> genau gezeigt.