Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #ff69b4 und Farbe darkgray

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 #ff69b4			Schriftfarbe darkgray
Detail	:	Hintergrund #ff69b4	Detail	:	Schrift darkgray
Farbwert	:	#ff69b4	Farbe	:	darkgray
Farbe	:	hotpink	Farbwert	:	#a9a9a9
HTML	:	#ff69b4	HTML	:	darkgray
HTML (Wert)	:	#ff69b4	HTML (Wert)	:	#a9a9a9
CSS	:	#ff69b4	CSS	:	darkgray
CSS (Wert)	:	#ff69b4	CSS (Wert)	:	#a9a9a9
CSS (kürzest)	:	#ff69b4	CSS (kürzest)	:	#a9a9a9
CSS (RGB)	:	rgb(255,105,180)	CSS (RGB)	:	rgb(169,169,169)
CSS (%RGB)	:	rgb(100%,41%,70%)	CSS (%RGB)	:	rgb(66%,66%,66%)

Verlauf Hintergrundfarbwert #ff69b4 nach Schriftfarbe darkgray
#ff69b4	#f272b2	#e67bb0	#da84af	#cd8dad	#c196ac	#b59faa	#a9a9a9
#ff69b4	#f272b2	#e67bb0	#da84af	#cd8dad	#c196ac	#b59faa	#a9a9a9

Kombination von #ff69b4 und darkgray
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.				darkgray ist nicht als Schriftfarbe auf Hintergrund #ff69b4 geeignet, weil weder der Helligkeitsunterschied noch der Farbunterschied gross genug sind. Die Ähnlichkeit der Farben darkgray und #ff69b4 ergibt sich zu 94.64%. Die Lesbarkeit dieser Kombination ergibt sich zu 5.36%.

Hintergrundfarbwert #ff69b4				Schriftfarbe darkgray
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ff69b4	#ff69b4	#ff69b4	#ff69b4	#a9a9a9	#a9a9a9	#a9a9a9	#a9a9a9
#ff7ebe	#ff7ebe	#da5a9a	#da5a9a	#b5b5b5	#b5b5b5	#909090	#909090
#ff93c9	#ff93c9	#b64b80	#b64b80	#c1c1c1	#c1c1c1	#787878	#787878
#ffa9d4	#ffa9d4	#913c66	#913c66	#cdcdcd	#cdcdcd	#606060	#606060
#ffbede	#ffbede	#6d2d4d	#6d2d4d	#dadada	#dadada	#484848	#484848
#ffd4e9	#ffd4e9	#481e33	#481e33	#e6e6e6	#e6e6e6	#303030	#303030
#ffe9f4	#ffe9f4	#240f19	#240f19	#f2f2f2	#f2f2f2	#181818	#181818
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #ff69b4 und Farbe darkgray

Zebra-Effekt von Befehl tr

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, spricht man vom Zebra-Effekt. Dieser Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <tr> mit unterschiedlichen Hintergrundfarben Farbwert #ff69b4 und Farbe darkgray.

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

Diese werden dann abwechselnd angewendet.

<table>
<tr class="ung"><td>GA,A</td><td>GB,A</td><td>GC,A</td></tr>
<tr class="ger"><td>GA,B</td><td>GB,B</td><td>GC,B</td></tr>
<tr class="ung"><td>GA,C</td><td>GB,C</td><td>GC,C</td></tr>
</table>

Mehr zum Thema lesen Sie in Tabellen in HTML. Einzelheiten vom hier genutzten HTML-Befehl tr sind in der HTML Referenz unter <tr> gezeigt.

Wechsel der Umrandung bei Hover von Befehl h6

Mit Befehl <h6> wird eine Überschrift der 6. Stufe gesetzt. Sie kann farblich gestaltet und hervorgehoben werden.

Die Rahmenfarbe soll sich von Farbwert #ff69b4 auf Farbe darkgray ändern, wenn man mit der Maus auf <h6> zeigt. Bereiten wir zunächst eine Formatierung von <h6> in Farbwert #ff69b4 vor.

In diesem Beispiel umranden wir <h6> mit einem 5 Pixel dicken, gepunkteten Rahmen in Farbwert #ff69b4.

<style type="text/css"><!--
  h6 { 
    border-style: dotted; 
    border-width: 5px; 
    border-color: #ff69b4;
  }
//-->
</style>

Nun fordern wir, dass bei Berührung mit der Maus die Rahmenfarbe auf darkgray geändert wird.

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

Mehr zum Thema h6 lesen Sie in Grundlegende Gestaltungselemente in HTML. Möglichkeiten vom hier verwendeten Tag h6 lesen Sie in der HTML Referenz unter <h6>.