Sposoby definiowania kolorów CSS

Specyfikacja stylów wprowadza następujące sposoby podawania wartości kolorów:

1. 16 (17) kolorów podstawowych:

   black (#000000) silver (#C0C0C0) gray (#808080) white (#FFFFFF) maroon (#800000) red (#FF0000) purple (#800080) fuchsia (#FF00FF) green (#008000) lime (#00FF00) olive (#808000) yellow (#FFFF00) navy (#000080) blue (#0000FF) teal (#008080) aqua (#00FFFF)

   Ponadto CSS 2.1 definiuje jeszcze jeden dodatkowy kolor podstawowy: orange (#FFA500).

   CSS 3 określa dodatkowo 130 kolorów rozszerzonych.

2. #RRGGBB - podanie kolejno wartości każdej składowej kolorów podstawowych: czerwonego RR (red), zielonego GG (green) i niebieskiego BB (blue). Wszystkie te liczby muszą być dwucyfrowe i są zapisane w systemie szesnastkowym, w którym mamy 16 cyfr podstawowych: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Przykładowo: liczba szesnastkowa B5 oznacza w systemie dziesiętnym 181 (11*16 + 5 = 181).
3. #RGB - to samo co powyżej, lecz w tym wypadku jako składowe kolorów należy podawać liczby jednocyfrowe w zapisie szesnastkowym. Przykładowo kolor #FB0 odpowiada #FFBB00 z poprzedniego zapisu.
4. rgb(R, G, B) - pozwala podać oddzielnie każdą składową koloru w systemie dziesiętnym. Wszystkie liczby muszą się zawierać w zakresie 0...255 (255 = FF).
5. rgb(R%, G%, B%) - to samo co powyżej, lecz teraz należy podawać wartości procentowe (0%...100%). Znak procentu musi się pojawić na końcu każdej liczby i nie może być oddzielony od niej spacją ani żadnym białym znakiem!
6. 28 kolorów systemowych - (patrz: tabela w dalszej części tego rozdziału) czyli takich, które pochodzą z systemu operacyjnego (np. kolor pulpitu, okien, menu, przycisków i inne). Jeśli zmienimy kolory w swoim systemie, zmianie ulegną również przedstawione tutaj kolory systemowe. Dlatego każdy użytkownik może odebrać je inaczej. Z tego powodu należy uważać z ich stosowaniem, ponieważ nie da się przewidzieć efektu na komputerze innego użytkownika.
7. hsl(H, S%, L%) - (CSS 3) alternatywny do RGB model opisu kolorów, w którym kolejne składowe oznaczają:

   H (ang. Hue) - barwa

   Liczba całkowita określana w stopniach (z przedziału od 0 do 360) z tzw. koła barw: 0 - czerwony (Red), 120 - zielony (Green), 240 - niebieski (Blue)

   S (ang. Saturation) - nasycenie

   Wartość procentowa: 0% - szary, 100% - normalny

   L (ang. Lightness) - jasność

   Wartość procentowa: 0% - czarny, 50% - normalny, 100% - biały

   

   HSL jest bardzo intuicyjnym modelem opisu kolorów. Wystarczy wybrać określony odcień z koła barw (H), a następnie odpowiednio sterować nasyceniem (S) i jasnością (L), aby uzyskać pożądany kolor.

   Przykład

   Sterowanie nasyceniem barwy czerwonej

   Definicja	Kolor
   hsl(0, 0%, 50%)
   hsl(0, 25%, 50%)
   hsl(0, 50%, 50%)
   hsl(0, 75%, 50%)
   hsl(0, 100%, 50%)

   Sterowanie jasnością barwy czerwonej

   Definicja	Kolor
   hsl(0, 100%, 0%)
   hsl(0, 100%, 25%)
   hsl(0, 100%, 50%)
   hsl(0, 100%, 75%)
   hsl(0, 100%, 100%)

8. rgba(R, G, B, A), rgba(R%, G%, B%, A), hsla(H, S%, L%, A) - (CSS 3) kolor z przezroczystością, gdzie A (ang. alpha) to wartość określająca przezroczystość z przedziału od 0 (całkowita przezroczystość) do 1 (brak przezroczystości - domyślnie)
9. Słowa kluczowe:
   • transparent - przezroczystość (brak koloru). Jest to odpowiednik zapisu: rgba(0, 0, 0, 0). Wartość ta przydaje się, kiedy chcemy odwołać wcześniejsze ustawienie koloru, który został odziedziczony albo przypisany np. przy pomocy klasy selektorów. W takiej sytuacji proste usunięcie wcześniejszej deklaracji koloru może być niemożliwe albo utrudnione.
   • currentColor - kolor taki sam jak ma tekst aktualnego elementu (czyli wartość cechy color ustawionej bezpośrednio albo odziedziczonej). Jest to bardzo wygodny sposób na przypisanie np. identycznego koloru obramowania co znajdujący się w nim tekst. Dzięki temu przy zmianie koloru tekstu nie będziemy musieli pamiętać, aby zaktualizować również obramowanie - wtedy stanie się to automatycznie.