Dobór odpowiedniej kolorystyki na stronę internetową może okazać się trudnym zadaniem, szczególnie jeśli nie posiadamy konkretnego zestawu kolorów firmowych. Jednak, jak się przekonasz, istnieją sposoby, by z powodzeniem wybrnąć z tej sytuacji.
Model RGB: jak reprezentowane są kolory
Jak pewnie wiesz, kolor na Twoim monitorze reprezentowany jest przez trzy wartości: Red (czerwony), Green (zielony) i Blue (niebieski). Model RGB został opracowany z uwzględnieniem sposobu postrzegania kolorów przez nasz układ wzrokowy.
Ludzkie oko posiada trzy rodzaje receptorów (zwanych czopkami), wrażliwych na poszczególne długości fal świetlnych:
krótkie: R,
średnie: G
długie: B
Odbierają one określone zakresy promieniowania, a następnie przesyłają te informacje na dalsze poziomy układu nerwowego.
Jako ciekawostkę dodam, że nie jest to w żadnym wypadku uniwersalny sposób reprezentacji barw w przyrodzie. Ptaki np. posiadają dodatkowe receptory do odbierania fioletu i ultrafioletu (Uniwersytet Jagielloński, 2016). Za to psy są wyposażone w zaledwie dwa rodzaje czopków, co czyni ich układ wzrokowy trochę uboższym.
Ale wracając do meritum, powszechnie stosowany dziś system reprezentacji kolorów RGB jest stosunkowo nowym wynalazkiem. Na przestrzeni wieków malarze stosowali inne, analogowe modele reprezentacji barw. Starali się zestawiać kolory w taki sposób, by osiągnąć komfort oglądania danego obrazu oraz wytworzyć subiektywne poczucie przyjemności. Właśnie to nazywamy harmonią.
Harmonia barw. Czym jest i jak ją osiągnąć
Funkcjonuje kilka ogólnie przyjętych zestawień kolorystycznych, uznawanych za harmonijne. Najczęściej przedstawiane są one we wzajemnej geometrycznej relacji na kole barw. Poniżej przedstawiam te najczęściej spotykane kombinacje.
Renesansowi artyści wykorzystywali podobne zasady zestawiania kolorów, jak my dzisiaj, a więc:
stosowali jeden odcień, ale o zmiennym nasyceniu i jasności (monochromatyczne) lub
zestawiali barwy sąsiadujące (analogowe) bądź też znajdujące się naprzeciwko siebie w kole barw (komplementarne)
Późniejsi malarze, jak Seurat, Chavreul czy Munsell także z powodzeniem wykorzystywali te reguły (Westland i in. 2007) Ten ostatni opracował nawet własny system klasyfikacji barw i zauważył, że najprzyjemniejsze odczucia wzrokowe tworzy gwałtowny kontrast między kolorami dopełniającymi. Promował więc kolorystyczne opozycje:
czerwony - zielony,
pomarańczowy – niebieski oraz
żółty – fioletowy.
Warto zauważyć, że wymienione tu pary, po zmieszaniu, dadzą czerń, biel lub szarość. Zatem wrażenie harmonii może być związane z balansem wizualnym i równomiernym pobudzeniem wszystkich receptorów wzrokowych. Zapewnia to subiektywnie odczuwany komfort.
Takie zamierzone dążenie do harmonii możemy odnaleźć chociażby w malarstwie Van Gogha, który w takich oto słowach wyraził się odnośnie jednego ze swoich obrazów Pokój van Gogha w Arles:
- Letter to Theo van Gogh. Arles, Tuesday, 16 October 1888. (Van Gogh Museum in Amsterdam)
Choć dziś możemy podziwiać ów obraz w niebiesko-żółtej kolorystyce, to pierwotnie wyglądał on trochę inaczej.
Źródło fotografii: Van Gogh Museum in Amsterdam https://ontrafel.vangogh.nl/en/story/37/the-colour-has-to-do-the-job-here/
W cytowanym przed chwilą liście do brata Van Gogh opisał pierwotną kolorystykę obrazu. Z treści wynika, że ściany sypialni były fioletowe, a podłoga czerwonawa. Na tej podstawie udało się zrekonstruować oryginalny wygląd dzieła. Widzimy tu zastosowanie właśnie barw dopełniających.
Jak dobrać harmonijne barwy na stronę internetową
Idąc tropem, że odczucie harmonii wynika z równomiernego pobudzenia receptorów wzrokowych, nasza paleta kolorów powinna zwierać barwy, które znacząco różnią się ilością poszczególnych składowych RGB. Zachowamy wtedy balans w poziomach aktywacji receptorów.
Weźmy na przykład czerwony (R: 255 G: 62 B: 0) Jeśli teraz odwrócimy wszystkie wartości, uzyskamy barwę dopełniającą, czyli niebieską (R: 0 G: 193 B: 255). Mieszając je razem, dostaniemy szarość.
Budując swoją paletę kolorów na stronę internetową warto mieć to na uwadze i starać się, by cechowała się ona „wewnętrzną różnorodnością”, a nie oscylowała wokół jednej składowej.
Przydatne narzędzia
Dla ułatwienia możemy posiłkować się gotowymi schematami łączenia kolorów. Znajdziemy je w większości narzędzi do komponowania palet, jak np. Paletton, Color Designer czy Adobe Color.
Wiele z nich posiada też gotowe palety do wykorzystania. W zależności od tego, jaki nastrój i charakter chcemy osiągnąć, możemy wybrać odpowiednie zestawienie. Będzie to dobre rozwiązanie, jeżeli nie mamy jeszcze żadnego koloru wiodącego, ale wiemy, jaki rodzaj witryny chcemy budować. Możemy wtedy skorzystać z Adobe Color lub też innych stron, które proponują gotowe schematy do wykorzystania.
Jedną z ciekawszych opcji wydaje się samodzielne tworzenie zestawów kolorów na podstawie fotografii czy obrazów. Wystarczy z takiego zdjęcia punktowo pobrać próbki kolorów i je zapisać. Trochę bardziej zaawansowanym sposobem jest zastosowanie do naszego obrazka efektu powodującego jego pikselizację. Wtedy paleta wyłania się niejako „sama”.
Jeśli nie mamy dostępu do żadnego graficznego software’u, możemy wykorzystać chociażby Canva Color Palette Generator. Narzędzie to umożliwia wgranie własnego obrazka i na jego podstawie tworzy paletę kolorów.
Optymalna ilość barw na stronie internetowej
Często pojawiającą się wątpliwością jest kwestia dotycząca ilości kolorów, potrzebnych do stworzenia dobrego interfejsu. Moim zdaniem nie ma tutaj jednej odpowiedzi. Należy wybrać tyle tonów, by strona mogła skutecznie spełniać wszystkie założone funkcje, a więc:
dobrze reprezentować Twoją markę i stanowić część skutecznego brandingu (np. bazując na barwach firmowych)
przedstawiać informacje w sposób spójny i zgodny z przyzwyczajeniami użytkownika (np. wykorzystując standardowe tła powiadomień i przycisków)
jednoznacznie komunikować hierarchię informacji na stronie internetowej (np. poprzez wykorzystanie koloru w kilku jego wersjach, różniących się stopniem jasności lub nasycenia do oznaczenia kolejnych poziomów struktury informacyjnej)
Jednocześnie należy odrzucić wszelkie nadmiarowe kolory, które niczego nie wnoszą i tworzą jedynie wrażenie nieporządku. Jeżeli chcesz zastosować niebieski, wybierz jeden odcień i konsekwentnie się go trzymaj. Nie wprowadzaj pięciu podobnych kolorów, których użytkownik i tak nie będzie w stanie rozróżnić.
Jak już wcześniej wspomniałam, najczęściej będziemy potrzebować kilku wersji tego samego koloru: jaśniejszych, ciemniejszych, bardziej i mniej nasyconych. Posłużą one do oznaczenia różnych stanów tego samego elementu czy pokazania hierarchii. Poniżej przedstawiam przykładową paletę kolorów dla małej strony www (np. typu one-page).
Przykład bardzo prostej palety kolorów. Mamy tu jeden kolor wiodący (turkusowy), standardowe czerwienie i zielenie, potrzebne choćby do sygnalizowania statusów oraz kilka odcieni szarości.
Projektowanie a reakcje emocjonalne
Emocje pełnią olbrzymią rolę w codziennym życiu każdego z nas. Niemal każda decyzja jest nacechowana emocjonalnie, czy zdajemy sobie z tego sprawę, czy też nie. Możemy konfabulować i starać się racjonalizować powody swoich wyborów, ale znaczna ich część bazuje na określonych odczuciach w stosunku do przedmiotu decyzji (Reuter M, 2014).
Treści dostępne w internecie powinny więc być zaprojektowane w sposób uwzględniający naszą „emocjonalną percepcję”. Co prawda (…) mechanizmy neuronowe leżące u podstaw estetycznych i emocjonalnych aspektów percepcji kolorów pozostają nieznane (Ikeda i in., 2015), jednak jak najbardziej uprawnione są wszelkie rozważania i próby zrozumienia tych kwestii.
Wyniki badań doświadczalnych nad percepcją kolorów pokazują, że poszczególne ich parametry (ton, nasycenie i jasność) powodują określone reakcje emocjonalne (Kushkin, 2023)
Doświadczenie Kushkina
W badaniu tym bazowano na osądach grupy poddanej doświadczeniu co do oceny powiązania danego koloru z określonym pojęciem.
Okazało się, że niektóre emocje mają większe powiązanie z konkretnym kolorem niż inne. Np. złość zwykle kojarzy się z czerwienią, a smutek ma konotację z różnymi odcieniami niebieskiego. Jasne, nasycone barwy ludzie z reguły łączą z pozytywnymi emocjami, a ciemne z negatywnymi.
Powiecie: no oczywiste. Ale warto zwrócić uwagę na te mniej typowe powiązania. Strach łączy się z szarością i brązami, podniecenie z tonami żółtymi i niebiesko-fioletowymi, a odczucie ulgi budzi skojarzenie ze zgaszonymi fioletami i zieleniami.
Tworząc paletę kolorów na stronę internetową warto mieć na uwadze, jakie kolory wiążą się z poszczególnymi pojęciami.
Strona o tematyce rozrywkowej powinna bazować na jasnych, nasyconych kolorach, kojarzących się z radością czy nawet podnieceniem
witryna firmowa może wykorzystywać bardziej przygaszone odcienie, dające ukojenie i ulgę – poczucie, że możesz się odprężyć, bo oni wszystkim się zajmą
umiejętnie łącząc barwy, kojarzone z przeciwstawnymi emocjami, możemy starać się wywołać huśtawkę emocjonalną, często wykorzystywaną w reklamie. Budując sprzedażowy landing page możesz pokusić się o zastosowanie chłodnych barw na górze strony. Wprowadzą one nastrój smutku i nostalgii. Tutaj zwrócisz uwagę na problemy, które prawdopodobnie posiada odwiedzający witrynę użytkownik, wynikające oczywiście z braku oferowanego przez ciebie produktu. W kolejnym soczyście-kolorowym akapicie opisz wszelkie zalety tego towaru oraz jak bardzo odmieni on życie użytkownika.
Kolory a kwestie użyteczności
Kolor określa osobowość Twojej marki. Dlatego przemyśl dobrze, jak chcesz być postrzegany przez osoby odwiedzające. Pamiętaj, że stronę internetową projektujesz dla określonej grupy użytkowników. Powinieneś wziąć pod uwagę, w jaki sposób korzystają oni z internetu, jakie są ich umiejętności i przyzwyczajenia w tym zakresie. W jak największym stopniu staraj się ułatwić użytkownikom korzystanie z serwisu. Odpowiedni dobór kolorów pomoże w realizacji tego zadania. Ważne elementy, które niosą najistotniejsze informacje, możesz wyróżnić kontrastującymi barwami. Dzięki temu zwrócisz uwagę użytkowników na kluczowe obszary strony.
Warto też zadbać o kolorystykę interakcji. Internauci przyzwyczajeni są do określonego rodzaju komunikacji. Powiadomienia o błędach mogą być surowe i ubrane w zgaszone, ciemniejsze barwy.
Kolory mogą też pełnić rolę indykatora stanu. Niebieskie, podkreślone napisy to z reguły linki. Podświetlone na zielono powiadomienie oznacza np, że formularz został wypełniony poprawnie, wersja czerwona – że coś poszło nie tak. Możemy też wskazywać kolorem interaktywne elementy strony, jak linki czy przyciski. Warto tu być konsekwentnym i robić to zawsze w ten sam, ustalony sposób lub bazować na gotowych wzorcach projektowania. Korzystaj z przyzwyczajeń użytkowników, aby uczynić stronę tak przyjazną, jak to możliwe.
Paleta kolorów a skojarzenia kulturowe
Dlaczego wchodząc na stronę internetową odbieramy ją jako nowoczesną lub przestarzałą? Co sprawia, że jeden design wydaje się dynamiczny, a drugi zdecydowanie statyczny?
Nasze postrzeganie kolorów wiąże się nie tylko z biologicznymi mechanizmami percepcji, ale także uwarunkowaniami kulturowymi i historycznymi. Wcześniejsze doświadczenia mają ogromny wpływ na system skojarzeń. Barwy z PRL-owskich plakatów, starych fotografii, a nawet modne niegdyś na stronach internetowych gradienty, będą budziły skojarzenia z minionymi czasami i wydawały się przestarzałe. Za to czyste, nasycone, bijące po oczach kolory powiodą nasze myśli ku nowoczesności.
Projekty nawiązujące do kolorystyki z dawnych lat często odbierane są jako bardziej dojrzałe i poważne. Modne dzisiaj kolory nadają ton młodzieżowy.
Jednak nie tylko wpływy historyczne należy brać pod uwagę przy projektowaniu interfejsu. Każda kultura posiada nieco inną symbolikę kolorów. Czasem nawet zupełnie inną. Spójrzmy chociażby na różnice w znaczeniu bieli i czerni u różnych narodów.
Należy pamiętać, że symbolika kolorów zawsze funkcjonuje w kontekście kulturowym i musimy mieć na uwadze, kto będzie odbiorcą naszego projektu.
Podsumowanie
Starałam się do tematu podejść z wielu stron i omówić aspekty, jakie należy wziąć pod uwagę przy komponowaniu palety kolorów na stronę internetową. Wbrew często powielanej opinii, to nie harmonijność barw powinna stanowić główny czynnik podczas doboru kolorystyki. Równie istotne będą skojarzenia emocjonalne, historyczne i kulturowe, a także ludzkie mechanizmy percepcyjne.
Bibliografia
Ikeda, T., Matsuyoshi, D., Sawamoto, N., Fukuyama, H., Osaka, N. Color harmony represented by activity in the medial orbitofrontal cortex and amygdala (2015) [31.12.2023]
Jurek,K. (2011) Znaczenie symboliczne i funkcje koloru w kulturze [07.02.2024]
Kolor jaki jest – każdy widzi. Czy na pewno? (2016) Uniwersytet Jagielloński w Krakowie [07.02.2024]
Kushkin, A., Griffin, A., Giordano, A., Savelyev, A. (2023) Cognitively Congruent Color Palettes for Mapping Spatial Emotional Data. Matching Colors to Emotions. W: Cartographic Perspectives, Number 102 [07.02.2024]
Nemcsics, A. (2012) The Complex Theory of Colour Harmony [31.12.2023]
Reuter, M. (2014) Umysł Konfabulujący: analiza kognitywistyczna. Poznań: Wydawnictwo Naukowe Wydziału Nauk Społecznych UAM
van Gogh Museum in Amsterdam [07.02.2024]
Westland, S., Laycock, K., Cheung, V., Henry, P., Mahyar, F. (2007), Colour Harmony [02.07.2024]
