O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Określamy kolor

Kolor na stronie internetowej określamy dla dwóch rodzajów rzeczy: dla tła (ang. background) i dla elementów (ang. foreground). Pierwsza opcja jest bardzo prosta zawsze będzie to background-color (przy skrótowym zapisie wystarczy nawet samo background). Kolor elementów pierwszoplanowych zależy oczywiście od elementów ale że nie ma ich za wiele to i wystarczy jedna cecha: color. Większy problem może sprawić sposób określenia koloru. Nie mieszamy tu pigmentów tylko w bardzo precyzyjny sposób musimy powiedzieć programowi jaki kolor ma wyświetlić na ekranie. Musimy to powiedzieć w języku zrozumiałym dla programu jakim są przeglądarki.

css color

Jednostki opisu kolorów

Wygląda to trochę skomplikowanie ale da się sprowadzić do trzech czy czterech podstawowych opcji: słownie, w postaci sześcioelementowego kodu HEX, klasyczne rgb i nowe hsl. Od tego aby podać nam właściwy kolor istnieją odpowiednie generatory. Użytkownik wizualnie odszukuje kolor a sprytny program powie mu jak go zapisać. Zapewne powinien na kilka sposobów więc można mieć swój ulubiony ale bez względu na to jak zapiszesz karmazynowy kolor to zawsze powinien być karmazynowy.

O przezroczystości koloru napiszę inną notkę.

Nazwy kolorów podstawowych i ich numeryczne odpowiedniki
Jako tłoNazwaHEX rgbrgbhsl
  black #000000 rgb(0,0,0) hsl(0,0%,0%)
  silver #C0C0C0 rgb(192,192,192) hsl(0,0%,75%)
  gray #808080 rgb(128,128,128) hsl(0,0%,50%)
  white #FFFFFF rgb(255,255,255) hsl(0,0%,100%)
  maroon #800000 rgb(128,0,0) hsl(0,100%,25%)
  red #FF0000 rgb(255,0,0) hsl(0,100%,50%)
  purple #800080 rgb(128,0,128) hsl(300,100%,25%)
  fuchsia #FF00FF rgb(255,0,255) hsl(300,100%,50%)
  green #008000 rgb(0,128,0) hsl(120,100%,25%)
  lime #00FF00 rgb(0,255,0) hsl(120,100%,50%)
  olive #808000 rgb(128,128,0) hsl(60,100%,25%)
  yellow #FFFF00 rgb(255,255,0) hsl(60,100%,50%)
  navy #000080 rgb(0,0,128) hsl(240,100%,25%)
  blue #0000FF rgb(0,0,255) hsl(240,100%,50%)
  teal #008080 rgb(0,128,128) hsl(180,100%,25%)
  aqua #00FFFF rgb(0,255,255) hsl(180,100%,50%)

Słowne określenie koloru

słowne określenie koloru X11Do pewnego stopnia najprostszym sposobem określenia koloru jest wpisanie jego słownej nazwy. Jest to o tyle oczywiste rozwiązanie, że znając nieco angielski jesteś w stanie łatwo rozpoznać kolor (mniej więcej). Lista podstawowych kolorów jest niewielka (aqua/cyjan, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow), pochodzi ze specyfikacji języka HTML 4.1 Nie ma potrzeby jednak ograniczać się do zaledwie tych szesnastu kolorów. Mniej więcej od 2005 roku wszystkie przeglądarki rozumieją zapis słowny obejmujący kolory z systemu X11. Lista ta stała się częścią modułu kolorów w specyfikacji CSS3 (moduł kolorów ma od 2012 status rekomendacji). Istnieje niewielka różnica pomiędzy kilkoma kolorami z oryginalnego systemu X11 i kolorami zalecanymi przez W3C.

  • CSS Color Module Level 3 - 4.3. Extended color keywords
  • wikipedia: Kolory w Internecie - Nazwy kolorów w systemie X11
  • wikipedia: X11 color names

Zmieniając tylko kolory linków w szablonie najwygodniej bawić się kolorami wykorzystując ich nazwy. Jest to proste i szybkie.

a {
 color:Crimson;
 text-decoration:none;
}
a:hover {
 color:IndianRed;
}

Bardzo trudno jest prowadzić rozmowy na temat koloru, słowa nigdy w sposób precyzyjny nie opiszą koloru. Możemy umówić się co do odcienia karmazynowego ale bądźmy ze sobą szczerzy poniższe kolory równie dobrze można by nazwać karminowym, malinowym, czerwonym, magentowym czy nawet cukierkową czerwienią jabłka.

             

Numeryczne określenie koloru

Kolorów są miliony i nazwanie ich wszystkich byłoby syzyfową pracą. Początkowo, gdy użytkownicy korzystali z 8 bitowej palety kolorów było to jeszcze możliwe. Ustalono paletę 216 bezpiecznych kolorów, które przy tak ograniczonych możliwościach jakie dawały wtedy komputery były sensownym rozwiązaniem. Teraz tzw. bezpieczna paleta jest już raczej tylko historyczną ciekawostką.

© Evelin Kasikov 2007–2012 CMYK embroideryW szkole pewnie uczono cię, że kolory podstawowe to żółty, czerwony i niebieski. Mieszając takie farbki (pigmenty) można uzyskać cały szereg innych barw. To swego rodzaju uproszczenie ale mimo wszystko prawdziwe. Mieszanie farb (pigmentów) opiera się na syntezie subtraktywnej. Łatwo zauważyć w codziennych, kolorowych gazetach paski kontrolne z kolorami: cyjanowym, magentowym i żółtym. To są właśnie barwy podstawowe dla druku. Połączone stworzą czarny kolor (raczej umownie bo każdy drukarz będzie miał zapewne własną recepturę na głęboki kolor czarny). Takie barwy podstawowe mają niewielkie znaczenie dla publikacji wyświetlanych na ekranie.

@ Lori Stotko Artist - Stuart Nafey Photographer - light doodleEkran to nie papier, który odbija światło, ekran sam je emituje. Kolory na ekranie powstają w wyniku syntezy addytywnej (mniej więcej) i barwami podstawowymi są tu czerwony, niebieski i zielony. Ze zmieszania takiego światła uzyskuje się światło białe. Czarna barwa natomiast jest tu brakiem światła. Określając kolor numerem należy właśnie podać długość światła dla kanałów czerwonego, zielonego i niebieskiego.

Zapis szesnastkowy (HEX) kanałów rgb

Zapis szesnastkowy (heksadecymalny stąd skrót HEX) podaje dwucyfrowy numer dla każdego kanału i poprzedza go kratką. Napisałam dwucyfrowy ale w systemie szesnastkowym poza dziesięcioma cyframi wykorzystuje się jeszcze sześć pierwszych liter alfabetu. Czyli cały zestaw wykorzystywanych cyfr wygląda tak: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Z tych szesnastu znaków buduje się numer koloru podając kolejno wartość dla kanału czerwonego, zielonego i niebieskiego: #RRGGBB.

a {
 color:#dc143c;
 text-decoration:none;
}
a:hover {
 color:#cd5c5c;
}

Jest to najpopularniejszy sposób zapisu koloru na stronach internetowych. Raczej trudno się domyślić co tych sześć znaków oznacza, jaki to kolor ale jest to bardzo prosty zapis a gotowe numery podaje i tak zawsze jakiś generator. Dodatkowo najczęściej używane czysto szare odcienie łatwo zapamiętać: #000000 to czarny a #ffffff to biały, jako kolor tekstu najczęściej używam bardzo ciemnego szarego: #333, dla informacji dodatkowych często jest to #666, a jasne kreseczki kreślę kolorem #ccc.

Jeżeli numery dla poszczególnych kanałów powtarzają się to można skrócić zapis do trzech cyfr.



Zapis dziesiętny kanałów rgb

Zapis dziesiętny poszczególnych kanałów działa dokładnie tak samo jak zapis hex tylko zamiast szesnastu cyfr dysponujemy dziesięcioma więc aby zapisać poziomy poszczególnych kanałów wykorzystujemy liczby od 0 do 255. Jeżeli chcemy kolor zapisać w ten sposób to liczby dla poszczególnych kanałów rozdzielamy przecinkiem, całość ujmujemy w nawias okrągły i poprzedzamy literami rgb: rgb(r,g,b).

a {
 color:rgb(220,20,60);
 text-decoration:none;
}
a:hover {
 color:rgb(205,92,92);
}

Jest to całkiem wygodny sposób zapisu, podobny do poprzedniego tylko składa się z większej liczby znaków i stąd zapewne jego mniejsza popularność. Jeżeli jednak jesteś przyzwyczajony do takiego zapisu to łato będzie Ci skorzystać z jego rozwinięcia w postaci rgba.

Zapisu rgb można się nauczyć, można się do niego przyzwyczaić ale mało kto jest w stanie myśleć o kolorach w postaci rgb.

Zapis na podstawie podstawowych cech koloru - hsl

Podstawowe cechy koloru to barwa, nasycenie (nazywane też saturacją) i jasność. Jest to znacznie bardziej intuicyjny system i opiera się nie na jakiś tajemniczym sposobie wyświetlania kolorów na ekranie ale na sposobie odbioru koloru. Specyfikacja CSS na poziomie 3 dodaje właśnie taki system jako jedna z możliwości opisu koloru. Jest to jednak nowość. Działa doskonale we wszystkich nowych przeglądarkach ale ich stare wersje mogą nie obsługiwać takiego opisu koloru więc póki co proponuję ostrożnie (oczywiście najpóźniej rozumienia tego systemu nauczył swoje przeglądarki Microsoft więc IE obsługuje hsl dopiero od wersji 9).

Kolor w systemie hsl zapisujemy podobnie jak dziesiętne rgb w nawiasie okrągłym, rozdzielając przecinkami i poprzedzając literami hsl: hsl(h,s%,l%).

H czyli hue to numer barwy. Określa się go na podstawie koła barw więc jest to oczywiście kąt ale zapisujemy tylko sam numer bez oznaczenia stopnia. Na kole początkiem i końcem zawsze jest czerwony więc dla niego numer to zarówno 0 jak i 360.

 348  318  288  258  228  198  168  138  108  78  48  18

S czyli saturation to procentowa wielkość nasycenia. Sto procent to pełne nasycenie, pełna jaskrawość. Zero natomiast to odcień szary.

100% 90% 80% 70% 60% 50% 40% 30% 20% 10% 0%

L czyli lightness to procentowe określenie jasności koloru. Zero to oczywiście czerń, sto procent biel a wszystko pomiędzy to różne odcienie koloru przy czym jego czysta wersja to 50%. Oczywiście gdybyśmy zmienili nasycenie koloru na zero to bez względu na to jaki to byłby kolor to otrzymalibyśmy paletę składającą się z odcieni szarości.

100% 90% 80% 70% 60% 50% 40% 30% 20% 10% 0%

a {
 color:hsl(348,83%,47%);
 text-decoration:none;
}
a:hover {
 color:hsl(0,53%,58%);
}

Określając cechy koloru zostawiamy sobie możliwość bardzo łatwej edycji. Aby subtelnie zmienić odcień wystarczy poprawić jedną czy dwie cyfry.  Nawet w ciemno można spróbować. Chcesz aby kolor był bardziej pastelowy? Nic prostszego. Zmniejsz nieco nasycenie (60%) bo pastele nie są odcieniami jaskrawymi i dodaj nieco jasności (70%), pastele to jasne barwy. Voila, pastelowy odcień gotowy.

348 318 288 258 228 198 168 138 108 78 48 18

Hsl, podobnie jak rgb, ma swoją wersję wykorzystującą kanał alfa. Będzie to hsla.

Ostrzegam jedynie, że hsl działa nieco inaczej niż opis hue-saturation-lightnes w programach graficznych, dla mnie bardziej intuicyjnie niż np w gimpie ale to zapewne kwestia zrozumienia. Większość generatorów podaje numer HEX koloru więc jeżeli z nich korzystasz a achcesz u siebie w szablonie pobawić się odcieniami korzystając z możliwości hsl t potrzebujesz jeszcze odpowiedniego kalkulatora, który przeliczy numery kolorów.

Jak opisać kolor w szablonie?

Który z powyższych sposobów wybrać? To zależy do tego jak daleko posunięte zmiany planujesz. Każdy z powyższych sposobów jest dobry i ma swoje zalety i ograniczenia.

Słowny sprawdzi się przy drobnych zmianach. Jest łatwy do zrozumienia i daje ograniczony wybór kolorów co sprawia, że łatwiej się zdecydować. Jeżeli zmieniasz tylko kolor linków albo jakiegoś innego pojedynczego elementu to tak będzie najłatwiej i najszybciej.

Numeryczny rgb w wersji HEX jest najpopularniejszym sposobem więc polecam go do stosowania w szablonach. Większość generatorów kolorów podaje ich numery w systemie szesnastkowym rgb. Jeżeli zmieniasz wiele elementów, ingerujesz w tło wykorzystujące różne odcienie, tworzysz kolorystykę szablonu od zera to słowny opis kolorów będzie dla ciebie niewystarczający i konieczne będzie szukanie bardziej zniuansowanych odcieni. Najłatwiej zapisać je właśnie w postaci HEX po pierwsze dlatego, że jest to prosty, nieduży zapis więc trudno popełnić w nim jakiś kolosalny błąd a po drugie dlatego, że i tak numer koloru pobierasz z jakiegoś generatora. Nie ma nic prostszego niż kopiuj/wklej.

Zapis wykorzystujący cechy koloru (hsl) jest najbardziej intuicyjny. Nie trzeba już każdej poprawki koloru wynosić do jakiegoś zewnętrznego generatora, wystarczy zmienić nieco procent jasności czy nieznacznie numer koloru i odcień poprawiony. Łatwiej też zrozumieć zapis koloru. Widząc procent jasności czy nasycenia koloru jesteś w stanie mniej więcej określić czy jest on szary czy intensywny, jasny czy ciemny. Najbardziej polecam więc skorzystać z tego rozwiązania jednocześnie uczulam na fakt iż IE dopiero od wersji dziewiątej obsługuje taki zapis (czyli wg. rankingu około 63% użytkowników IE co daje niespełna 14% użytkowników polskiego internetu nie będzie widziało koloru tak zapisanego).

Czyli co polecam? Dla laików i niezainteresowanych tematem słowa-klucze. Dla niezawracających sobie głowę duperelami HEX rgb. Dla ciekawskich, który z szablonami zostaną na nieco dłużej hsl.


Wpisy na podobne i powiązane tematy:

 

niedziela, 12 sierpnia 2007, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
avo_lusion
2012/06/09 15:00:49
Ja lubię zabawę z kolorami, choć jeszcze zabawniej jest, kiedy kolor czerwony wychodzi na szablonie jako zielony na przykład:)
-
kate_mac
2012/06/09 15:47:38
@avo_lusion
I tak najgorsza jest różnica pomiędzy ekranem a drukiem. Radko drukuję więc nie mam doświadczenia w błędach i pomyłkach jakie przy takiej okazji wychodzą. Ostatnio zaprojektowałam neoprenowy pokrowiec na netbooka mojej mamie. Projekt wyglądał tak:
szablonkatemac.blox.pl/resource/dla_eMy3a.jpg
szablonkatemac.blox.pl/resource/dla_eMy3b.jpg
Miał to być bogaty, ciemnoczerwony odcień. Czysta królewskość i elegancja. A wyszła jakaś różowość. Nie tak źle ale odcień dużo bardziej magentowy niż czerwony więc zamiast kremowo-beżowych ornamentów na bordowym tle dostałam różowe ornamenty na bordowym tle. Co ciekawe jak próbowałam zrobić temu zdjęcie aby porównać na ekranie rzeczywistość i projekt to różnica stawała się niemal niewidoczna. Zupełnie nie rozumiem tych czarów ekranowo-rzeczywistych.
-
Gość: GLOOS, *.cpe.marton.net.pl
2016/12/26 15:49:42
Zbyt mała ilość opisanych kolorów
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...