Kolory w CSS to więcej niż tajemniczy zapis #abcdef. Zobacz jakie przestrzenie barw obsługuje CSS3, jak mieszać kolory w CSS i który system zapisu wybrać.
color : #778899;
Standardowy zapis koloru w CSS-ie składa się z trzech par cyfr zapisanych w systemie szesnastkowym (każda cyfra jest zakresu 0-F). Dwie cyfry tworzą liczbę z zakresu 0-FF, która określa ile światła o kolorze reprezentowanym przez daną parę ma być emitowane.
FF (dziesiętnie 255) to maksymalna ilość światła, a 00 – jego brak. Kolory par są ustalone: to kolejno czerwony, zielony i niebieski, a mieszając je (synteza addytywna) otrzymujemy pełną paletę kolorów. Z tego zapisu korzysta się najczęściej.
color: #789;
Aby skrócić zapis, możemy uprościć niektóre kolory. CSS pozwala zapisać je jako trzy cyfry, jeśli w każdej parze występują takie same cyfry. Każdy znak zostanie powielony. Np. zapis koloru F30 w CSS-ie jest równoznaczny z FF3300.
Tego zapisu koloru używamy, jeśli chcemy zmniejszyć rozmiar arkusza CSS.
color : rgb( 119, 136, 153);
Funkcja rgb(r,g,b) przyjmuje trzy parametry w zapisie dziesiętnym. Tak jak w standardowym zapisie, liczby całkowite z zakresu 0-255 oznaczają kolejne składowe, ale zamienione z postaci szesnastkowej do dziesiętnej.
Zapisujemy tak kolor np. jeśli w takiej formie zwraca go program graficzny albo chcemy łatwo dodawać i odejmować wartości kolorów.
Co jeśli źle określę kolory w CSS?
Jeśli przekroczymy zakres, CSS przyjmie wartość 0 (dla liczb ujemnych) i 255 dla większych od 255. Według specyfikacji color : rgb( -1, 127, 256) powinno zostać zamienione na color : rgb( 0, 127, 255). Może to być istotne dla skryptów wyliczających kolory.
color : rgb (46.667%, 53.333%, 0.6%)
Funkcja rgb(r,g,b) może również przyjmować wartości procentowe. Oblicza się je dzieląc wartość dziesiętną przez 255 (maksymalną wartość danej składowej). Istotną różnicą między zapisem cyfrowym a procentowym jest użycie liczby typu float, a nie integer jako argumentu funkcji. Monitory korzystają ze skwantyfikowanych do liczb całkowitych wartości, więc przeglądarka musi przeliczyć procent na wartość całkowitą. Mogą więc pojawić się problemy z zaokrągleniami, zwłaszcza przy skryptach mnożących lub dodających kolory.
Ten sposób pozwala łatwiej przeliczyć jak dużo danego koloru chcemy użyć. Np. zapis rgb(75%, 75%, 75%) więcej mówi o jasności koloru niż #bfbfbf, chociaż jest mniej dokładny.
Ile cyfr po przecinku zapisywać?
W CSS-ie możemy stosować liczby zmiennoprzecinkowe o precyzji pozwalającej osiągnąć zakres -3.4e+38F to +3.4e+38. Oznacza to, że moglibyśmy użyć aż 21 cyfr po przecinku, gdyż specyfikacja zaleca stosowanie jak najdokładniejszych liczb. Szesnastkowe 77 po zamianie na procenty (119/255) miałoby więc zapis .466666666666666666667.
Jednak precyzja liczb zapisanych na dwóch znakach w systemie szesnastkowym jest znacznie mniejsza i wynosi około 0,39 procenta (tzn. 1/255 = 0,0039216). W związku z tym wystarczy zapisać trzy cyfry po przecinku wartości wyrażonej w procentach, aby przeglądarka zawsze zaokrągliła ją poprawnie.
Podobną regułą powinniśmy kierować się zapisując np. grubość linii w emach. Ni musimy pisać .666666666666666666666, skoro nawet jeśli użytkownik powiększy rozmiar tekstu, to i tak nie przekroczy dokładności większej niż 4 cyfry po przecinku.
Oczywiście nie musimy uzupełniać liczby zerami po prawej stronie. Możemy również pozbyć się zera przed kropką. Nie musimy więc pisać „0.6000” – wystarczy „.6”.
color : hsl (210, 22, 60)
W CSS kolory mogą być zapisane również w przestrzeni HSL (hue-saturation-lightness, czyli kolor-nasycenie-jasność). W tej przestrzeni pierwsza składowa, kolor, jest reprezentowana jako kąt w kole kolorów (zakres 0-360, bez podawania jednostki, którą są stopnie, większe wartości są dzielone modulo 360). Kolejne składowe, nasycenie i jasność są zapisywane w procentach.
Według W3C taki schemat jest bardziej intuicyjny niż RGB, w którym żeby uzyskać kolor ciemniejszy o 10% trzeba się sporo naliczyć, a i tak nie zapiszemy wyniku dokładnie. Problemem może być tylko odgadnięcie pod jakim kątem w kole kolorów kryje się np. pomarańczowy. Można to łatwo policzyć znając pozycje podstawowych kolorów: czerwony ma kąt 0 (czyli 360), zielony 120, a niebieski 240. Jako że połączenie zielonego z czerwonym w równych proporcjach za pomocą syntezy addytywnej daje żółty, to kąt 60 reprezentuje żółty. Pomarańczowy znajdzie się więc między żółtym a czerwonym, pod kątem 30 stopni. W3C udostępnia algorytm do przeliczania wartości ze schematu HSL do RGB i prezentuje wygenerowaną na jego podstawie tabelę:
Pozostałe parametry to nasycenie i jasność. Nasycenie 100% da wyraźny kolor, a 0% będzie zawsze szary. Podobnie jest z jasnością: 100% to zawsze biały, a 0% – zawsze czarny. 50% to typowa wartość koloru. Wszystko, co mniejsze od 50% będzie przyciemnione, a powyżej – jasne.
Z przestrzeni HSL będziemy korzystać w przyszłości, gdyż lepiej niż przestrzeń RGB odpowiada przyszłym wyświetlaczom (np. opartym o e-ink).
color : lightslategray;
Niektóre kolory w CSS-ie mają nazwy słowne (to tzw. kolory nazwane CSS). Popularne przeglądarki powinny poprawnie obsługiwać je wszystkie, ale stosowanie takiego zapisu jest mało wygodne, a lista kolorów nazwanych nie pokrywa się z tzw. kolorami bezpiecznymi (patrz ramka poniżej). Ponadto zdecydowana większość kolorów (dokładnie 99,8%) nie ma nazw, więc i tak w niektórych miejscach musielibyśmy zastosować inny zapis. Listę 140 kolorów nazwanych można pobrać ze strony W3C (http://www.w3.org/TR/css3-color/#svg-color).
Bezpieczne kolory w CSS
Dobierając kolor, powinniśmy pamiętać o zastosowaniu odpowiedniej palety. Możemy co prawda użyć dowolnego koloru, np. niebieskiego w odcieniu 0000f8, ale niektóre starsze urządzenia mogą go nie wyświetlać. Z tego względu zaleca się stosowanie tylko tzw. kolorów bezpiecznych. To kolory, w których każda para zawiera kolor z sześcioelementowego zbioru {00, 33, 66, 99, CC, FF}, np. FF00FF, FF3300 czy 666666. Takich kolorów jest dokładnie 216.
color : rgba( 119, 136, 153, 1);
color : rgba (46.667%, 53.333%, 0.6%, 1)
color : hsla (210, 22, 60, 1)
Kolory w CSS nie muszą w pełni wypełniać tekstu, tła obiektu czy ramki. Możemy zdefiniować przezroczystość. CSS pozwala zdefiniować ją poprzez zastosowanie funkcji rgba(r,g,b,alpha) lub hsla (h,s,l, alpha).
Jeśli chcielibyśmy zdefiniować półprzezroczysty kolor tła, CSS będzie wyglądał następująco:
div {background-color: rgba ( 119, 136, 153, .5 ); /* .5 to 50% wypełnienie */
Trzy pierwsze argumenty są takie same jak w analogicznych funkcjach rgb(r,g,b) i hsl(h,s,l), a czwarty argument odpowiada za kanał alpha, czyli przezroczystość koloru. 0 oznacza, że kolor jest całkowicie przezroczysty, a jedynka, że w pełni kryje niższe warstwy. Alpha=1 jest domyślną wartością każdego elementu, który ma kolor.
Uwaga!
Własności takie jak półprzezroczyste kolory zadeklarowane przez funkcję rgba(r,g,b,a) lub hsla(h,s,l,a) mogą nie być obsługiwane przez wszystkie przeglądarki! Aktualny poziom zgodności ze standardem należy sprawdzić w Internet Explorerze i Operze. Safari, Chrome i Firefox zwykle radzą sobie z wyświetlaniem nowych atrybutów.
Kolejną własnością odpowiedzialną za przezroczystość jest własność opacity. Ich działanie różni się zasadniczo: kontrola nad kanałem alpha za pomocą funkcji dotyczy jedynie koloru danego elementu (tła, tekstu, ramki). Natomiast opacity odnosi się do całego elementu i wszystkich jego dzieci. Różnicę wyjaśnia grafika:
Przykładowy kod poniżej pokazuje ponadto jak różnie zachowają się kolejno nakładane na siebie kwadraty o kolorach czerwony (#f00), zielony (#0f0) i niebieski (#00f) z opacity równym .5 (50%) i takie same kwadraty, w których każdy kolor ma ustawiony kanał alpha na 50%. Wyraźnie widać, że kolory wymieszane za pomocą opacity są różne od tych mających ustawiony kanał alpha.
Różnica między kanałem alpha a opacity
opacity 50%:
alpha 50%:
Stosując poznane własności i funkcje, dostosujemy kolor każdego elementu według uznania. Dobierzemy sposób zapisu odpowiedni do sytuacji i zastosujemy odpowiedni schemat kolorów. Pamiętajmy tylko, że kolory nigdy nie występują samodzielnie. Sprawdźmy {link_wew 4393}jak komponują się z tłem{/link_wew}, {link_wew 4433}czy zawsze będą czytelne{/link} i {link_wew 6942}jakie kolory są teraz modne{/link_wew}.
