Czy zdarzyło Ci się wejść na stronę www i od razu poczuć, że wygląda dobrze? Albo odwrotnie – zamknąć kartę po kilku sekundach, bo kiepsko się ją przegląda? Do końca nie wiesz czy to kwestia całego interfejsu czy samych kolorów, ale coś z nią jest nie tak. To właśnie praktyka teorii barw w działaniu.
W tej serii kilku wpisów dotyczących koloru przejdziemy od podstaw (koło barw, odcień, nasycenie itd.), przez rodzaje palet kolorystycznych, aż po praktyczne wskazówki: jak dobrać paletę do interfejsu, marki i użytkownika, nie robiąc sobie przy tym krzywdy.
Czym jest kolor i teoria barw?
Kolor to – obok kształtu, linii, formy, tekstury i przestrzeni – jeden ze składników kompozycji obrazu. Można za jego pomocą wpływać na emocje, bądź prowadzić narrację. Kolor to nic innego jak światło o odpowiedniej długości fali i tradycyjnie dzieli się na siedem barw- czerwony, pomarańczowy, żółty, zielony, niebieski, indygo i fioletowy. Przy końcach spektrum, przechodzi ono w niewidzialne dla nas podczerwień i ultrafiolet. Po zsumowaniu tych barw, powstaje białe światło. Gdy się je rozszczepi, wszystkie kolory składowe może zobaczyć np. na niebie w postaci tęczy.
Teoria barw to zestaw zasad i obserwacji, które pomagają używać koloru świadomie – tak, żeby nie tylko „ładnie wyglądał”, ale też wspierał komunikat, emocje i użyteczność projektu.
W praktyce teoria barw pomaga:
- zrozumieć relacje między kolorami (np. dlaczego czerwony + zieleń może wyglądać super… albo jak świąteczna choinka),
- przewidywać emocjonalny efekt (niebieski – spokój i zaufanie, żółty – energia, radość itd.),
- budować spójne systemy: brand, UI, ilustracje, marketing, prezentacje.
Dobra wiadomość: nie musisz być fizykiem ani malarzem, żeby z niej korzystać. W kontekście projektowania – zwłaszcza UI/UX – wystarczy dobrze zrozumieć kilka fundamentalnych zasad.
Współczesna teoria kolorów opiera się w dużej mierze na kole kolorów Isaaca Newtona z 1666 r.
Koło barw – twoja mapa kolorystycznego świata
Klasyczne koło barw (w wersji „malarskiej” RYB – red, yellow, blue) dzieli kolory na trzy grupy:
- Kolory podstawowe – czerwony, żółty, niebieski (nie da się ich uzyskać przez zmieszanie innych).
- Kolory drugorzędne – zieleń, pomarańcz, fiolet (powstają po zmieszaniu dwóch barw podstawowych).
- Kolory trzeciorzędowe – np. żółto‑zielony, niebiesko‑zielony, czerwono‑fioletowy itd. (powstają przez zmieszanie koloru podstawowego z drugorzędnym).
Na bazie tego koła pracują wszystkie najważniejsze „układy” (schematy) kolorystyczne.
Odcień, cień, tint, ton, wartość, nasycenie
W wielu materiałach te pojęcia są mylone, a to one decydują o tym jak paleta jest odbierana – żywa i współczesna, czy może stonowana i elegancka.
- Odcień (hue) – „czysty” kolor na kole: czerwony, niebieski, zielony itd. To rodzina koloru.
- Cień (shade) – odcień + czerń → kolor robi się ciemniejszy, bardziej „ciężki”.
- Tint (często po polsku: rozjaśnienie) – odcień + biel → kolor jaśniejszy, „pastelowy”.
- Ton – odcień + szarość (czyli jednocześnie biel i czerń) → kolor bardziej „przykurzony”, stonowany.
- Wartość (value) – jak jasny / ciemny jest kolor (niezależnie od nasycenia). Biały ma najwyższą wartość, czarny – najniższą.
- Luminancja (jasność) – obiektywna, mierzalna fizycznie jasność światła emitowanego lub odbitego przez powierzchnię. Na to jak postrzegamy poszczególne barwy ma wpływ światło, które jest nieodłącznym składnikiem kolorów. Im jest go więcej, widziane przez nas kolory będą jaśniejsze, aż staną się zupełnie białe. Im jest go mniej, będziemy je postrzegać jako ciemniejsze, aż znikną w całkowitym cieniu i staną się czarne. W świecie cyfrowym często towarzyszy jej suwak z wartościami 0-100% dla danego koloru.
- Nasycenie (saturation) – odnosi się do intensywności barw. Im bardziej nasycony kolor, tym jest on mocniejszy, bardziej jaskrawy, widoczny, neonowy. Mniej nasycone barwy są po prostu bledsze, sprane, aż staną się szare i w zasadzie pozbawione koloru, zgaszone.
To właśnie manipulując wartością i nasyceniem, jesteś w stanie z jednego odcienia zbudować całą paletę: tło, przyciski, karty, alerty itd., ale również wpływać na emocje. Obraz złożony z bardziej nasyconych, jasnych i wyraźnych kolorów może opowiadać nam o jakiejś radosnej, szczęśliwej i przyjemnej sytuacji, chwili. Przytłumione barwy wprowadzają w stan zadumy, przygnębienia.
Należy jednak uważać, aby nie przesadzić z saturacją. O ile nie jest to uzasadniony element kompozycji, zbyt nasycone barwy wyglądają sztucznie i wcale nie poprawiają wyglądu zdjęcia / grafiki.
Temperatura kolorów: ciepłe, chłodne, neutralne
- Ciepłe – czerwienie, pomarańcze, żółcie i ich pochodne – kojarzą się z energią, słońcem, działaniem.
- Chłodne – błękity, zielenie, fiolety i ich pochodne – spokój, profesjonalizm, natura.
- Neutralne – biele, czernie, szarości, beże, brązy – tło, balans, baza.
Przy projektowaniu UI temperatura koloru bardzo szybko wpływa na pierwsze wrażenie- finansowy landing page w pastelowych różach i turkusach może budzić zupełnie inne emocje niż ten sam układ w granacie i butelkowej zieleni.
Systemy kolorów: RGB, HEX, CMYK, Pantone
Urządzenia cyfrowe takie jak: współczesne aparaty, a także monitory itp. do reprezentacji poszczególnych barw stosują model RGB, co oznacza: Red – czerwony, Green – zielony, Blue – niebieski. Mieszając ze sobą te trzy barwy w różnych proporcjach, możemy odtworzyć bardzo duży zakres kolorów, które jest w stanie dostrzec ludzkie oko. Jest to tzw. model addytywny, ponieważ dodajemy do siebie kolory, które po całkowitym zmieszaniu tworzą barwę białą. Większość urządzeń, z których korzystamy na co dzień działa w oparciu o model sRGB (standarised Red, Green, Blue) i niestety nie pokrywa w 100% tego zakresu. Profesjonalne monitory do obróbki graficznej pokrywają obszar Adobe RGB, a w przypadku tańszych modeli, przynajmniej pełne sRGB. Telefony, „zwykłe” monitory czy ekrany tańszych bądź biznesowych laptopów mogą tego nie osiągać.
W przypadku wydruków sprawa wygląda nieco inaczej, bo tam przeważnie stosuje się model CMYK, który reprezentuje takie barwy jak: Cyan – odcień niebieskiego zbliżony do turkusu, Magenta – podobny do fuksji, co dla facetów jest po prostu różowym :), Yellow – żółty, Key colour – czarny. Zsumowanie tych barw daje nam głębszą czerń. Biały jest brakiem kolorów i jego odcień jest różny w zależności od np. papieru, na którym powstaje wydruk. Jest to tzw. model subtraktywny, ponieważ aby osiągnąć biel musimy odjąć kolory.
W designie cyfrowym interesują nas głównie cztery rzeczy:
- RGB – Red, Green, Blue; model addytywny (światło). Używany we wszystkich ekranach. Im więcej „dodajesz”, tym bliżej bieli.
- HEX – jest to zapis koloru RGB w postaci kodu szesnastkowego, np.
#FF0000(czysta czerwień),#FFFFFF(biały),#000000(czarny). - CMYK – Cyan, Magenta, Yellow, Key (Black); model subtraktywny (tusz, pigment). Standard w druku.
- Pantone – ustandaryzowana paleta setek jeśli nie tysięcy kolorów. Każdy kolor ma swój unikalny numer, po którym można go zidentyfikować i mieć pewność, że np. Pomarańczowy 021 zawsze będzie właśnie tym kolorem, a nie jakimś bardziej czerwonym lub żółtym odcieniem. Chętnie wykorzystywane w logotypach i innych elementach, które powinny zawsze wyglądać tak samo. Kolory Pantone są stosowane w druku offsetowym. W druku cyfrowym możemy je co najwyżej symulować z kolorów CMYK, ale rzadko kiedy wychodzi to dobrze.
Szykując projekt w RGB pamiętaj, że w druku kolory mogą wyjść ciemniejsze i mniej nasycone, więc przy projektach „na papier” dopasuj je w CMYK. Do UI i „webu” pracujesz w RGB.
W tym wpisie to tyle, bo za chwilę rozrósłby się tak, że mało komu chciałoby się go czytać. W kolejnej części psychologia barw, czyli jaki kolor w jaki sposób na nas oddziałuje i z czym się kojarzy.
Dodaj komentarz