Zbuduj paletę kolorów marki ze zdjęć swoich produktów
Wydobądź prawdziwe kolory ze zdjęć produktu i opakowania, przypisz każdemu rolę i sprawdź każdą parę tekst-tło pod kątem kontrastu WCAG, zanim trafi do reklamy, podpisu albo karty końcowej.
Wiele małych marek ma plik z logo, ale nie ma listy kolorów. Kolory są w samym produkcie: w butelce, etykiecie, pudełku, tkaninie. Gdy przychodzi czas na reklamę, miniaturę czy styl podpisu, ktoś na oko dobiera kod hex ze zdjęcia i ma nadzieję, że się zgadza.
Możesz to zrobić lepiej w około dziesięć minut. Wyciągnij kolory ze zdjęć prawdziwego produktu, przypisz każdemu rolę i sprawdź, które pary są czytelne jako tekst. Nasz bezpłatny ekstraktor palety kolorów wykonuje wyciąganie i sprawdzanie w Twojej przeglądarce, bez przesyłania czegokolwiek.
Dlaczego zacząć od produktu, a nie od tablicy inspiracji
Ludzie rozpoznają Twój produkt po tym, jak wygląda na półce albo w dłoni. Reklama, której kolory pasują do opakowania, na pierwszy rzut oka wygląda jak ta sama marka, a taka, która odjeżdża od opakowania, wygląda jak podróbka. Paleta wzięta z produktu jest też uczciwa wobec tego, co faktycznie sprzedajesz, czego tablica inspiracji rzadko jest w stanie zapewnić.
Działa to także w przypadku usług. Jeśli nie masz fizycznego produktu, użyj swoich najlepszych zrzutów ekranu, witryny sklepu albo zdjęć zespołu, czyli tego, co ludzie już z Tobą kojarzą.
Krok 1: wybierz zdjęcia i przytnij je
Wybierz dwa lub trzy czyste zdjęcia: produkt na jednolitym tle, opakowanie przodem i jedno zdjęcie lifestyle'owe, które lubisz. Potem przytnij mocno. Ekstraktor liczy każdy piksel, który mu dasz, więc butelka na drewnianym stole zwróci stół jako jeden z kolorów marki. Przytnij do produktu i etykiety, a paleta będzie paletą produktu.
Fotografuj w świetle dziennym albo możliwie neutralnym. Ciepła lampa zmienia biały kolor opakowania w kremowy, a każdy wyciągnięty kolor będzie niósł ten odcień.
Krok 2: wyciągnij od pięciu do ośmiu kolorów
Wrzuć każde zdjęcie do ekstraktora i poproś o 5 lub 6 kolorów dla czystego zdjęcia produktu albo 8 dla zatłoczonego. Narzędzie grupuje podobne piksele i wypisuje średnią każdej grupy, od największej, wraz z udziałem, jaki każdy kolor zajmuje na obrazie. Punkt startowy jest stały, więc to samo zdjęcie zawsze da tę samą paletę, a mały jasny akcent, jak czerwona nakrętka na białej butelce, dostaje własną próbkę zamiast zostać uśredniony.
Przepuść wszystkie zdjęcia i szukaj kolorów, które się powtarzają. To one tworzą markę. Kolor, który pojawia się tylko na jednym ujęciu, zwykle jest tłem albo światłem.
Krok 3: przypisz każdemu kolorowi rolę
Paleta jest przydatna dopiero wtedy, gdy każdy kolor ma rolę. Większość marek potrzebuje czterech:
- Tło: kolor, na którym opiera się większość układu. Często podstawowy kolor opakowania albo jasny neutralny.
- Tekst: ciemny kolor czytelny na tle. Sprawdzi się prawie czarny. Głęboki kolor marki sprawdzi się lepiej, o ile przejdzie test kontrastu.
- Akcent: wyrazisty, na przycisk, naklejkę z ceną albo pojedyncze wyróżnione słowo.
- Pomocniczy: jeden albo dwa neutralne do ramek, separatorów i tekstu pomocniczego.
Nie używaj wszystkiego, co dało zdjęcie. Pięć nazwanych kolorów z jasnymi rolami utrzyma sto reklam w spójności. Dwanaście tego nie zrobi.
Krok 4: sprawdź kontrast, zanim trafi gdziekolwiek
Pary kolorów, które dobrze wyglądają na dużym monitorze, mogą być trudne do odczytania na telefonie w słońcu, a dla osób słabowidzących znacznie trudniejsze. Wytyczne WCAG (Web Content Accessibility Guidelines) W3C podają na to liczbę, współczynnik kontrastu, który sięga od 1:1 (ten sam kolor dwa razy) do 21:1 (czarny na białym). Progi wynoszą:
| Zwykły tekst | Duży tekst | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
Duży tekst to co najmniej 18 punktów albo 14 punktów pogrubionych, zgodnie z definicją WCAG. Progi są twarde: wytyczne W3C dotyczące 1.4.3 mówią, że obliczonego współczynnika nie należy zaokrąglać, więc 4.499:1 nie spełnia progu 4.5:1.
WCAG powstało dla treści internetowych, a nie dla reklam, ale to rozumowanie dotyczy każdego tekstu na ekranie, w tym napisów wypalonych w wideo i słów na karcie końcowej.
Przykład
Załóżmy, że opakowanie daje Ci granat #1a3c6e, kremowy #fdf6e3 i pomarańcz #e07a2e.
Wzór to (L1 + 0.05) / (L2 + 0.05), gdzie L1 to względna luminancja jaśniejszego koloru, a L2 ciemniejszego. Względna luminancja wynosi od 0 dla czerni do 1 dla bieli. Granat wychodzi około 0.046, kremowy około 0.923, a pomarańcz około 0.300.
- Granatowy tekst na kremowym: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096, około 10.1 przy tych zaokrąglonych wartościach, a dokładnie 10.16:1. To przechodzi AAA przy każdym rozmiarze. To Twoja główna para.
- Pomarańczowy tekst na kremowym: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350, około 2.78:1. To nie przechodzi nawet dla dużego tekstu. Pomarańcz nie powinna nieść słów na kremowym.
- Czarny tekst na pomarańczowym: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05, czyli 7.0 przy tych zaokrąglonych wartościach, ale dokładnie 6.99:1. To przechodzi AA dla całego tekstu, ale minimalnie nie dochodzi do AAA. Dobre na etykietę przycisku.
- Kremowy tekst na granatowym: ta sama para co pierwsza, więc to samo 10.16:1. Odwrócenie pary nigdy nie zmienia współczynnika.
Role więc prawie wybierają się same: kremowe tło, granatowy tekst, pomarańcz jako kształt akcentu z czarnymi słowami na nim (granat na pomarańczowym to tylko 3.65:1, czyli AA samo dla dużego tekstu). Ekstraktor pokazuje całą siatkę naraz: każdy kolor względem każdego innego, a także biały i czarny, a każda komórka oceniona jako AAA, AA, AA dla dużego tekstu albo Fail.
Krok 5: zapisz to raz
Wyeksportuj paletę jako własne właściwości CSS albo JSON i przechowuj ją obok plików logo. Gdy już zdecydujesz, zmień nazwy zmiennych według roli: --brand-bg, --brand-text, --brand-accent czytają się lepiej niż --color-3 miesiąc później. Pod każdą dopisz jedną linijkę z informacją, które pary przeszły, żeby nikt nie musiał powtarzać sprawdzenia.
Potem porównaj liczby z oficjalnymi danymi, jeśli już je masz. Zdjęcie daje kolor, który widział aparat, zbliżony do nadruku na opakowaniu, ale nie identyczny ze specyfikacją farby. Jeśli drukarnia albo grafik ma dokładne wartości, to one wygrywają.
Używanie palety w reklamach i postach
- Podpisy i napisy: kolor tekstu na prostokącie w kolorze tła albo odwrotnie. Najpierw sprawdź parę.
- Karty końcowe: kolor tła z logo i jedną linijką w kolorze tekstu. Akcent może wypełnić kształt przycisku za krótkim wezwaniem do działania.
- Miniatury i okładki: jeden akcent, jedno duże czytelne słowo, dużo tła.
- Kody QR na opakowaniach: kolor marki się sprawdzi, jeśli wyraźnie jest ciemniejszy od opakowania. Nasz generator kodów QR ostrzega, gdy kontrast jest niski.
Gdzie pasuje Hermoso
Hermoso to agent marketingowy oparty na AI. Analizuje reklamy, które już działają na Twoim rynku, tworzy reklamy graficzne i wideo zgodne z marką, publikuje i planuje posty na Twoich kontach w mediach społecznościowych oraz prowadzi płatne kampanie na Twoich kontach reklamowych. Gdy dodajesz markę ze swojej strony, poznaje Twoje produkty, logo i paletę. Podpisy i karty końcowe są wyłączone, dopóki o nie nie poprosisz, a gdy to zrobisz, możesz ustawić kolory tekstu, prostokąta i karty końcowej kodami hex, więc pary, które tu sprawdziłeś, są tymi, które trafiają do publikacji. Działa w aplikacji webowej albo wewnątrz Claude, ChatGPT i Cursor przez swój serwer MCP.
Często zadawane pytania
Jak znaleźć kody hex kolorów mojego produktu?
Przytnij czyste zdjęcie do produktu lub opakowania i wrzuć je do ekstraktora palety kolorów. Pokazuje główne kolory w formatach HEX, RGB i HSL. Przepuść dwa lub trzy zdjęcia i zachowaj kolory, które się powtarzają.
Jaki współczynnik kontrastu potrzebuje tekst?
Zgodnie z WCAG 2.2 poziom AA wymaga 4.5:1 dla zwykłego tekstu i 3:1 dla dużego, a AAA wymaga 7:1 i 4.5:1. Duży tekst to co najmniej 18 punktów albo 14 punktów pogrubionych.
Czy 4.49:1 wystarcza dla AA?
Nie. W3C mówi, że współczynnika nie należy zaokrąglać przy porównaniu z progiem, więc 4.499:1 nie spełnia progu 4.5:1.
Ile kolorów powinna mieć paleta marki?
Tyle, by każdy miał rolę: zwykle tło, kolor tekstu, jeden akcent i jeden albo dwa neutralne. Pięć nazwanych kolorów z jasnymi rolami utrzyma reklamy w spójności lepiej niż długa lista.
Czy kolory ze zdjęcia są dokładne?
Nie. To, co aparat zarejestrował przy danym świetle. Jest zbliżone do produktu, ale nie takie samo jak specyfikacja druku czy farby. Jeśli masz oficjalne wartości, użyj ich.