Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #b0e0e6 und Farbwert #40e0d0

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.

Hintergrundfarbwert #b0e0e6			Schriftfarbwert #40e0d0
Detail	:	Hintergrund #b0e0e6	Detail	:	Schrift #40e0d0
Farbwert	:	#b0e0e6	Farbwert	:	#40e0d0
Farbe	:	powderblue	Farbe	:	turquoise
HTML	:	#b0e0e6	HTML	:	#40e0d0
HTML (Wert)	:	#b0e0e6	HTML (Wert)	:	#40e0d0
CSS	:	#b0e0e6	CSS	:	#40e0d0
CSS (Wert)	:	#b0e0e6	CSS (Wert)	:	#40e0d0
CSS (kürzest)	:	#b0e0e6	CSS (kürzest)	:	#40e0d0
CSS (RGB)	:	rgb(176,224,230)	CSS (RGB)	:	rgb(64,224,208)
CSS (%RGB)	:	rgb(69%,87%,90%)	CSS (%RGB)	:	rgb(25%,87%,81%)

Verlauf Hintergrundfarbwert #b0e0e6 nach Schriftfarbwert #40e0d0
#b0e0e6	#a0e0e2	#90e0df	#80e0dc	#70e0d9	#60e0d6	#50e0d3	#40e0d0
#b0e0e6	#a0e0e2	#90e0df	#80e0dc	#70e0d9	#60e0d6	#50e0d3	#40e0d0

Kombination von #b0e0e6 und #40e0d0
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit der Farben #40e0d0 und #b0e0e6 ergibt sich zu 94.55%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 5.45%. #40e0d0 eignet sich nicht als Schriftfarbe auf Hintergrund #b0e0e6. Sowohl Helligkeit als auch die Farben sind sich zu ähnlich.

Hintergrundfarbwert #b0e0e6				Schriftfarbwert #40e0d0
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#b0e0e6	#b0e0e6	#b0e0e6	#b0e0e6	#40e0d0	#40e0d0	#40e0d0	#40e0d0
#bbe4e9	#bbe4e9	#96c0c5	#96c0c5	#5be4d6	#5be4d6	#36c0b2	#36c0b2
#c6e8ed	#c6e8ed	#7da0a4	#7da0a4	#76e8dd	#76e8dd	#2da094	#2da094
#d1edf0	#d1edf0	#648083	#648083	#91ede4	#91ede4	#248076	#248076
#ddf1f4	#ddf1f4	#4b6062	#4b6062	#adf1ea	#adf1ea	#1b6059	#1b6059
#e8f6f7	#e8f6f7	#324041	#324041	#c8f6f1	#c8f6f1	#12403b	#12403b
#f3fafb	#f3fafb	#192020	#192020	#e3faf8	#e3faf8	#09201d	#09201d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #b0e0e6 und Farbwert #40e0d0

Wechsel der Textfarbe bei Hover bei HTML-Befehl colgroup

Die Textfarbe soll sich von Farbwert #b0e0e6 auf Farbwert #40e0d0 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <colgroup> in Farbwert #b0e0e6 vor.

Zum Beispiel legen wir bei <colgroup> die Textfarbe auf Farbwert #b0e0e6 fest. Die Schriftgröße erhöhen wir auf 123%.

<style type="text/css"><!--
  colgroup { 
    font-size:123%; 
    color:#b0e0e6;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Hover die Textfarbe auf #40e0d0 gesetzt wird.

<style type="text/css"><!--
  colgroup:hover { 
    color:#40e0d0;
  }
//-->
</style>

Mehr zum Thema colgroup lesen Sie in Tabellen in HTML. Weiteres zum hier verwendeten Befehl colgroup finden Sie in der HTML Referenz unter <colgroup>.

Zebra-Effekt bei Befehl td

Man redet von einem so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Er unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .gerade und .ungerade für <td> mit unterschiedlichen Hintergrundfarben Farbwert #b0e0e6 und Farbwert #40e0d0.

<style type="text/css"><!--
  td.gerade { 
    background-color:#b0e0e6;
  }
  td.ungerade { 
    background-color: #40e0d0;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd verwendet.

<table>
<tr><td class="gerade">M1~1</td><td class="ungerade">M2~1</td><td class="gerade">M3~1</td></tr>
<tr><td class="gerade">M1~2</td><td class="ungerade">M2~2</td><td class="gerade">M3~2</td></tr>
<tr><td class="gerade">M1~3</td><td class="ungerade">M2~3</td><td class="gerade">M3~3</td></tr>
</table>

Weiteres zum Thema finden Sie in Tabellen in HTML. Mehr zum hier gezeigten Befehl td ist in der HTML Referenz bei <td> genau zusammengestellt.