
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:
TomatoOrange
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)


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(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)

<!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> |

Hello World
Lorem ipsum...
Die erste Überschrift
Lorem ipsum...
Ut wisi enim...