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

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

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

Kombination von #ff8c00 und lightgrey
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. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Auf Hintergrund #ff8c00 ist lightgrey ungeeignet, weil die Unterschiede in der Helligkeit und Farbe nicht ausreichend sind. Die Ähnlichkeit von lightgrey und #ff8c00 ergibt sich zu 92.58%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 7.42%.

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

Beispiele zur Kombination von Farbwert #ff8c00 und Farbe lightgrey

Text- und Unterstreichungsfarben mit HTML-Befehl q

Hier ändern wir die Textfarbe von <q> auf Farbe lightgrey. Die Schriftart ändern wir auf monospace und setzen die Schriftgröße auf 81%. Wir unterstreichen den Inhalt von <q> mit Hilfe eines gefurchten Rahmens mit 2 Punkte Dicke in Farbwert #ff8c00. In HTML geht das nicht. Deshalb verwenden wir hier CSS.

<style type="text/css"><!--
  q { 
    border-bottom: 2pt groove #ff8c00; 
    font-size: 81%; 
    color: lightgrey; 
    font-family: monospace;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Die Beschreibung des hier genutzten Befehl q finden Sie in der HTML Referenz unter <q>.

Wechsel der Umrandung bei Hover von Tag p

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

In diesem Beispiel umranden wir <p> mit einem 2 Pixel dicken, einfallenden Rahmen in Farbwert #ff8c00.

<style type="text/css"><!--
  p { 
    border-width: 2px; 
    border-style: inset; 
    border-color: #ff8c00;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Berührung mit der Maus die Rahmenfarbe auf lightgrey geändert wird.

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

Mehr zu p erfahren Sie in Grundlegende Gestaltungselemente in HTML. Möglichkeiten des HTML-Tag <p>.