Ressourcen: 120 HTML Farbnamen - Kombination von Farbe mediumturquoise und Farbe brown

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 mediumturquoise			Schriftfarbe brown
Detail	:	Hintergrund mediumturquoise	Detail	:	Schrift brown
Farbe	:	mediumturquoise	Farbe	:	brown
Farbwert	:	#48d1cc	Farbwert	:	#a52a2a
HTML	:	mediumturquoise	HTML	:	brown
HTML (Wert)	:	#48d1cc	HTML (Wert)	:	#a52a2a
CSS	:	mediumturquoise	CSS	:	brown
CSS (Wert)	:	#48d1cc	CSS (Wert)	:	#a52a2a
CSS (kürzest)	:	#48d1cc	CSS (kürzest)	:	#a52a2a
CSS (RGB)	:	rgb(72,209,204)	CSS (RGB)	:	rgb(165,42,42)
CSS (%RGB)	:	rgb(28%,81%,80%)	CSS (%RGB)	:	rgb(64%,16%,16%)

Verlauf Hintergrundfarbe mediumturquoise nach Schriftfarbe brown
#48d1cc	#55b9b4	#62a19d	#6f8986	#7d716f	#8a5958	#974141	#a52a2a
#48d1cc	#55b9b4	#62a19d	#6f8986	#7d716f	#8a5958	#974141	#a52a2a

Kombination von mediumturquoise und brown
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in.				brown eignet sich nicht als Schriftfarbe auf Hintergrund mediumturquoise, weil sowohl Helligkeit als auch die Farben zu ähnlich sind. Die Ähnlichkeit der Farben brown und mediumturquoise ergibt sich zu 81.90%. Die Lesbarkeit dieser Kombination liegt damit bei 18.10%.

Hintergrundfarbe mediumturquoise				Schriftfarbe brown
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#48d1cc	#48d1cc	#48d1cc	#48d1cc	#a52a2a	#a52a2a	#a52a2a	#a52a2a
#62d7d3	#62d7d3	#3db3ae	#3db3ae	#b14848	#b14848	#8d2424	#8d2424
#7cdeda	#7cdeda	#339591	#339591	#be6666	#be6666	#751e1e	#751e1e
#96e4e1	#96e4e1	#297774	#297774	#cb8585	#cb8585	#5e1818	#5e1818
#b0ebe9	#b0ebe9	#1e5957	#1e5957	#d8a3a3	#d8a3a3	#461212	#461212
#caf1f0	#caf1f0	#143b3a	#143b3a	#e5c2c2	#e5c2c2	#2f0c0c	#2f0c0c
#e4f8f7	#e4f8f7	#0a1d1d	#0a1d1d	#f2e0e0	#f2e0e0	#170606	#170606
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe mediumturquoise und Farbe brown

Zebra-Effekt von HTML-Befehl tr

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, redet man von einem Zebra-Effekt. Dieser Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <tr> mit den Hintergrundfarben Farbe mediumturquoise und Farbe brown.

<style type="text/css"><!--
  tr.ung { 
    background-color: mediumturquoise;
  }
  tr.ger { 
    background-color: brown;
  }
//-->
</style>

Diese werden abwechselnd genutzt.

<table>
<tr class="ung"><td>O1,1</td><td>O2,1</td><td>O3,1</td></tr>
<tr class="ger"><td>O1,2</td><td>O2,2</td><td>O3,2</td></tr>
<tr class="ung"><td>O1,3</td><td>O2,3</td><td>O3,3</td></tr>
</table>

Mehr zum Thema tr erfahren Sie in Tabellen in HTML. Möglichkeiten vom hier verwendeten Tag tr lesen Sie in der HTML Referenz unter <tr>.

Wechsel der Textfarbe bei Hover von Tag h6

Eine Überschrift wird mit Befehl <h6> gesetzt. Diese kann hervorgehoben und farblich gestaltet werden.

Die Textfarbe soll sich von Farbe mediumturquoise auf Farbe brown ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Darstellung von <h6> in Farbe mediumturquoise vor.

Z.B. legen wir bei <h6> die Textfarbe auf Farbe mediumturquoise fest. Zwar lassen wir die Hintergrundfarbe unverändert, ändern jedoch die Schriftart auf sans-serif.

<style type="text/css"><!--
  h6 { 
    color: mediumturquoise; 
    font-family: sans-serif;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Hover die Textfarbe auf brown geändert wird.

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

Weiteres zu h6 können Sie in Grundlegende Gestaltungselemente in HTML erfahren. Die Beschreibung vom hier verwendeten Befehl h6 finden Sie in der HTML Referenz unter <h6>.