Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #b0e0e6 und Farbe orange

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 #b0e0e6			Schriftfarbe orange
Detail	:	Hintergrund #b0e0e6	Detail	:	Schrift orange
Farbwert	:	#b0e0e6	Farbe	:	orange
Farbe	:	powderblue	Farbwert	:	#ffa500
HTML	:	#b0e0e6	HTML	:	orange
HTML (Wert)	:	#b0e0e6	HTML (Wert)	:	#ffa500
CSS	:	#b0e0e6	CSS	:	orange
CSS (Wert)	:	#b0e0e6	CSS (Wert)	:	#ffa500
CSS (kürzest)	:	#b0e0e6	CSS (kürzest)	:	#ffa500
CSS (RGB)	:	rgb(176,224,230)	CSS (RGB)	:	rgb(255,165,0)
CSS (%RGB)	:	rgb(69%,87%,90%)	CSS (%RGB)	:	rgb(100%,64%,0%)

Verlauf Hintergrundfarbwert #b0e0e6 nach Schriftfarbe orange
#b0e0e6	#bbd7c5	#c6cfa4	#d1c683	#ddbe62	#e8b541	#f3ad20	#ffa500
#b0e0e6	#bbd7c5	#c6cfa4	#d1c683	#ddbe62	#e8b541	#f3ad20	#ffa500

Kombination von #b0e0e6 und orange
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit der Farben orange und #b0e0e6 ergibt sich zu 93.44%. Die Lesbarkeit dieser Kombination bewerte ich mit 6.56%. Auf Hintergrund #b0e0e6 ist orange ungeeignet, da die Helligkeit und Farben zu ähnlich sind.

Hintergrundfarbwert #b0e0e6				Schriftfarbe orange
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#b0e0e6	#b0e0e6	#b0e0e6	#b0e0e6	#ffa500	#ffa500	#ffa500	#ffa500
#bbe4e9	#bbe4e9	#96c0c5	#96c0c5	#ffb124	#ffb124	#da8d00	#da8d00
#c6e8ed	#c6e8ed	#7da0a4	#7da0a4	#ffbe48	#ffbe48	#b67500	#b67500
#d1edf0	#d1edf0	#648083	#648083	#ffcb6d	#ffcb6d	#915e00	#915e00
#ddf1f4	#ddf1f4	#4b6062	#4b6062	#ffd891	#ffd891	#6d4600	#6d4600
#e8f6f7	#e8f6f7	#324041	#324041	#ffe5b6	#ffe5b6	#482f00	#482f00
#f3fafb	#f3fafb	#192020	#192020	#fff2da	#fff2da	#241700	#241700
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #b0e0e6 und Farbe orange

Wechsel der Textfarbe bei Hover bei Tag var

Die Textfarbe soll sich von Farbwert #b0e0e6 auf Farbe orange ändern, wenn man mit der Maus auf <var> zeigt. Wir bereiten zunächst eine Formatierung von <var> in Farbwert #b0e0e6 vor.

Als Beispiel setzen wir bei <var> die Textfarbe auf Farbwert #b0e0e6:

<style type="text/css"><!--
  var { 
    color: #b0e0e6;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Berührung mit der Maus die Textfarbe auf orange ändert.

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

Mehr zu var können Sie in Text in HTML nachsehen. Einzelheiten vom hier genutzten HTML-Befehl <var>.

Wechsel der Unterstreichung bei Hover bei Befehl legend

Die Farbe der Unterstreichung soll sich von Farbwert #b0e0e6 auf Farbe orange ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Darstellung von <legend> in Farbwert #b0e0e6 vor.

Beispielsweise unterstreichen wir <legend> mit Hilfe eines gestrichelten Rahmens mit 2 Pixel Dicke in Farbwert #b0e0e6.

<style type="text/css"><!--
  legend { border-bottom:2px dashed #b0e0e6; }
//-->
</style>

Nun stellen wir ein, dass bei Berührung mit der Maus die Unterstreichungsfarbe auf orange geändert wird.

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

Die Idee ist hierbei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben. Öfter sehen Sie dies bei Links. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine normale Unterstreichung, der Text selbst hat überhaupt keine Unterstreichung. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zu legend erfahren Sie in Formulare in HTML. Einzelheiten des HTML-Tag legend sind in der HTML Referenz bei <legend> genau zusammengestellt.