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

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

Verlauf Hintergrundfarbwert #b0e0e6 nach Schriftfarbe darkgreen
#b0e0e6	#96cec5	#7dbca4	#64aa83	#4b9962	#328741	#197520	#006400
#b0e0e6	#96cec5	#7dbca4	#64aa83	#4b9962	#328741	#197520	#006400

Kombination von #b0e0e6 und darkgreen
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				darkgreen eignet sich als Schriftfarbe auf Hintergrund #b0e0e6. Der Helligkeitsunterschied ist in Ordnung, der Farbenunterschied ebenso. Die Ähnlichkeit der Farben darkgreen und #b0e0e6 beträgt 75.29%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 24.71%.

Hintergrundfarbwert #b0e0e6				Schriftfarbe darkgreen
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#b0e0e6	#b0e0e6	#b0e0e6	#b0e0e6	#006400	#006400	#006400	#006400
#bbe4e9	#bbe4e9	#96c0c5	#96c0c5	#247a24	#247a24	#005500	#005500
#c6e8ed	#c6e8ed	#7da0a4	#7da0a4	#489048	#489048	#004700	#004700
#d1edf0	#d1edf0	#648083	#648083	#6da66d	#6da66d	#003900	#003900
#ddf1f4	#ddf1f4	#4b6062	#4b6062	#91bc91	#91bc91	#002a00	#002a00
#e8f6f7	#e8f6f7	#324041	#324041	#b6d2b6	#b6d2b6	#001c00	#001c00
#f3fafb	#f3fafb	#192020	#192020	#dae8da	#dae8da	#000e00	#000e00
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #b0e0e6 und Farbe darkgreen

Wechsel der Umrandung bei Hover bei Tag h4

Eine Überschrift der 4. Stufe wird mit HTML-Tag <h4> gesetzt. Diese können Sie hervorheben und farblich gestalten.

Die Rahmenfarbe soll sich von Farbwert #b0e0e6 auf Farbe darkgreen ändern, wenn man mit der Maus auf <h4> zeigt. Bereiten wir zunächst die Formatierung von <h4> in Farbwert #b0e0e6 vor.

In diesem Beispiel umranden wir <h4> mit einem 5 Pixel dicken, herausstehenden Rahmen in Farbwert #b0e0e6.

<style type="text/css"><!--
  h4 { 
    border-color:#b0e0e6; 
    border-style:outset; 
    border-width:5px;
  }
//-->
</style>

Nun fordern wir, dass bei Hover die Rahmenfarbe auf darkgreen geändert wird.

<style type="text/css"><!--
  h4: hover { 
    border-color: darkgreen;
  }
//-->
</style>

Weiteres zum Thema h4 können Sie in Grundlegende Gestaltungselemente in HTML erfahren. Mehr zum Befehl h4 ist in der HTML Referenz bei <h4> ausführlich gezeigt.

Wechsel der Hintergrundfarbe bei Hover mit HTML-Tag button

Die Hintergrundfarbe soll sich von Farbwert #b0e0e6 auf Farbe darkgreen ändern, wenn man mit der Maus auf <button> zeigt. Bereiten wir zunächst die Formatierung von <button> in Farbwert #b0e0e6 vor.

Als Beispiel legen wir Farbwert #b0e0e6 als Hintergrundfarbe von <button> fest. Die Textfarbe lassen wir unverändert, setzen jedoch die Schriftart auf monospace und ändern die Schriftgröße auf 9px:

<style type="text/css"><!--
  button { 
    background-color: #b0e0e6; 
    font-family: monospace; 
    font-size: 9px;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Mausberührung die Hintergrundfarbe auf darkgreen geändert wird.

<style type="text/css"><!--
  button: hover { 
    background-color: darkgreen;
  }
//-->
</style>

Weiteres zu button können Sie in Formulare in HTML erfahren. Der Befehl button ist in der HTML Referenz unter <button> zusammengestellt.