Jak dobrać kolory na stronę internetową?

Dobrać kolory na stronę internetową można na wiele sposobów. Można to podnieść do rangi sztuki, kierować się intuicją, zastosować podejście naukowe lub wykorzystać technologię.

Niezależnie od metod, kolory na stronie internetowej nie są jedynie rzeczą gustu. Jest to też bardziej skomplikowane, niż dobranie kolorów przycisków i ikon.

Po drodze czeka Cię wiele niespodzianek. Przykładowo, jeśli Cię to nie dotyczy, możesz nie wiedzieć, że blisko 10% społeczeństwa ma problem z rozróżnianiem kolorów.

To tylko wierzchołek góry lodowej, który może utrudnić Ci komunikację z częścią grupy docelowej. Na drugim końcu czekają także poważniejsze konsekwencje.

Źle dobrane kolory mogą negatywnie wpłynąć na pozycję Twojej strony. W ekstremalnych przypadkach prowadzą nawet do nałożenia kar przez wyszukiwarki, takie jak Google. Łączy się to z zabronioną techniką keyword stuffing, która polega na ukrywaniu treści poprzez użycie koloru tekstu zbliżonego do koloru tła.

Dlatego w tym artykule przybliżę Ci najważniejsze zagadnienia dotyczące dobierania kolorów na stronę firmową. Następnie pokażę Ci jak dobrać kolory i zbudować paletę dla Twojej strony.

Czy kolory na stronie są ważne?

Kolory na stronie są ważne, ale prawdopodobnie nie z takich powodów jak myślisz. Wpływ kolorów nie jest aż tak wielki, by odmienić nieskuteczną stronę w maszynę do pozyskiwania klientów.

Nie wątpię, że ktoś zna przykłady firm, których losy odmieniły kolory. Jednak bądźmy realistami. Większość mocy przypisywanych kolorom, to slogany z ofert powtarzane przez początkujących projektantów czy agencje.

Kolory nie wyróżnią Twojej strony z tłumu. W najważniejszym miejscu dla większości stron, czyli wyszukiwarce Google wszyscy mają ten sam kolor w wynikach.

Nie będą też łatwe do zapamiętania. Podobnie jak wierszyki do szkoły, kolory zapadaną w pamięć, dopiero gdy będą wielokrotnie powtarzane i to przez pewien czas.

Kolory mają natomiast kilka bardzo konkretnych zadań. Przyjrzyjmy się im bliżej, gdyż będzie to miało wpływ na to, jak dobierzesz kolory na swoją stronę internetową.

Funkcjonalność

Kolory służą przede wszystkim do podkreślania ważnych elementów strony, takich jak wezwania do akcji.

Dzięki kolorom możesz również podzielić stronę na sekcje, nadając im odpowiednie priorytety, np. w stopce strony używa się najczęściej kolorów o niskim nasyceniu (bliskie szarościom).

Kolory, w połączeniu z innymi elementami, pomogą też Twojej stronie być bardziej intuicyjną w obsłudze. Przykładowo: zielony „ptaszek” po wysłaniu formularza sprawia, że użytkownik nawet bez czytania komunikatu wie, że wiadomość została wysłana.

Branding

Choć, jak już wspomnieliśmy, kolory na stronie nie koniecznie wyróżnią Cię z tłumu, to oczywiście są potrzebne do budowania spójnej marki.

Jeśli Twoje działania marketingowe będą na to nakierowane, to Twoje kolory z czasem mogą stać się rozpoznawalne dla grupy docelowej czy nawet lokalnie.

Natomiast nawet bez tego kolory firmowe powinny być spójnikiem, który nie tylko jest mocnym akcentem na stronie, ale przede wszystkim łączy wszystko, co dotyczy firmy, np. profile społecznościowe.

Design

Oprócz zadań typowo technicznych, kolory to oczywiście również estetyka.

Dobrze dobrane kolory sprawią, że Twoja strona będzie nie tylko atrakcyjnie wyglądać i kierować wzrok odwiedzających w odpowiednie miejsce.

Kolory w połączeniu z innymi elementami wizualnymi, takimi jak zdjęcia pomogą również zbudować atmosferę, na jakiej Ci zależy.

Znaczenie kolorów w marketingu

Teoria kolorów to dziedzina nauki, która łączy wiedzę z przeróżnych kierunków od psychologii i psychofizjologii, po matematykę, fizykę czy informatykę.

Jest to bardzo szeroka dziedzina. To, co interesuje nas w tej chwili najbardziej pod kątem dobierania kolorów na stronę, to skojarzenia, jakie wywołują kolory, np. zielone światło czy czerwona kartka.

Zanim przyjrzymy się znaczeniu poszczególnych kolorów w marketingu, musisz wiedzieć, że w tym przypadku nie są to sztywne zasady, a raczej drogowskaz.

Biały — czystość, niewinność, neutralność, sterylność, spokój, pustka
Czarny — klasa, luksus, minimalizm, śmiałość, elegancja
Szary — bezpieczeństwo, skromność, praktyczność
Czerwony — odwaga, władza, siła, niebezpieczeństwo, miłość, szybkość
Niebieski — powaga, rzetelność, stabilność, wiedza, zaufanie
Zielony — natura, zdrowie, relaks, środowisko, wzrost, pieniądze
Żółty — zabawa, szczęście, optymizm, ostrzeżenie, radość, słońce, wypoczynek
Fioletowy — kreatywność, duchowość, szlachetność, wyrafinowanie, magia
Pomarańczowy — energia, równowaga, entuzjazm, witalność, zabawa, przygoda
Brązowy — natura, zdrowotność, niezawodność, użyteczność, pożyteczność

Pamiętaj, że symbolika w psychologii kolorów to rzecz umowna i jedynie luźna inspiracja. W dużej mierze znaczenie kolorów zależy od kontekstu, natomiast Twoim priorytetem jest używanie kolorów związanych z marką.

Przykładowo, choć kolor czarny łączy się z ekskluzywnością, to raczej trudno sobie wyobrazić czarną stronę ekskluzywnego przedszkola. Tak samo jak użycie koloru fioletowego nie sprawi, że opinie na stronie staną się bardziej wiarygodne.

Jakich kolorów potrzebujesz na stronę internetową?

Na stronę będziesz potrzebować zestawów współgrających ze sobą kolorów, czyli palety. Powinna składać się z kilku kolorów wraz z odcieniami (od jasnego do ciemnego).

Minimalna paleta kolorów składa się z 3 kolorów pełniących podstawowe funkcje:

Kolor tła — pokrywa większość powierzchni strony.
Kolor tekstu — kolor, którym będzie napisana większość treści.
Kolor akcentujący — kolor, który wyróżni dany element z „tłumu”.

Do tego minimum warto dodać jeszcze kolor firmowy. Najczęściej pochodzi z logo. Jest rodzajem elementu rozpoznawczego i dominuje powierzchnią nad pozostałymi barwami.

Każdy z kolorów potrzebuje również kilku odcieni, żeby np. stworzyć gradienty (miękkie przejścia między kolorami), trójwymiarowe przyciski czy pokazać hierarchię elementów.

Poza podstawowym zestawem możesz rozbudować swoją paletę o kolejne kolory pasujące do gamy. Nie ma górnego limitu.

Natomiast dla własnego dobra lepiej, gdy ograniczysz paletę jedynie do kilku kolorów. Paradoksalnie, mniejszy wybór ułatwi Ci dobre rozplanowanie kolorów i skupienie się na priorytetach.

Zbyt rozbudowana paleta może Ci sprawić trudności. Kolorystyczny chaos i bałagan są wrogami skutecznych stron.

Metoda: Jak dobrać kolory na stronę internetową — krok po kroku

Przejdźmy teraz do przygotowania Twojej palety.

Punktem wyjścia będzie czarno-biała strona, taka jak zwykły tekst w edytorze tekstowym typu Word. Jeśli nie masz ku temu ważnych powodów, to najbezpieczniej będzie zostać przy jasnym tle i ciemnych literach.

Stopniowo pokolorujemy Twoją stronę www i krok po kroku zbudujemy całą paletę wraz z odcieniami.

Użyjemy też kilku narzędzi, które nam to ułatwią, żeby nie polegać jedynie na subiektywnych odczuciach.

Jak zapisywać kolory na stronę internetową?

Tylko część kolorów, których używa się na stronach, można zapisać w postaci angielskich nazw. Mamy do dyspozycji ponad 16 milionów (!) kolorów i zabrakłoby słów.

Dla nas lepszym rozwiązaniem będzie zapis w postaci dwóch rodzajów kodów. Jeden działający praktycznie z każdym oprogramowaniem i drugim bardziej intuicyjnym.

Do zapisu kolorów najczęściej używa się systemu szesnastkowego. Zapis takich kolorów zaczyna się od „#” i ma po nim 3-6 znaków (cyfry 0-9 i litery a-f – razem 16 znaków), które odpowiadają za wartości składowe koloru.

Wygląda to tak: czarny #000000, biały #ffffff, neutralny szary #808080, czerwony #FF0000 itd. Jak widzisz, nie jest to zbyt intuicyjny system, ale nie musisz się w to zagłębiać. Będziesz tych wartości jedynie używać i nie musisz ich odkodowywać w głowie.

Będziemy się tez posługiwać innym typem zapisu kolorów o nazwie HSL. Jest bardziej zrozumiały dla człowieka, pozwala łatwo manipulować kolorami.

Zapis tych kolorów składa się z 3 wartości:

H to barwa — zmiana tej wartości zmienia czerwony w zielony, niebieski, fioletowy itp. Podaje się w stopniach 0-359deg, w zależności od położenia na kole kolorów.
S to nasycenie — mniejsze nasycenie to kolor bardziej płowy, dążący do szarego. Większa wartość to kolor bardziej intensywny i soczysty. Podaje się w procentach 0-100%.
L to jasność — im większa wartość, tym bliżej do białego, a im mniejsza, tym bliżej do czarnego. Podaje się w procentach 0-100%.

Przykładowy zapis koloru czerwonego wygląda tak: hsl(0deg 100% 50%). To, co nas interesuje to 2 ostatnie liczby. Jeśli chcesz kolor bardziej płowy zmieniasz to „100%” na np. 50%. Jeśli chcesz mieć jaśniejszy to zmieniasz ostatnią liczbę z 50% na np. 75%.

Jest to szczególnie przydatne, gdy potrzebujesz nieznacznie zmienić kolor. Przykładowo: dodać jaśniejszą od wypełnienia ramkę albo przyciemnić kolor przycisku po wskazaniu go kursorem.

Kolory na stronę zapisuj w postaci tekstowej, bo tak będziesz ich używać (wpisywać, kopiować albo wklejać). Zapis w postaci obrazu np. jpg, może mocno przekłamywać kolor i będzie utrudniać kopiowanie kolorów, więc pozostań przy pliku txt czy notatce w ulubionym programie.

Mam nadzieję, że z tą wiedzą, nie będą Cię już przerażały te dziwne zapisy z „#”, więc zabieramy się do pracy.

Kolor akcentujący

Wróćmy do naszej czarno-białej strony. Teraz pojawia się na niej dodatkowo przycisk w kolorze, który sprawia, że od razu go widać na tle ciemnego tekstu i białego tła.

Tego koloru będziesz używać do pokreślenia wszystkich akcji np. linków czy przycisków. Dobrze by kolor akcentujący był dość „soczysty” i w miarę możliwości jaskrawy. Powinien też wyróżniać się z tła, więc nie przesadź z jasnością.

Kolor akcentujący zajmuje na stronie przeciętnie ok. 10% powierzchni. Umiar jest ważny, ponieważ, gdy zaakcentujesz zbyt wiele, akcent traci moc i „powszednieje”. Podobnie jak, gdy pogrubisz większość akapitów na stronie, trudno będzie wyłowić okiem ważne fragmenty.

Wyznaczenie koloru akcentującego, zależy od tego co masz do dyspozycji, więc wybierz odpowiednią dla siebie opcję.

Jeśli nie masz logo lub logo jest czarne

Jeśli nie posiadasz kolorów firmowych, warto w końcu jakieś wybrać. Odwiedź strony z inspiracjami i znajdź pasujący Ci kolor akcentu, a może nawet kolory firmowe.

Przykładowe galerie z inspiracjami:

Jeśli masz logo w jednym kolorze

Jeśli Twoje logo jest w jednym kolorze i nie nadaje się on na akcent (jest mało intensywny, zbyt ciemny itp.), znajdź inny pasujący kolor.

Wypróbuj to narzędzie, które dzięki sztucznej inteligencji pomoże Ci dobrać kolory: http://colormind.io/

Możesz skorzystać też z innego rozwiązania, bazującego na teorii kolorów i ich zależności względem położenia na kole kolorów.

W uproszczeniu chodzi o to, że kolory można przedstawić w postaci tęczowego koła. Wpisując w koło linię, trójkąt, prostokąt itp., ich wierzchołki wskażą współgrające kolory.

Te zasady to dość obszerny temat, raczej dla zawodowców. Za Ciebie załatwi to kolejne z narzędzi. Po prostu pobaw się tym i poeksperymentuj: https://www.sessions.edu/color-calculator/

Jeśli masz logo w wielu kolorach

W tym przypadku Twoje zdanie jest bardzo proste. Wybierz najjaskrawszy, najbardziej wyróżniający się kolor w logo. Dużo zależy od projektu, ale często to ten kolor, którego jest w logo mniej.

Jeśli Twój kolor nie jest zbyt intensywny, poeksperymentuj z ustawieniem „S” w HSL, czyli nasyceniem. Możesz dodatkowo lekko zmienić jasność (L), dla lepszego efektu.

Jeśli nie znasz kodów swoich kolorów, wgraj logo do tego narzędzia: https://color.adobe.com/pl/create/image

Kolor firmowy

Te kolory powinny wizualnie być słabsze od koloru akcentującego, bo będą występować na większej powierzchni strony i nie powinny skupiać na sobie całej uwagi.

Kolor firmowy powinien zajmować na stronie ok. 30% powierzchni. Jest to kolor, który spaja cały wygląd i powinien być obecny nie tylko na stronie, ale właściwie we wszystkich materiałach marketingowych firmy.

Jeśli w praktyce nie masz swojego koloru firmowego, wypróbują jedną z dwóch dróg:

Kolor firmowy z logo

Wybierz kolor dominujący w logo, jeśli to nie jest po prostu kolor czarny. W przeciwieństwie do koloru akcentu kolor firmowy nie musi być intensywny czy w miarę jasny.

Natomiast dobrze by było, gdyby dawał dobry kontrast z jasnym lub ciemnym tekstem. Wtedy będzie mógł służyć także jako tło np. wyróżnionych sekcji. Nie jest to jednak konieczny warunek. Liczy się sama obecność koloru firmowego na stronie.

Kolor firmowy na bazie koloru akcentu

Jeśli nie możesz bazować na logo, stwórz kolor współgrający z akcentem. Weź jednak pod uwagę, że nie jest to najlepszy kierunek. Choć sprawdzi się na stronie i jest lepszy niż nic, to jednak warto mieć kolor firmowy i się go trzymać.

Może to dobry moment, by wybrać taki kolor i używać go wszędzie, gdzie to możliwe (odzież, szyldy, wizytówki, strona internetowa, profile społecznościowe itd.).

Żeby wyznaczyć kolor firmowy na bazie akcentu, wykorzystaj jedno z narzędzi, o których już wspominałem w punkcie “Jeśli masz logo w jednym kolorze” lub https://paletton.com/ czy https://color.adobe.com/pl/create/color-wheel

Kolory dodatkowe

Kolory dodatkowe to z kolei bardzo indywidualna sprawa. Gdy masz na stronie kolor akcentu, kolor firmowy i kilka zdjęć, robi się całkiem kolorowo, dlatego nie przesadzaj z rozbudową palety.

Zbyt wiele kolorów będzie utrudniać kierowanie uwagą i hierarchią elementów na stronie, co negatywnie wpłynie na jej skuteczność.

Oprócz rozproszenia użytkowników musisz zwrócić uwagę na to, że każdy kolejny kolor dopasowuje się do całej palety, a nie jedynie do koloru firmowego.

Jest to dodatkowe utrudnienie i może powodować problemy z kontrastem czy „gryzieniem się” kolorów w miejscach styku (np. czerwony i zielony).

Do wyznaczenia dodatkowych kolorów z tej samej gamy możesz użyć np. koloru firmowego jako wyjściowej wartości HSL i zmienić pierwszą liczbę. Przykładowo zmiana z hsl(0deg 100% 50%) na hsl(240deg 100% 50%), zmieni kolor czerwony w niebieski.

Możesz także wykorzystać jedno ze wspomnianych wcześniej narzędzi do dobierania kolorów, ale pamiętaj, żeby nie przesadzać z ilością.

Kolor tekstu i tła

Dotąd mówiliśmy o tym, że strona jest czarno-biała jak domyślny wygląd dokumentu w edytorze tekstowym. To zawsze działa i nie będzie błędem, ale możesz to trochę ulepszyć.

W malarstwie, grafice komputerowej czy druku unika się czystych kolorów, białego (#ffffff) i czarnego (#000000). Zamiast tego stosuje się lekkie domieszki.

Ożywia to wygląd i nadaje spójność z pozostałymi kolorami palety. Jest też łatwym sposobem na dopełnienie charakteru strony.

Warto to zrobić również dlatego, że kolory tła i tekstu zajmują przeciętnie 60% powierzchni strony. Mają zatem duży wpływ na ogólny odbiór całości.

Przygotowanie takich, lekko zabarwionych kolorów tła i tekstu, jest dość proste. Weź jeden z kolorów z palety, najlepiej firmowy (ale nie akcentujący) i zmień wartość jasności (L) na prawie maksimum dla tła i prawie minimum dla tekstu.

Jeśli efekt jest niezadowalający, zmień wartość nasycenia (S). Tutaj kierunek zmian będzie odwrotny. Dla tła możesz nieznacznie zmniejszyć nasycenie, a dla tekstu zwiększyć. Poprawi to kontrast i uwypukli tekst.

Kolory neutralne

Nie wszystko na stronie jest równie ważne. Chcemy eksponować główną treść, ale np. stopka strony ma cel raczej organizacyjny. Są tam zwykle mapa strony, powtórzenie danych kontaktowych czy RODO. Nic istotnego dla skuteczności strony.

Będziesz też potrzebować lżejszego koloru dla mniej istotnych tekstów np. zgody na przetwarzanie danych przy formularzu zapisu na newsletter lub nieaktywnych przycisków.

Tu przyjdą Ci z pomocą kolory neutralne, czyli szarości. Kolor bazowy uzyskasz, zmniejszając nasycenie (S) koloru firmowego.

Pamiętaj, że celem w tym przypadku, podobnie jak dla tła i tekstu, jest ożywienie szarości przez lekką domieszkę innego koloru.

Stwórz odcienie

Przygotowywanie całego zestawu odcieni jest trochę bardziej skomplikowane, niż zmiana ustawień jasności (L) w HSL.

Tworząc zestaw odcieni danego koloru, można osiągnąć różne efekty (od zmiany samej jasności, po ocieplanie, oziębianie itd.).

Żeby ułatwić Ci zadanie, pozwól, żeby zajęło się tym narzędzie dedykowane kolorom na strony: https://tailwind.simeongriggs.dev/

Wprowadź tam swoje kolory, a resztą zajmie się oprogramowanie. Jeśli nie odpowiada Ci efekt, możesz zmodyfikować ustawiania generatora.

Zapisz link do swojej palety, żeby oprócz suchych wartości mieć szybki podgląd kolorów z palety wraz z odcieniami i kodami kolorów.

Generator przygotuje także listę kolorów w postaci tekstowej. Zapisz ją w swoim pliku. W ten sposób będziesz mieć dostęp do palety, nawet gdyby np. ta strona przestała działać za jakiś czas.

Przetestuj kolory

Na koniec pozostaje przetestować kombinacje kolorów. Trzeba zapewnić czytelność strony wszystkim użytkownikom i zadbać o estetykę.

Możesz użyć tego narzędzia https://coolors.co/contrast-checker, które pozwoli łatwo sprawdzić połączenia kolorów tła i tekstu.

Gdy natrafisz na problem z kontrastem, pomoże Ci go automatycznie rozwiązać. Możesz też modyfikować kolory ręcznie, za pomocą HSL. Choć najlepszą opcją będzie podmiana któregoś z kolorów na inny z palety.

Mając gotową stronę, przetestuj dodatkowo całość np. tu https://web.dev/measure/. To kompleksowe narzędzie, które bada stronę pod wieloma kątami. Pokaże Ci także znaleźć problemy z kolorami, jeśli takie zdarzą się na Twojej stronie.

Podsumowanie

Wiesz już jak dobrać kolory i stworzyć paletę na stronę internetową. Dzięki tej wiedzy masz odpowiednią perspektywę, bo strona internetowa to nie kolorowanka, a kolory mają inne moce, niż się wydaje.

Nie ma kolorów łatwych do zapamiętania, a ich skuteczność zależy od kontekstu nie wartości #. Dlatego budując paletę, skup się na kolorach przede wszystkim pod kątem funkcjonalności i brandingu.

Zacznij od koloru najistotniejszego dla skuteczności strony. Akcentu, który przyciągnie uwagę do akcji, jakie chcesz, by wykonali odwiedzający stronę.

Rozwijaj swoją paletę o kolejne kolory metodami, które omówiliśmy. Masz też pod ręką narzędzia, które ułatwią i przyspieszą Ci pracę. Złożone algorytmy i sztuczna inteligencja zadbają też o teorię kolorów i pomogą uniknąć błędów.

Pamiętaj, że w przypadku kolorów na stronę internetową, umiar ma znaczenie. Tu nie chodzi o to, by zachwycać feerią barw. Masz kierować uwagą użytkowników i budować spójną markę.

Teraz nie pozostaje Ci nic innego jak zabrać się do pracy i dobrać kolory na stronę firmową. Powodzenia!