Ressourcen: 120 HTML Farbnamen - Kombination von Farbe royalblue und Farbe pink

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 royalblue			Schriftfarbe pink
Detail	:	Hintergrund royalblue	Detail	:	Schrift pink
Farbe	:	royalblue	Farbe	:	pink
Farbwert	:	#4169e1	Farbwert	:	#ffc0cb
HTML	:	royalblue	HTML	:	pink
HTML (Wert)	:	#4169e1	HTML (Wert)	:	#ffc0cb
CSS	:	royalblue	CSS	:	pink
CSS (Wert)	:	#4169e1	CSS (Wert)	:	#ffc0cb
CSS (kürzest)	:	#4169e1	CSS (kürzest)	:	#ffc0cb
CSS (RGB)	:	rgb(65,105,225)	CSS (RGB)	:	rgb(255,192,203)
CSS (%RGB)	:	rgb(25%,41%,88%)	CSS (%RGB)	:	rgb(100%,75%,79%)

Verlauf Hintergrundfarbe royalblue nach Schriftfarbe pink
#4169e1	#5c75dd	#7781da	#928ed7	#ad9ad4	#c8a7d1	#e3b3ce	#ffc0cb
#4169e1	#5c75dd	#7781da	#928ed7	#ad9ad4	#c8a7d1	#e3b3ce	#ffc0cb

Kombination von royalblue und pink
Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Die Ähnlichkeit von pink und royalblue beträgt 84.99%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 15.01%. pink ist nicht als Schriftfarbe auf Hintergrund royalblue geeignet. Die Unterschiede in der Helligkeit und Farbe sind nicht ausreichend.

Hintergrundfarbe royalblue				Schriftfarbe pink
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#4169e1	#4169e1	#4169e1	#4169e1	#ffc0cb	#ffc0cb	#ffc0cb	#ffc0cb
#5c7ee5	#5c7ee5	#375ac0	#375ac0	#ffc9d2	#ffc9d2	#daa4ae	#daa4ae
#7793e9	#7793e9	#2e4ba0	#2e4ba0	#ffd2d9	#ffd2d9	#b68991	#b68991
#92a9ed	#92a9ed	#253c80	#253c80	#ffdbe1	#ffdbe1	#916d74	#916d74
#adbef2	#adbef2	#1b2d60	#1b2d60	#ffe4e8	#ffe4e8	#6d5257	#6d5257
#c8d4f6	#c8d4f6	#121e40	#121e40	#ffedf0	#ffedf0	#48363a	#48363a
#e3e9fa	#e3e9fa	#090f20	#090f20	#fff6f7	#fff6f7	#241b1d	#241b1d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe royalblue und Farbe pink

Füllen und Umranden von HTML-Tag hr

Bei diesem Beispiel umranden wir <hr> mit einem . Den Hintergrund von <hr> setzen wir entsprechend auf Farbe royalblue. Mit HTML ist dies nicht machbar. Wir verwenden deshalb CSS.

<style type="text/css"><!--
  hr { border:2pt dotted pink; background-color:royalblue; }
//-->
</style>

Mehr zum Thema hr finden Sie in Grundlegende Gestaltungselemente in HTML. Der hier verwendete Tag hr ist in der HTML Referenz bei <hr> zusammengestellt.

Wechsel der Hintergrundfarbe bei Hover bei Befehl a

Einen Link setzt man mit HTML-Befehl <a> und kann farblich gestaltet werden.

Die Hintergrundfarbe soll sich von Farbe royalblue auf Farbe pink ändern, wenn man mit der Maus auf <a> zeigt. Wir bereiten zunächst eine Formatierung von <a> in Farbe royalblue vor.

Wir legen in diesem Beispiel bei <a> die Hintergrundfarbe auf Farbe royalblue fest. Zwar ändern wir die Textfarbe nicht, setzen jedoch die Schriftart auf sans-serif und vergrößern die Größe der Schrift auf 120%.

<style type="text/css"><!--
  a { 
    font-size: 120%; 
    font-family: sans-serif; 
    background-color: royalblue;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Berührung mit der Maus die Hintergrundfarbe zu pink ändert.

<style type="text/css"><!--
  a:hover { 
    background-color:pink;
  }
//-->
</style>

Mehr zu a finden Sie in Verweise und Protokolle in HTML. Mehr zum HTML-Befehl a erfahren Sie in der HTML Referenz unter <a>.