Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #48d1cc und Farbe seashell

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 #48d1cc			Schriftfarbe seashell
Detail	:	Hintergrund #48d1cc	Detail	:	Schrift seashell
Farbwert	:	#48d1cc	Farbe	:	seashell
Farbe	:	mediumturquoise	Farbwert	:	#fff5ee
HTML	:	#48d1cc	HTML	:	seashell
HTML (Wert)	:	#48d1cc	HTML (Wert)	:	#fff5ee
CSS	:	#48d1cc	CSS	:	seashell
CSS (Wert)	:	#48d1cc	CSS (Wert)	:	#fff5ee
CSS (kürzest)	:	#48d1cc	CSS (kürzest)	:	#fff5ee
CSS (RGB)	:	rgb(72,209,204)	CSS (RGB)	:	rgb(255,245,238)
CSS (%RGB)	:	rgb(28%,81%,80%)	CSS (%RGB)	:	rgb(100%,96%,93%)

Verlauf Hintergrundfarbwert #48d1cc nach Schriftfarbe seashell
#48d1cc	#62d6d0	#7cdbd5	#96e0da	#b0e5df	#caeae4	#e4efe9	#fff5ee
#48d1cc	#62d6d0	#7cdbd5	#96e0da	#b0e5df	#caeae4	#e4efe9	#fff5ee

Kombination von #48d1cc und seashell
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. 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.				Die Ähnlichkeit von seashell und #48d1cc beträgt 91.74%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 8.26%. Auf Hintergrund #48d1cc ist seashell ungeeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind geeignet.

Hintergrundfarbwert #48d1cc				Schriftfarbe seashell
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#48d1cc	#48d1cc	#48d1cc	#48d1cc	#fff5ee	#fff5ee	#fff5ee	#fff5ee
#62d7d3	#62d7d3	#3db3ae	#3db3ae	#fff6f0	#fff6f0	#dad2cc	#dad2cc
#7cdeda	#7cdeda	#339591	#339591	#fff7f2	#fff7f2	#b6afaa	#b6afaa
#96e4e1	#96e4e1	#297774	#297774	#fff9f5	#fff9f5	#918c88	#918c88
#b0ebe9	#b0ebe9	#1e5957	#1e5957	#fffaf7	#fffaf7	#6d6966	#6d6966
#caf1f0	#caf1f0	#143b3a	#143b3a	#fffcfa	#fffcfa	#484644	#484644
#e4f8f7	#e4f8f7	#0a1d1d	#0a1d1d	#fffdfc	#fffdfc	#242322	#242322
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #48d1cc und Farbe seashell

Wechsel der Textfarbe bei Hover mit HTML-Befehl button

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

Z.B. legen wir bei <button> die Textfarbe auf Farbwert #48d1cc fest:

<style type="text/css"><!--
  button { 
    color: #48d1cc;
  }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Textfarbe auf seashell geändert wird.

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

Weiteres zum Thema button erfahren Sie in Formulare in HTML. Weiteres zum HTML-Befehl <button>.

Zebra-Effekt bei Tag tr

Man redet vom so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Dieser Effekt unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <tr> mit unterschiedlichen Hintergrundfarben Farbwert #48d1cc und Farbe seashell.

<style type="text/css"><!--
  tr.ung { 
    background-color: #48d1cc;
  }
  tr.ger { 
    background-color: seashell;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd angewendet.

<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 finden Sie in Tabellen in HTML. Möglichkeiten des hier verwendeten HTML-Befehl tr lesen Sie in der HTML Referenz unter <tr>.