Überschrift strassencoder.ch
Logo strassencoder.ch
Überschrift Farben

Möglichkeiten um Farben in HTML zu bestimmen

Welche Möglichkeiten gibt es um eine Farbe in HTML zu bestimmen.
HTML-> Farben werden verwendet mit dem Farbname, RGB, HEX und HSL Werten.

Angaben einer Farbe durch den Farbe-Name:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
HTML unterstütz 140 Standard Farbnamen.

Angaben einer Farbe durch den RGB-Farbcode:

In HTML eine Farbe kann mit dem RGB-Farbcode definiert werden: rgb(rot, grün, blau)
Jedes Parameter (rot, grün, blau) definieren die Intensität einer Farbe zwischen 0 und 255.
rgb(255, 0, 0)
rgb(0, 255, 0)
rgb(0, 0, 255)
rgb(120, 120 , 120)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)

Angaben einer Farbe durch den HEX-Farbcode:

In HTML eine Farbe kann mit dem Hex-Farbcode definiert werden: #(rr,gg,bb)
rr (rot), gg (grün) und bb (blau) sind Hex-Werte zwischen 00 und ff .
Der Hex-Farbcode muss immer mit # beginnen und darauf müssen sechs Werte von 0–9 bis A–F folgen.(z.B. #F07AE3).
Dabei steht 0 für den niedrigsten Wert und F für den höchsten.
#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd

Angaben einer Farbe durch den HSL-Farbcode:

Dabei stehen die 3 Angaben für den Farbton, die Sättigung und Helligkeit einer Farbe.
hue = Farbton
Der Farbton wird als Winkelangabe angegeben (allerdings ohne Gradzahl!). Wir haben also eine Angabe von 0 bis 360.
Farbwinkel auf dem Farbkreis (0° für Rot, 120° für Grün, 240° für Blau)
HSL Farbtabelle HSL-Skala saturation = Sättigung der Farbe
Die Sättigung der Farbe wird von 0 bis 100% angegeben. 100% sind also maximal gesättigt.
0% = Neutralgrau, 50% = wenig gesättigte Farbe, 100% = gesättigte, reine Farbe.
lightness = Helligkeit der Farbe
Über den lightness-Wert wird die Helligkeit der Farbe angeben. Auch dieser wird von 0% bis 100% angegeben.
0% = keine Helligkeit, 100% = volle Helligkeit.
HSL Helligkeit hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body>
<h3 style="background-color:DodgerBlue;">Hello World</h3>
<p style="background-color:Tomato;">Lorem ipsum...</p>
<h3 style="color:Tomato;">Die erste Überschrift</h3>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
<h3 style="border:2px solid Tomato;">Die zweite Überschrift</h3>
<h3 style="border:2px solid DodgerBlue;">Die dritte Überschrif</h3>
<h3 style="border:2px solid Violet;">Die vierte Überschrift</h3>
<h3 style="background-color:rgb(255, 99, 71);">Die fünfte Überschrift</h3>
<h3 style="background-color:#ff6347;">Die sechste Überschrift...</h3>
<h3 style="background-color:hsl(9, 100%, 64%);">Die siebte Überschrift</h3>
</body>
</html>
Überschrift BrowserAusgabe

Hello World

Lorem ipsum...

Die erste Überschrift

Lorem ipsum...

Ut wisi enim...

Die zweite Überschrift

Die dritte Überschrift

Die vierte Überschrift

Die fünfte Überschrift

Die sechste Überschrift

Die siebte Überschrift