Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #ba55d3 und Farbwert #6b8e23

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 #ba55d3			Schriftfarbwert #6b8e23
Detail	:	Hintergrund #ba55d3	Detail	:	Schrift #6b8e23
Farbwert	:	#ba55d3	Farbwert	:	#6b8e23
Farbe	:	mediumorchid	Farbe	:	olivedrab
HTML	:	#ba55d3	HTML	:	#6b8e23
HTML (Wert)	:	#ba55d3	HTML (Wert)	:	#6b8e23
CSS	:	#ba55d3	CSS	:	#6b8e23
CSS (Wert)	:	#ba55d3	CSS (Wert)	:	#6b8e23
CSS (kürzest)	:	#ba55d3	CSS (kürzest)	:	#6b8e23
CSS (RGB)	:	rgb(186,85,211)	CSS (RGB)	:	rgb(107,142,35)
CSS (%RGB)	:	rgb(72%,33%,82%)	CSS (%RGB)	:	rgb(41%,55%,13%)

Verlauf Hintergrundfarbwert #ba55d3 nach Schriftfarbwert #6b8e23
#ba55d3	#ae5db9	#a365a0	#986d87	#8c756e	#817d55	#76853c	#6b8e23
#ba55d3	#ae5db9	#a365a0	#986d87	#8c756e	#817d55	#76853c	#6b8e23

Kombination von #ba55d3 und #6b8e23
Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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 vestibulum tristique erat, ac interdum justo cursus in.				#6b8e23 ist nicht als Schriftfarbe auf Hintergrund #ba55d3 geeignet. Die Helligkeit und Farben sind zu ähnlich. Die Ähnlichkeit von #6b8e23 und #ba55d3 beträgt 95.07%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 4.93%.

Hintergrundfarbwert #ba55d3				Schriftfarbwert #6b8e23
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ba55d3	#ba55d3	#ba55d3	#ba55d3	#6b8e23	#6b8e23	#6b8e23	#6b8e23
#c36dd9	#c36dd9	#9f48b4	#9f48b4	#809e42	#809e42	#5b791e	#5b791e
#cd85df	#cd85df	#843c96	#843c96	#95ae61	#95ae61	#4c6519	#4c6519
#d79de5	#d79de5	#6a3078	#6a3078	#aabe81	#aabe81	#3d5114	#3d5114
#e1b6ec	#e1b6ec	#4f245a	#4f245a	#bfcea0	#bfcea0	#2d3c0f	#2d3c0f
#ebcef2	#ebcef2	#35183c	#35183c	#d4dec0	#d4dec0	#1e280a	#1e280a
#f5e6f8	#f5e6f8	#1a0c1e	#1a0c1e	#e9eedf	#e9eedf	#0f1405	#0f1405
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #ba55d3 und Farbwert #6b8e23

Zebra-Effekt von HTML-Befehl tr

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man vom so genannten Zebra-Effekt. Dieser Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <tr> mit unterschiedlichen Hintergrundfarben Farbwert #ba55d3 und Farbwert #6b8e23.

<style type="text/css"><!--
  tr.ung { 
    background-color:#ba55d3;
  }
  tr.ger { 
    background-color: #6b8e23;
  }
//-->
</style>

Diese Klassen werden abwechselnd verwendet.

<table>
<tr class="ung"><td>Ma:a</td><td>Mb:a</td><td>Mc:a</td></tr>
<tr class="ger"><td>Ma:b</td><td>Mb:b</td><td>Mc:b</td></tr>
<tr class="ung"><td>Ma:c</td><td>Mb:c</td><td>Mc:c</td></tr>
</table>

Mehr zum Thema tr finden Sie in Tabellen in HTML. Möglichkeiten des Befehl tr lesen Sie in der HTML Referenz unter <tr>.

Wechsel der Hintergrundfarbe bei Hover mit HTML-Tag h4

Eine Überschrift der 4. Stufe erzeugt man mit HTML-Befehl <h4>. Diese können Sie farblich gestalten und hervorheben.

Die Hintergrundfarbe soll sich von Farbwert #ba55d3 auf Farbwert #6b8e23 ändern, wenn man mit der Maus auf <h4> zeigt. Bereiten wir zunächst eine Darstellung von <h4> in Farbwert #ba55d3 vor.

Für dieses Beispiel legen wir die Hintergrundfarbe von <h4> auf Farbwert #ba55d3 fest. Die Textfarbe lassen wir unverändert. Die Schriftart ändern wir auf monospace. Die Größe der Schrift verkleinern wir auf 99%:

<style type="text/css"><!--
  h4 { 
    font-family:monospace; 
    background-color:#ba55d3; 
    font-size:99%;
  }
//-->
</style>

Nun stellen wir ein, dass bei Mausberührung die Hintergrundfarbe auf #6b8e23 gesetzt wird.

<style type="text/css"><!--
  h4:hover { 
    background-color:#6b8e23;
  }
//-->
</style>

Mehr zum Thema lesen Sie in Grundlegende Gestaltungselemente in HTML. Einzelheiten des HTML-Tag h4 finden Sie in der HTML Referenz unter <h4>.