Ressourcen: 120 HTML Farbnamen - Kombination von Farbe lightgrey und Farbwert #ffa07a

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.

Hintergrundfarbe lightgrey			Schriftfarbwert #ffa07a
Detail	:	Hintergrund lightgrey	Detail	:	Schrift #ffa07a
Farbe	:	lightgrey	Farbwert	:	#ffa07a
Farbwert	:	#d3d3d3	Farbe	:	lightsalmon
HTML	:	lightgrey	HTML	:	#ffa07a
HTML (Wert)	:	#d3d3d3	HTML (Wert)	:	#ffa07a
CSS	:	lightgrey	CSS	:	#ffa07a
CSS (Wert)	:	#d3d3d3	CSS (Wert)	:	#ffa07a
CSS (kürzest)	:	#d3d3d3	CSS (kürzest)	:	#ffa07a
CSS (RGB)	:	rgb(211,211,211)	CSS (RGB)	:	rgb(255,160,122)
CSS (%RGB)	:	rgb(82%,82%,82%)	CSS (%RGB)	:	rgb(100%,62%,47%)

Verlauf Hintergrundfarbe lightgrey nach Schriftfarbwert #ffa07a
#d3d3d3	#d9cbc6	#dfc4b9	#e5bdac	#ecb5a0	#f2ae93	#f8a786	#ffa07a
#d3d3d3	#d9cbc6	#dfc4b9	#e5bdac	#ecb5a0	#f2ae93	#f8a786	#ffa07a

Kombination von lightgrey und #ffa07a
Cras vestibulum tristique erat, ac interdum justo cursus in. 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 id velit ante.				Auf Hintergrund lightgrey ist #ffa07a ungeeignet. Die Unterschiede in der Helligkeit und Farbe sind unzureichend. Die Ähnlichkeit der Farben #ffa07a und lightgrey ergibt sich zu 93.68%. Die Lesbarkeit dieser Farbkombination liegt damit bei 6.32%.

Hintergrundfarbe lightgrey				Schriftfarbwert #ffa07a
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#d3d3d3	#d3d3d3	#d3d3d3	#d3d3d3	#ffa07a	#ffa07a	#ffa07a	#ffa07a
#d9d9d9	#d9d9d9	#b4b4b4	#b4b4b4	#ffad8d	#ffad8d	#da8968	#da8968
#dfdfdf	#dfdfdf	#969696	#969696	#ffbba0	#ffbba0	#b67257	#b67257
#e5e5e5	#e5e5e5	#787878	#787878	#ffc8b3	#ffc8b3	#915b45	#915b45
#ececec	#ececec	#5a5a5a	#5a5a5a	#ffd6c6	#ffd6c6	#6d4434	#6d4434
#f2f2f2	#f2f2f2	#3c3c3c	#3c3c3c	#ffe3d9	#ffe3d9	#482d22	#482d22
#f8f8f8	#f8f8f8	#1e1e1e	#1e1e1e	#fff1ec	#fff1ec	#241611	#241611
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe lightgrey und Farbwert #ffa07a

Füllen und Umranden von Tag dd

Für dieses Beispiel umranden wir <dd> mit einem herausstehenden, 2 Pixel dicken Rahmen in Farbwert #ffa07a . Den Hintergrund von <dd> setzen wir entsprechend auf Farbe lightgrey. In HTML geht das nicht. Daher formatieren wir hier mit CSS.

<style type="text/css"><!--
  dd { border:2px outset #ffa07a; background-color:lightgrey; }
//-->
</style>

Mehr zum Thema lesen Sie in Listen und Glossare in HTML. Die Beschreibung des Tag dd finden Sie in der HTML Referenz unter <dd>.

Wechsel der Unterstreichung bei Hover von Befehl h6

Mit HTML-Tag <h6> wird eine Überschrift der 6. Stufe gesetzt. Diese können Sie hervorheben und farblich gestalten.

Die Farbe der Unterstreichung soll sich von Farbe lightgrey auf Farbwert #ffa07a ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <h6> in Farbe lightgrey vor.

Hier unterstreichen wir <h6> mit Hilfe eines gepunkteten Rahmens mit 5 Pixel Dicke in Farbe lightgrey.

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

Jetzt fordern wir, dass bei Hover die Farbe der Unterstreichung auf #ffa07a gesetzt wird.

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

Die Idee ist dabei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu verwenden. Manchmal sehen Sie das bei Verweisen. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Hierbei handelt es sich aber nicht um eine "normale" Unterstreichung, der Text selbst hat keine Unterstreichung. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zum Thema h6 finden Sie in Grundlegende Gestaltungselemente in HTML. Zur Beschreibung vom HTML-Tag <h6>.