Jak dobrać
kolory firmowe?

Kolor firmowy to narzędzie, nie ozdoba

Kolory firmowe pracują wszędzie tam, gdzie klient spotyka Twoją firmę: na stronie, w mediach społecznościowych, na fakturze, szyldzie i samochodzie. Dzięki nim łatwiej Cię rozpoznać, zanim ktoś przeczyta nazwę. To jednak tylko połowa ich zadania.

Druga połowa jest bardzo praktyczna. Na stronie kolor prowadzi wzrok do przycisku, oddziela sekcje, pokazuje, co da się kliknąć, i ostrzega o błędzie w formularzu. Paleta, która dobrze wygląda na próbce, ale nie radzi sobie z tymi zadaniami, będzie przeszkadzać na co dzień.

Co z „psychologią kolorów”?

W internecie łatwo trafić na tabelki: niebieski oznacza zaufanie, czerwony pilność, zielony ekologię — czasem nawet z procentami. Nie opieram na nich decyzji. Skojarzenia z kolorami zależą od kultury, branży, kontekstu i doświadczeń odbiorcy. Ten sam zielony inaczej działa w gabinecie, a inaczej na stacji paliw.

Dużo bardziej przydatne są dwa pytania: jak wyglądają firmy, spośród których klient wybiera, i czy Twoja paleta pomaga mu szybko zrozumieć stronę.

Z czego składa się paleta kolorów marki

Dobra paleta to mały system, w którym każdy kolor ma swoją rolę. Zwykle wystarczą cztery grupy:

• Kolor główny — ten, po którym rozpoznaje się markę. Pojawia się w logo, nagłówkach, ważnych elementach.
• Kolor akcentu — używany oszczędnie, do wyróżnień: głównego przycisku, ważnej informacji, ceny w promocji.
• Kolory neutralne — kilka odcieni bieli, szarości lub złamanej czerni na tła, tekst, linie i ramki. To one zajmują najwięcej miejsca na ekranie.
• Kolory komunikatów — błąd, ostrzeżenie, potwierdzenie, informacja. Nie muszą pochodzić z palety marki, ale powinny do niej pasować.

Do każdego koloru głównego przydaje się kilka jaśniejszych i ciemniejszych odcieni. Jasny sprawdzi się jako tło sekcji, ciemniejszy jako kolor tekstu lub przycisku po najechaniu kursorem. Dzięki temu nie trzeba dobierać nowych barw przy każdym projekcie.

Ile kolorów to za dużo? Każdy kolejny kolor trzeba gdzieś konsekwentnie stosować — a im więcej ich jest, tym trudniej o spójność. Pomaga prosta zasada: jeśli wszystko jest w kolorze akcentu, nic nie jest wyróżnione. Na większości stron dominuje spokojne tło, kolor marki pojawia się regularnie, a akcent rzadko — i właśnie dlatego działa.

Jak dobrać kolory firmowe krok po kroku

1. Zacznij od firmy, nie od próbnika. Zapisz trzy słowa, które opisują charakter firmy, na przykład: spokojna, techniczna, rodzinna. Kolory mają ten charakter wspierać, a nie odzwierciedlać Twój ulubiony kolor.
2. Zrób przegląd konkurencji. Zrób zrzuty ekranu kilku firm, które klient widzi obok Twojej w wyszukiwarce. Jeśli wszystkie są granatowe, granat nie pomoże Ci się wyróżnić. Z drugiej strony nie musisz być inny za wszelką cenę — czasem spokój i porządek są dokładnie tym, czego klient oczekuje.
3. Uwzględnij to, co już masz. Szyld, oklejony samochód, odzież robocza, opakowania. Kolor, po którym klienci już Cię rozpoznają, warto zachować albo zmienić świadomie, z planem wymiany materiałów.
4. Wybierz kolor główny i zbuduj odcienie. Od razu sprawdź, czy ciemniejszy wariant nadaje się do tekstu, a jasny do tła.
5. Dobierz neutralne i akcent. Neutralne mogą być ciepłe albo chłodne — powinny pasować do koloru głównego. Akcent musi wyraźnie odróżniać się od reszty.
6. Sprawdź kontrast. Zanim zaakceptujesz paletę, policz kontrast par tekst–tło. O tym za chwilę.
7. Przetestuj w prawdziwych zastosowaniach. Strona na telefonie w słońcu, post w mediach społecznościowych, wizytówka, oferta w PDF, wydruk czarno-biały, logo w jednym kolorze na koszulce.

Kontrast kolorów według WCAG: liczby, które warto znać

WCAG to międzynarodowe wytyczne dostępności treści internetowych, przygotowane przez W3C. Kontrast mierzy się w nich współczynnikiem od 1:1 (ten sam kolor na tym samym kolorze) do 21:1 (czarny na białym). Liczy się go ze względnej jasności obu kolorów, więc wynik nie zależy od tego, jak kolor „wydaje się” wyraźny.

Najważniejsze progi na poziomie AA, który jest typowym celem dla stron firmowych:

• zwykły tekst — co najmniej 4,5:1 (kryterium 1.4.3),
• duży tekst — co najmniej 3:1; za duży uznaje się tekst od 18 pt, czyli około 24 px, albo od 14 pt pogrubiony, czyli około 18,5 px,
• elementy interfejsu i grafiki potrzebne do zrozumienia treści — co najmniej 3:1 wobec sąsiednich kolorów: obramowanie pola formularza, ikona bez podpisu, wskaźnik fokusu, linia na wykresie (kryterium 1.4.11).

Na wyższym poziomie AAA zwykły tekst potrzebuje 7:1, a duży 4,5:1. Szczegóły i wyjątki opisuje W3C w objaśnieniu kryterium kontrastu.

Wyjątki i pułapki

Tekst będący częścią logo lub nazwy marki nie ma wymogu kontrastu. Nie dotyczy on też elementów nieaktywnych i czystej dekoracji. Uwaga: wyjątek obejmuje logo, a nie całą paletę. Gdy kolor marki staje się kolorem tekstu, linku czy przycisku, obowiązują zwykłe progi.

Drugą pułapką jest zaokrąglanie. Progi są twarde: według W3C wynik 4,499:1 nie spełnia wymogu 4,5:1. Szary #767676 na białym tle ma 4,54:1 i przechodzi. Szary #777777 — różnicy nie zobaczysz gołym okiem — ma 4,48:1 i już nie przechodzi.

Przykłady policzone wzorem WCAG

Wniosek z tabeli: wiele jasnych, nasyconych kolorów — pomarańczy, żółci, błękitów — nie nadaje się ani na tło pod biały tekst, ani na kolor tekstu na białym tle. Nie trzeba od razu zmieniać koloru marki. Zwykle wystarczy ciemniejszy odcień do tekstu i przycisków albo ciemny tekst na kolorowym tle. Zwróć też uwagę na czwarty wiersz: ten sam szary, który przechodzi na białym, nie przechodzi na jasnoszarym tle sekcji.

Kontrast sprawdzisz w darmowym kalkulatorze kontrastu albo w narzędziach deweloperskich przeglądarki. Wystarczą kody HEX obu kolorów.

Nie przekazuj informacji samym kolorem

Osobne kryterium WCAG (1.4.1, poziom A) mówi, że kolor nie może być jedynym sposobem przekazania informacji. W praktyce: błędne pole formularza oznacz komunikatem tekstowym, nie tylko czerwoną ramką; linki w tekście podkreślaj; na wykresie dodaj etykiety, a nie tylko kolorową legendę. Część osób słabiej rozróżnia niektóre kolory, na przykład czerwony i zielony — a na ekranie w pełnym słońcu problem ma prawie każdy.

Jeśli Twoja firma podlega przepisom o dostępności, te progi przestają być dobrą praktyką, a stają się wymaganiem, bo przepisy odwołują się do standardów opartych na WCAG. Kogo to dotyczy, opisuję w artykule o dostępności cyfrowej strony.

HEX, RGB, CMYK i wzorniki: jak zapisać kolory firmowe

Jeden kolor potrzebuje kilku zapisów, bo inaczej powstaje na ekranie, a inaczej na papierze czy blasze:

• HEX i RGB — dla ekranów: strony, aplikacji, mediów społecznościowych, prezentacji.
• CMYK — dla druku z czterech farb: ulotek, wizytówek, katalogów.
• Wzornik kolorów do druku, na przykład Pantone — gdy kolor musi wyjść identycznie w każdej drukarni albo na nietypowym podłożu.
• Wzorniki farb i folii, na przykład RAL — przy oznakowaniu lokalu, szyldach, oklejaniu samochodów.

Ekran świeci, a papier odbija światło, dlatego nie każdy kolor z monitora da się wydrukować. Najtrudniej z bardzo nasyconymi, „neonowymi” barwami. Automatyczne przeliczenie RGB na CMYK często daje kolor wyraźnie bardziej szary. Projektant powinien dobrać odpowiedniki ręcznie, a przy ważnym druku warto poprosić drukarnię o wydruk próbny.

Wszystkie zapisy zbierz w jednym miejscu: nazwa koloru, jego rola, HEX, RGB, CMYK i ewentualnie numer we wzorniku. Dopisz też pary, które wolno łączyć (tekst na tle) razem z kontrastem. Taki arkusz to rdzeń każdej księgi znaku — nawet jeśli cała księga ma tylko kilka stron.

Kolory na stronie internetowej: o czym pamiętać przy wdrożeniu

• Stany elementów. Przycisk wygląda inaczej zwykle, po najechaniu, po kliknięciu i gdy jest nieaktywny. Do tego wskaźnik fokusu dla osób poruszających się klawiaturą — on też potrzebuje kontrastu 3:1.
• Kolory jako zmienne. W dobrze zbudowanej stronie kolory są zapisane w jednym miejscu kodu. Zmiana odcienia nie wymaga wtedy poprawiania każdej podstrony.
• Tekst na zdjęciach. Kontrast zmienia się razem ze zdjęciem. Pomaga przyciemnienie zdjęcia, jednolity pasek pod tekstem albo przeniesienie tekstu obok zdjęcia.
• Tryb ciemny. Jeśli strona ma wersję ciemną, paleta potrzebuje osobnych odpowiedników. Proste odwrócenie kolorów rzadko daje dobry efekt.
• Komunikaty w formularzach. Błąd, potwierdzenie i ostrzeżenie muszą być czytelne także dla osoby, która nie rozróżnia kolorów — zawsze z tekstem.

Kolory to połowa wizualnego charakteru strony. Druga połowa to pismo — o doborze fontów, licencjach i polskich znakach piszę w artykule o typografii na stronie.

Najczęstsze błędy przy kolorach firmowych

• Jasnoszary tekst na białym tle, bo „wygląda elegancko” — i jest nieczytelny na telefonie w słońcu.
• Kolor marki na wszystkim: nagłówkach, tłach, ramkach i przyciskach. Wtedy nic się nie wyróżnia.
• Paleta z ośmiu równorzędnych kolorów, z których każdy pojawia się raz.
• Tylko wersja ekranowa, bez zapisu do druku — albo odwrotnie: kolory z wizytówki przeniesione na stronę bez sprawdzenia kontrastu.
• Ocena kolorów wyłącznie na jednym, dobrze skalibrowanym monitorze, bez sprawdzenia na zwykłym telefonie i na wydruku.
• Czerwony i zielony jako jedyna różnica między „źle” a „dobrze”.
• Skopiowana paleta lidera branży — klient widzi wtedy kolejną podobną firmę.

Jak pracuję nad kolorami firmowymi

Zaczynam od rozmowy o firmie, klientach i tym, co już masz: szyldzie, materiałach, kolorach, które klienci kojarzą. Potem pokazuję propozycję kierunku, zanim cokolwiek zamówisz. Oprócz samych kolorów dostajesz ich role, zapisy dla ekranu i do druku oraz listę bezpiecznych par tekst–tło z policzonym kontrastem.

Kolory i typografię możesz zamówić jako pojedynczy element marki — taki zakres zaczyna się u mnie od 1 490 zł netto. Gdy potrzebujesz całej marki, z nazwą, hasłem, pozycjonowaniem, logo i materiałami, pełny zakres zaczyna się od 4 900 zł netto. Etapy i płatności przy projekcie marki ustalam indywidualnie i zapisuję przed startem.

Jeśli robimy też stronę, paletę od razu sprawdzam na prawdziwych widokach: z przyciskami, formularzem i tekstem na telefonie. To najszybszy sposób, żeby zobaczyć, czy kolory, które pięknie wyglądają na próbce, poradzą sobie w codziennej pracy.