Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #00ced1 und Farbwert #9932cc

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 #00ced1			Schriftfarbwert #9932cc
Detail	:	Hintergrund #00ced1	Detail	:	Schrift #9932cc
Farbwert	:	#00ced1	Farbwert	:	#9932cc
Farbe	:	darkturquoise	Farbe	:	darkorchid
HTML	:	#00ced1	HTML	:	#9932cc
HTML (Wert)	:	#00ced1	HTML (Wert)	:	#9932cc
CSS	:	#00ced1	CSS	:	#9932cc
CSS (Wert)	:	#00ced1	CSS (Wert)	:	#9932cc
CSS (kürzest)	:	#00ced1	CSS (kürzest)	:	#9932cc
CSS (RGB)	:	rgb(0,206,209)	CSS (RGB)	:	rgb(153,50,204)
CSS (%RGB)	:	rgb(0%,80%,81%)	CSS (%RGB)	:	rgb(60%,19%,80%)

Verlauf Hintergrundfarbwert #00ced1 nach Schriftfarbwert #9932cc
#00ced1	#15b7d0	#2ba1cf	#418bce	#5774ce	#6d5ecd	#8348cc	#9932cc
#00ced1	#15b7d0	#2ba1cf	#418bce	#5774ce	#6d5ecd	#8348cc	#9932cc

Kombination von #00ced1 und #9932cc
Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Die Ähnlichkeit von #9932cc und #00ced1 beträgt 86.10%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 13.90%. Auf Hintergrund #00ced1 ist #9932cc ungeeignet. Die Unterschiede in der Helligkeit und Farbe sind nicht ausreichend.

Hintergrundfarbwert #00ced1				Schriftfarbwert #9932cc
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#00ced1	#00ced1	#00ced1	#00ced1	#9932cc	#9932cc	#9932cc	#9932cc
#24d5d7	#24d5d7	#00b0b3	#00b0b3	#a74fd3	#a74fd3	#832aae	#832aae
#48dcde	#48dcde	#009395	#009395	#b66cda	#b66cda	#6d2391	#6d2391
#6de3e4	#6de3e4	#007577	#007577	#c489e1	#c489e1	#571c74	#571c74
#91eaeb	#91eaeb	#005859	#005859	#d3a7e9	#d3a7e9	#411557	#411557
#b6f1f1	#b6f1f1	#003a3b	#003a3b	#e1c4f0	#e1c4f0	#2b0e3a	#2b0e3a
#daf8f8	#daf8f8	#001d1d	#001d1d	#f0e1f7	#f0e1f7	#15071d	#15071d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #00ced1 und Farbwert #9932cc

Wechsel der Umrandung bei Hover bei Tag h1

Eine Überschrift erzeugen Sie mit Tag <h1>. Diese kann man hervorheben und farblich gestalten.

Die Rahmenfarbe soll sich von Farbwert #00ced1 auf Farbwert #9932cc ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <h1> in Farbwert #00ced1 vor.

In diesem Beispiel umranden wir <h1> mit einem 2 Pixel dicken, gepunkteten Rahmen in Farbwert #00ced1.

<style type="text/css"><!--
  h1 { 
    border-style:dotted; 
    border-color:#00ced1; 
    border-width:2px;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Berührung mit der Maus die Rahmenfarbe zu #9932cc ändert.

<style type="text/css"><!--
  h1: hover { 
    border-color: #9932cc;
  }
//-->
</style>

Mehr zum Thema finden Sie in Grundlegende Gestaltungselemente in HTML. Der Befehl h1 ist in der HTML Referenz bei <h1> ausführlich beschrieben.

Zebra-Effekt mit HTML-Befehl th

Man spricht von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Der Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <th> mit den Hintergrundfarben Farbwert #00ced1 und Farbwert #9932cc.

<style type="text/css"><!--
  th.ungerade { 
    background-color:#00ced1;
  }
  th.gerade { 
    background-color:#9932cc;
  }
//-->
</style>

Diese CSS-Klassen werden abwechselnd angewendet.

<table>
<tr><td class="ungerade">BA-A</td><td class="gerade">BB-A</td><td class="ungerade">BC-A</td></tr>
<tr><td class="ungerade">BA-B</td><td class="gerade">BB-B</td><td class="ungerade">BC-B</td></tr>
<tr><td class="ungerade">BA-C</td><td class="gerade">BB-C</td><td class="ungerade">BC-C</td></tr>
</table>

Weiteres zum Thema th können Sie in Tabellen in HTML nachsehen. Zur Beschreibung vom Tag <th>.