Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #b0c4de und Farbwert #ffe4b5

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 #b0c4de			Schriftfarbwert #ffe4b5
Detail	:	Hintergrund #b0c4de	Detail	:	Schrift #ffe4b5
Farbwert	:	#b0c4de	Farbwert	:	#ffe4b5
Farbe	:	lightsteelblue	Farbe	:	moccasin
HTML	:	#b0c4de	HTML	:	#ffe4b5
HTML (Wert)	:	#b0c4de	HTML (Wert)	:	#ffe4b5
CSS	:	#b0c4de	CSS	:	#ffe4b5
CSS (Wert)	:	#b0c4de	CSS (Wert)	:	#ffe4b5
CSS (kürzest)	:	#b0c4de	CSS (kürzest)	:	#ffe4b5
CSS (RGB)	:	rgb(176,196,222)	CSS (RGB)	:	rgb(255,228,181)
CSS (%RGB)	:	rgb(69%,76%,87%)	CSS (%RGB)	:	rgb(100%,89%,70%)

Verlauf Hintergrundfarbwert #b0c4de nach Schriftfarbwert #ffe4b5
#b0c4de	#bbc8d8	#c6cdd2	#d1d1cc	#ddd6c6	#e8dac0	#f3dfba	#ffe4b5
#b0c4de	#bbc8d8	#c6cdd2	#d1d1cc	#ddd6c6	#e8dac0	#f3dfba	#ffe4b5

Kombination von #b0c4de und #ffe4b5
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Auf Hintergrund #b0c4de ist #ffe4b5 ungeeignet, weil die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit von #ffe4b5 und #b0c4de ergibt sich zu 93.13%. Die Lesbarkeit dieser Kombination ergibt sich zu 6.87%.

Hintergrundfarbwert #b0c4de				Schriftfarbwert #ffe4b5
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#b0c4de	#b0c4de	#b0c4de	#b0c4de	#ffe4b5	#ffe4b5	#ffe4b5	#ffe4b5
#bbcce2	#bbcce2	#96a8be	#96a8be	#ffe7bf	#ffe7bf	#dac39b	#dac39b
#c6d4e7	#c6d4e7	#7d8c9e	#7d8c9e	#ffebca	#ffebca	#b6a281	#b6a281
#d1ddec	#d1ddec	#64707e	#64707e	#ffefd4	#ffefd4	#918267	#918267
#dde5f0	#dde5f0	#4b545f	#4b545f	#fff3df	#fff3df	#6d614d	#6d614d
#e8eef5	#e8eef5	#32383f	#32383f	#fff7e9	#fff7e9	#484133	#484133
#f3f6fa	#f3f6fa	#191c1f	#191c1f	#fffbf4	#fffbf4	#242019	#242019
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #b0c4de und Farbwert #ffe4b5

Zebra-Effekt mit Befehl tr

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man von einem so genannten Zebra-Effekt. Der Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .odd und .even für <tr> mit unterschiedlichen Hintergrundfarben Farbwert #b0c4de und Farbwert #ffe4b5.

<style type="text/css"><!--
  tr.odd { 
    background-color: #b0c4de;
  }
  tr.even { 
    background-color:#ffe4b5;
  }
//-->
</style>

Diese CSS-Klassen werden abwechselnd verwendet.

<table>
<tr class="odd"><td>Qa:a</td><td>Qb:a</td><td>Qc:a</td></tr>
<tr class="even"><td>Qa:b</td><td>Qb:b</td><td>Qc:b</td></tr>
<tr class="odd"><td>Qa:c</td><td>Qb:c</td><td>Qc:c</td></tr>
</table>

Mehr zum Thema tr können Sie in Tabellen in HTML erfahren. Möglichkeiten des hier gezeigten Befehl tr sind in der HTML Referenz unter <tr> genau beschrieben.

Wechsel der Unterstreichung bei Hover von HTML-Tag a

Mit Befehl <a> wird ein Link gesetzt. Diesen können Sie farblich gestalten.

Die Farbe der Unterstreichung soll sich von Farbwert #b0c4de auf Farbwert #ffe4b5 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <a> in Farbwert #b0c4de vor.

Beispielsweise unterstreichen wir <a> mit Hilfe eines einfallenden Rahmens mit 5 Pixel Dicke in Farbwert #b0c4de.

<style type="text/css"><!--
  a { 
    border-bottom-style:inset; 
    border-bottom-color:#b0c4de; 
    border-bottom-width:5px;
  }
//-->
</style>

Nun fordern wir, dass sich bei Berührung mit der Maus die Unterstreichungsfarbe auf #ffe4b5 ändert.

<style type="text/css"><!--
  a: hover { 
    border-bottom-color: #ffe4b5;
  }
//-->
</style>

Die Idee ist, unabhängige Formatierungen für Inhalt und Unterstreichung zu verwenden. Manchmal sieht man diesen Effekt bei Verweisen. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine "normale" Unterstreichung, der Text hat überhaupt keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Weiteres zum Thema a lesen Sie in Verweise und Protokolle in HTML. Möglichkeiten des hier gezeigten Befehl <a>.