Ressourcen: 8 Grundfarben in HTML - Kombination von Farbwert #ffffff und Farbe fuchsia

Die bunten Grundfarben entstehen dadurch, dass die Anteile von Rot, Grün und Blau jeweils paarweise maximal sind.

In HTML und CSS haben damit die entsprechenden Bestandteile den Wert hexadezimal ff, bzw. dezimal 255 bzw. prozentual 100%.

Hintergrundfarbwert #ffffff			Schriftfarbe fuchsia
Detail	:	Hintergrund #ffffff	Detail	:	Schrift fuchsia
Farbwert	:	#ffffff	Farbe	:	fuchsia
Farbe	:	white	Farbwert	:	#ff00ff
HTML	:	#ffffff	HTML	:	fuchsia
HTML (Wert)	:	#ffffff	HTML (Wert)	:	#ff00ff
CSS	:	#ffffff	CSS	:	fuchsia
CSS (Wert)	:	#ffffff	CSS (Wert)	:	#ff00ff
CSS (kürzest)	:	#fff	CSS (kürzest)	:	#f0f
CSS (RGB)	:	rgb(255,255,255)	CSS (RGB)	:	rgb(255,0,255)
CSS (%RGB)	:	rgb(100%,100%,100%)	CSS (%RGB)	:	rgb(100%,0%,100%)

Verlauf Hintergrundfarbwert #ffffff nach Schriftfarbe fuchsia
#ffffff	#ffdaff	#ffb6ff	#ff91ff	#ff6dff	#ff48ff	#ff24ff	#ff00ff
#ffffff	#ffdaff	#ffb6ff	#ff91ff	#ff6dff	#ff48ff	#ff24ff	#ff00ff

Kombination von #ffffff und fuchsia
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. 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.				fuchsia ist nicht als Schriftfarbe auf Hintergrund #ffffff geeignet. Zwar ist der Helligkeitsunterschied in Ordnung, doch die Farben selbst sind zu ähnlich. Die Ähnlichkeit von fuchsia und #ffffff ergibt sich zu 85.07%. Die Lesbarkeit dieser Farbkombination liegt damit bei 14.93%.

Hintergrundfarbwert #ffffff				Schriftfarbe fuchsia
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffffff	#ffffff	#ffffff	#ffffff	#ff00ff	#ff00ff	#ff00ff	#ff00ff
#ffffff	#ffffff	#dadada	#dadada	#ff24ff	#ff24ff	#da00da	#da00da
#ffffff	#ffffff	#b6b6b6	#b6b6b6	#ff48ff	#ff48ff	#b600b6	#b600b6
#ffffff	#ffffff	#919191	#919191	#ff6dff	#ff6dff	#910091	#910091
#ffffff	#ffffff	#6d6d6d	#6d6d6d	#ff91ff	#ff91ff	#6d006d	#6d006d
#ffffff	#ffffff	#484848	#484848	#ffb6ff	#ffb6ff	#480048	#480048
#ffffff	#ffffff	#242424	#242424	#ffdaff	#ffdaff	#240024	#240024
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #ffffff und Farbe fuchsia

Text- und Unterstreichungsfarben mit Befehl q

Hier ändern wir die Textfarbe von <q> auf Farbe fuchsia. Die Schriftart ändern wir auf arial. Die Schriftgröße setzen wir auf 13px. Wir unterstreichen den Inhalt von <q> mit Hilfe eines gezahnten Rahmens mit 1 Punkte Dicke in Farbwert #ffffff. Mit HTML ist dies kaum machbar. Wir verwenden daher CSS.

<style type="text/css"><!--
  q { 
    font-family:arial; 
    border-bottom-width:1pt; 
    color:fuchsia; 
    font-size:13px; 
    border-bottom-style:ridge; 
    border-bottom-color:#fff;
  }
//-->
</style>

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

Zur Beschreibung vom hier gezeigten Tag <q>.

Wechsel der Unterstreichung bei Hover mit HTML-Tag h2

Eine Überschrift setzen Sie mit HTML-Befehl <h2>. Diese kann man farblich gestalten und hervorheben.

Die Farbe der Unterstreichung soll sich von Farbwert #ffffff auf Farbe fuchsia ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <h2> in Farbwert #ffffff vor.

Beispielsweise unterstreichen wir <h2> mit Hilfe eines doppelten Rahmens mit 5 Pixel Dicke in Farbwert #ffffff.

<style type="text/css"><!--
  h2 { 
    border-bottom-style: double; 
    border-bottom-color: #ffffff; 
    border-bottom-width: 5px;
  }
//-->
</style>

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

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

Die Idee ist hierbei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben. Manchmal sehen Sie dies bei Hyperlinks. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine wirkliche Unterstreichung, der Text ist überhaupt nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Weiteres zum Thema h2 lesen Sie in Grundlegende Gestaltungselemente in HTML. Mehr zum Tag <h2>.