Farben in CSS
In CSS gibt es verschiedene Möglichkeiten, Farben zu definieren. Die einfachste Möglichkeit ist, Farben über ihren Namen zu definieren. Es gibt 147 Farbnamen, die in allen Browsern unterstützt werden. Hier sind einige Beispiele:
body {
color: red;
background-color: lightblue;
}Eine weitere Möglichkeit ist, Farben über ihren Hexadezimalwert zu definieren. Ein Hexadezimalwert besteht aus einem # gefolgt von sechs Zeichen, die Zahlen von 0 bis 9 und Buchstaben von A bis F enthalten. Hier sind einige Beispiele:
body {
color: #ff0000; /* Rot */
background-color: #00ff00; /* Grün */
border-color: #0000ff; /* Blau */
}Es ist auch möglich, Farben über ihren RGB-Wert zu definieren. Ein RGB-Wert besteht aus den Werten für Rot, Grün und Blau, die jeweils zwischen 0 und 255 liegen. Hier sind einige Beispiele:
body {
color: rgb(255, 0, 0); /* Rot */
background-color: rgb(0, 255, 0); /* Grün */
border-color: rgb(0, 0, 255); /* Blau */
}Es ist auch möglich, Farben über ihren HSL-Wert zu definieren. Ein HSL-Wert besteht aus den Werten für Farbton, Sättigung und Helligkeit, die jeweils zwischen 0 und 100 liegen. Hier sind einige Beispiele:
body {
color: hsl(0, 100%, 50%); /* Rot */
background-color: hsl(120, 100%, 50%); /* Grün */
border-color: hsl(240, 100%, 50%); /* Blau */
}Es ist auch möglich, Farben über ihren HSLA-Wert zu definieren. Ein HSLA-Wert ist ähnlich wie ein HSL-Wert, enthält aber auch einen Alphawert, der zwischen 0 und 1 liegt und die Transparenz der Farbe angibt. Hier sind einige Beispiele:
body {
color: hsla(0, 100%, 50%, 1); /* Vollständig deckendes Rot */
background-color: hsla(120, 100%, 50%, 0.5); /* Halbtransparentes Grün */
border-color: hsla(240, 100%, 50%, 0.25); /* Vierteltransparentes Blau */
}