Kolory w CSS

Kolory. Wszędzie kolory. Tylko jak to się robi? Dzięki kolorom możemy nadać naszej stronie wygląd jaki tylko zapragniemy. Możemy ustawić kolor tła, tekstu, ramki czy np. cienia. Na podstawie koloru tekstu pokażę jak w różny sposób można definiować kolory.

 

Kolor tła tekstu ustawiamy za pomocą właściwości „color”, która (tak jak inne właściwości obsługujące kolory) przyjmuje różne wartości. W przykładach użyję 3 podstawowe kolory (czerwony, zielony, niebieski), gdzie każdy będzie przypisany do jednego tekstu.

Kod zawiera tylko 3 akapity (<p>) wraz z tekstem. Każdy akapit ma nadaną klasę dzięki, której rozróżnimy który akapit jest który.

 

Nazwa

Najłatwiejszym sposobem jest wpisanie po prostu angielskiej nazwy koloru. CSS obsługuje 147 nazw kolorów (17 kolorów podstawowych i 130 rozszerzonych).

 

System szesnastkowy

W systemie szesnastkowym kolor ma taki zapis: #RRGGBB – gdzie każda „grupa” ma wartość składowej koloru podstawowego: RR – czerwonego, GG – zielonego, BB – niebieskiego. Wartość każdego koloru musi być dwucyfrowa i w systemie szesnastkowym zaczynając od 00 (0) a  kończąc na FF (255).

 

Skrócony szesnastkowy

Zapis koloru wygląda tak: #RGB – w ten sposób możemy skrócić zapis jeśli każda składowa posiada dwie te same cyfry – np. #0000FF da nam #00F a #00AA33 da nam #0A3

 

RGB

Zapis: rgb(R, G, B) – wartość każdego koloru podajemy w systemie dziesiętnym w zakresie od 0 do 250 lub jako wartość procentową – od 0 do 100%

 

HSL (CSS3)

Zapis: hsl(H, S, L)

H – (Hue) barwa określona w stopniach (od 0 do 360) z tzw. koła koloru gdzie 0 to kolor czerwony, 120 – zielony a 240 – niebieski.

 

S – (Saturation) – nasycenie koloru – 0% to odcień szary a 100% pełne nasycenie (kolor normalny)

L – (Lightness) – jasność – 0% to kolor czarny a 100% to biały. Wszystko pomiędzy to odcienie wybranego koloru a „czysty” kolor ma wartość 50%

Ustawiając „czysty” kolor czerwony zapiszemy tak: hsl(0, 100%, 50%). Zobaczcie jak wygląda kolor czerwony z różnymi wartościami nasycenia i jasności:

 

RGBA i HSLA

To nic innego jak kolory rgb i hsl z dodaną przezroczystością. Zapis wygląda tak: rgba(R, G, B,  A) i hsl(H, S, L, A) – A to wartość od 0 do 1 gdzie 0 to całkowita niewidoczność a 1 – brak przezroczystości (domyślnie). Zobaczcie jak dla koloru czerwonego może to wyglądać: