Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #b22222 und Farbe peachpuff

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 #b22222			Schriftfarbe peachpuff
Detail	:	Hintergrund #b22222	Detail	:	Schrift peachpuff
Farbwert	:	#b22222	Farbe	:	peachpuff
Farbe	:	firebrick	Farbwert	:	#ffdab9
HTML	:	#b22222	HTML	:	peachpuff
HTML (Wert)	:	#b22222	HTML (Wert)	:	#ffdab9
CSS	:	#b22222	CSS	:	peachpuff
CSS (Wert)	:	#b22222	CSS (Wert)	:	#ffdab9
CSS (kürzest)	:	#b22222	CSS (kürzest)	:	#ffdab9
CSS (RGB)	:	rgb(178,34,34)	CSS (RGB)	:	rgb(255,218,185)
CSS (%RGB)	:	rgb(69%,13%,13%)	CSS (%RGB)	:	rgb(100%,85%,72%)

Verlauf Hintergrundfarbwert #b22222 nach Schriftfarbe peachpuff
#b22222	#bd3c37	#c8564d	#d37062	#de8b78	#e9a58d	#f4bfa3	#ffdab9
#b22222	#bd3c37	#c8564d	#d37062	#de8b78	#e9a58d	#f4bfa3	#ffdab9

Kombination von #b22222 und peachpuff
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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. Cras id velit ante.				Die Ähnlichkeit von peachpuff und #b22222 ergibt sich zu 75.80%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 24.20%. peachpuff ist nicht als Schriftfarbe auf Hintergrund #b22222 geeignet, weil der Unterschied in den Farben zu gering ist

Hintergrundfarbwert #b22222				Schriftfarbe peachpuff
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#b22222	#b22222	#b22222	#b22222	#ffdab9	#ffdab9	#ffdab9	#ffdab9
#bd4141	#bd4141	#981d1d	#981d1d	#ffdfc3	#ffdfc3	#daba9e	#daba9e
#c86161	#c86161	#7f1818	#7f1818	#ffe4cd	#ffe4cd	#b69b84	#b69b84
#d38080	#d38080	#651313	#651313	#ffe9d7	#ffe9d7	#917c69	#917c69
#dea0a0	#dea0a0	#4c0e0e	#4c0e0e	#ffefe1	#ffefe1	#6d5d4f	#6d5d4f
#e9bfbf	#e9bfbf	#320909	#320909	#fff4eb	#fff4eb	#483e34	#483e34
#f4dfdf	#f4dfdf	#190404	#190404	#fff9f5	#fff9f5	#241f1a	#241f1a
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #b22222 und Farbe peachpuff

Wechsel der Unterstreichung bei Hover mit Befehl address

Die Unterstreichungsfarbe soll sich von Farbwert #b22222 auf Farbe peachpuff ändern, wenn man mit der Maus auf <address> zeigt. Wir bereiten zunächst die Formatierung von <address> in Farbwert #b22222 vor.

Beispielsweise unterstreichen wir <address> mit einem gezahnten Rahmen mit 4 Pixel Dicke in Farbwert #b22222.

<style type="text/css"><!--
  address { 
    border-bottom-color: #b22222; 
    border-bottom-width: 4px; 
    border-bottom-style: ridge;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Hover die Unterstreichungsfarbe auf peachpuff geändert wird.

<style type="text/css"><!--
  address:hover { 
    border-bottom-color:peachpuff;
  }
//-->
</style>

Die Idee ist dabei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu verwenden. Öfter sehen Sie das bei Hyperlinks. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine normale Unterstreichung, der Text ist überhaupt nicht unterstrichen. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zu address können Sie in Blockorientierte Elemente in HTML erfahren. Weiteres zum hier verwendeten HTML-Tag <address>.

Hintergrund/Text-Kombination von Tag strong

Wir ändern in diesem Beispiel die Textfarbe von <strong> auf Farbe peachpuff und die Hintergrundfarbe von <strong> auf Farbwert #b22222. Die Schriftart setzen wir auf courier new. Als Schriftgröße entscheiden wir uns für 113%.

<style type="text/css"><!--
  strong { 
    font-family:courier new; 
    color:peachpuff; 
    font-size:113%; 
    background-color:#b22222;
  }
//-->
</style>

Mehr zum Thema strong finden Sie in Text in HTML. Mehr zum Befehl strong ist in der HTML Referenz bei <strong> ausführlich gezeigt.