Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #d3d3d3 und Farbwert #ff8c00

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 #d3d3d3			Schriftfarbwert #ff8c00
Detail	:	Hintergrund #d3d3d3	Detail	:	Schrift #ff8c00
Farbwert	:	#d3d3d3	Farbwert	:	#ff8c00
Farbe	:	lightgrey	Farbe	:	darkorange
HTML	:	#d3d3d3	HTML	:	#ff8c00
HTML (Wert)	:	#d3d3d3	HTML (Wert)	:	#ff8c00
CSS	:	#d3d3d3	CSS	:	#ff8c00
CSS (Wert)	:	#d3d3d3	CSS (Wert)	:	#ff8c00
CSS (kürzest)	:	#d3d3d3	CSS (kürzest)	:	#ff8c00
CSS (RGB)	:	rgb(211,211,211)	CSS (RGB)	:	rgb(255,140,0)
CSS (%RGB)	:	rgb(82%,82%,82%)	CSS (%RGB)	:	rgb(100%,54%,0%)

Verlauf Hintergrundfarbwert #d3d3d3 nach Schriftfarbwert #ff8c00
#d3d3d3	#d9c8b4	#dfbe96	#e5b478	#ecaa5a	#f2a03c	#f8961e	#ff8c00
#d3d3d3	#d9c8b4	#dfbe96	#e5b478	#ecaa5a	#f2a03c	#f8961e	#ff8c00

Kombination von #d3d3d3 und #ff8c00
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras vestibulum tristique erat, ac interdum justo cursus in.				#ff8c00 eignet sich nicht als Schriftfarbe auf Hintergrund #d3d3d3, weil weder der Helligkeitsunterschied noch der Farbunterschied geeignet sind. Die Ähnlichkeit der Farben #ff8c00 und #d3d3d3 ergibt sich zu 92.58%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 7.42%.

Hintergrundfarbwert #d3d3d3				Schriftfarbwert #ff8c00
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#d3d3d3	#d3d3d3	#d3d3d3	#d3d3d3	#ff8c00	#ff8c00	#ff8c00	#ff8c00
#d9d9d9	#d9d9d9	#b4b4b4	#b4b4b4	#ff9c24	#ff9c24	#da7800	#da7800
#dfdfdf	#dfdfdf	#969696	#969696	#ffac48	#ffac48	#b66400	#b66400
#e5e5e5	#e5e5e5	#787878	#787878	#ffbd6d	#ffbd6d	#915000	#915000
#ececec	#ececec	#5a5a5a	#5a5a5a	#ffcd91	#ffcd91	#6d3c00	#6d3c00
#f2f2f2	#f2f2f2	#3c3c3c	#3c3c3c	#ffdeb6	#ffdeb6	#482800	#482800
#f8f8f8	#f8f8f8	#1e1e1e	#1e1e1e	#ffeeda	#ffeeda	#241400	#241400
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #d3d3d3 und Farbwert #ff8c00

Füllen und Umranden bei HTML-Befehl img

Für dieses Beispiel umranden wir <img> mit einem herausstehenden, 2 Punkte dicken Rahmen in Farbwert #ff8c00 . Den Hintergrund von <img> setzen wir auf Farbwert #d3d3d3. Das ist in HTML nicht möglich. Wir verwenden daher CSS zur Formatierung.

<style type="text/css"><!--
  img { border:2pt outset #ff8c00; background-color:#d3d3d3; }
//-->
</style>

Weiteres zu img finden Sie in Grafik in HTML. Einzelheiten vom HTML-Tag img sind in der HTML Referenz bei <img> ausführlich beschrieben.

Wechsel der Umrandung bei Hover bei Tag pre

Die Rahmenfarbe soll sich von Farbwert #d3d3d3 auf Farbwert #ff8c00 ändern, wenn man mit der Maus auf <pre> zeigt. Bereiten wir zunächst die Formatierung von <pre> in Farbwert #d3d3d3 vor.

In diesem Beispiel umranden wir <pre> mit einem 5 Pixel dicken, einfallenden Rahmen in Farbwert #d3d3d3.

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

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Rahmenfarbe zu #ff8c00 ändert.

<style type="text/css"><!--
  pre: hover { 
    border-color: #ff8c00;
  }
//-->
</style>

Weiteres zum Thema erfahren Sie in Blockorientierte Elemente in HTML. Weiteres zum hier gezeigten HTML-Befehl pre erfahren Sie in der HTML Referenz unter <pre>.