Kolor w CSS można określić na kilka sposobów:
- Podając nazwę koloru. Przeglądarki wspierają do 140 nazw kolorów, m.in. red, green, blue, black, white, brown.
- Podając oznaczenie heksadecymalne kolorów RGB. Wartości te należy napisać liczbami heksadecymalnymi (od 00 do FF), np.:
#FFFFFF – biały,
#FF0000 – czerwony,
#000000 – czarny - Podając oznaczenie rgb (red, green, blue).Wartości poszczególnych kolorów należy podać w od 0 do 255, np.:
rgb(255,255,255) – biały,
rgb(255,0,0) – czerwony,
rgb(0,0,0) – czarny. - Podając kolor w formacie hsl (Hue, Saturation, Lightness).
- h (hue) – określa w stopniach (0 – 360) na kole kolorów. 0 – czerwony, 120 – to zielony, 240 – niebieski
- s (saturation) to inaczej nasycenie koloru. Przyjmuje wartości od 0% dla szarości do 100% dla pełnego koloru
- l (lightness) to inaczej jasność koloru. Przyjmuje wartości od 0% dla czarnego do 100% dla białego koloru.
CSS wspiera również przezroczystość. Aby użyć przezroczystości należy zastosować format zapisu koloru rgba(r,g,b,a) lub hsla(h,s,l,a). Czwarty parametr to właśnie przezroczystość tzw. kanał alfa. Kanał alfa przyjmuje wartości od 1 dla pełnego koloru i 0 dla pełnej przezroczystości. Przykłady:
rgba(0,0,0,.5), rgba(0,0,0,1), rgba(0,0,0,0), hsla(240,50%,50%,0.5)
Należy również wspomnieć o tzw. bezpiecznej palecie kolorów. W palecie tej jest 256 bezpiecznych kolorów. Powstała ona w czasie gdy większość użytkowników korzystała z 8 bitowej palety kolorów. Paleta ta pozwalała na zapis do 256 kolorów. Cecha szczególna tej palety jest taka, że każda ze składowych koloru RGB mogła posiadać jedną z 6 możliwych wartości: 00, 33, 66, 99, CC, FF. Przykłady #FFFFFF, #33FF33, rgb(0,0,0), rgb(51,51,51), rgb(153,153,51)
Materiały dodatkowe
04b. Kolor - hex, rgb, rgba, hsl, hsla