Wyciągnij paletę kolorów z dowolnego obrazu, z testerem kontrastu

Jak dobierane są kolory

Narzędzie tworzy małą kopię Twojego obrazu, maksymalnie 160 pikseli na dłuższym boku, i zlicza każdy piksel, który nie jest przezroczysty. Następnie grupuje podobne piksele za pomocą klastrowania k-means i podaje średni kolor każdej grupy, zaczynając od największej. Procent na każdej próbce to udział tej grupy w obrazie.

Punkt startowy jest stały, a nie losowy: zaczyna od najczęstszego koloru, a potem dodaje kolejno kolor najbardziej oddalony od tych, które już ma. Dzięki temu ten sam obraz za każdym razem daje tę samą paletę, a mały, jaskrawy akcent, jak czerwone logo na białym pudełku, dostaje własną próbkę zamiast rozpłynąć się w tle.

Poproś o 5 do 8 kolorów. Zdjęcie produktu na jednolitym tle zwykle potrzebuje 5 lub 6. Zatłoczone zdjęcie lifestyle’owe czyta się lepiej przy 8. Jeśli obraz ma mniej odrębnych kolorów niż poprosisz, narzędzie to zgłosi i pokaże te, które znalazło.

Czytanie macierzy kontrastu

Każdy kolor jest zestawiany z każdym innym, a także z czystą bielą i czernią, a każda komórka pokazuje współczynnik kontrastu dla tekstu w kolorze z wiersza na tle w kolorze z kolumny. Współczynnik jest zgodny z definicją WCAG: (L1 + 0.05) / (L2 + 0.05), gdzie L1 i L2 to względna luminancja jaśniejszego i ciemniejszego koloru. Zakres sięga od 1:1 (ten sam kolor dwa razy) do 21:1 (czarny na białym).

Etykiety to progi ustalone przez WCAG:

• AA: co najmniej 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu (kryterium sukcesu 1.4.3).
• AAA: co najmniej 7:1 dla zwykłego tekstu i 4.5:1 dla dużego tekstu (kryterium sukcesu 1.4.6).
• Duży tekst oznacza co najmniej 18 punktów lub 14 punktów pogrubione (definicja dużej skali według WCAG).

Komórka oznaczona jako AA duży nadaje się do dużego nagłówka, ale jest zbyt słaba do podpisu. Wyjaśnienie 1.4.3 od W3C mówi też, że współczynnika nie należy zaokrąglać, więc 4.499:1 nie spełnia 4.5:1. Narzędzie ocenia dokładną wartość i pokazuje ją obciętą do dwóch miejsc po przecinku, nigdy zaokrągloną w górę.

Rozwiązany przykład

Załóżmy, że zdjęcie daje Ci granat #1a3c6e i kremowy #fdf6e3. Względna luminancja granatu wynosi około 0.046, a kremowego około 0.923. Współczynnik to (0.923 + 0.05) / (0.046 + 0.05), czyli około 10.1:1 przy tych zaokrąglonych wartościach i 10.16:1 przy dokładnych. To spełnia AAA dla każdego tekstu, więc granatowy tekst na kremowej karcie końcowej jest bezpieczny w dowolnym rozmiarze. Umieść średni pomarańcz w rodzaju #e07a2e na tym samym kremowym, a współczynnik spada do 2.78:1, co nie wystarcza nawet dla dużego tekstu. Zachowaj pomarańcz na przycisk z czarnym tekstem (6.99:1, czyli AA, ale tuż poniżej AAA) albo na kształt bez słów.

Korzystanie z eksportu

Eksport CSS to blok :root z właściwościami niestandardowymi: --color-1 dla koloru pokrywającego największą część obrazu i dalej w dół. JSON zawiera dla każdego koloru hex, RGB, HSL oraz jego udział w obrazie, co łatwo wkleić do pliku z tokenami projektowymi lub przekazać skryptowi. Zmień nazwy zmiennych, gdy już wiesz, który kolor jest tłem, który tekstem, a który akcentem.

Czego to narzędzie nie robi

Narzędzie nie wie, które kolory należą do Twojej marki. Zdjęcie produktu na drewnianym stole uwzględni ten stół. Najpierw przytnij obraz do produktu lub opakowania, jeśli chcesz tylko ich kolorów. Nie poda też dokładnych kolorów do druku: liczby to piksele w pliku, po pracy aparatu i ewentualnej edycji, więc sprawdź je z księgą marki, zanim je opublikujesz. Ocenia też wyłącznie kontrast tekstu. WCAG ma osobne reguły dla ikon i elementów interfejsu, których ta macierz nie ocenia.

Jeśli wolisz nie robić tego ręcznie

Hermoso to marketing na autopilocie: bada reklamy, które już działają na Twoim rynku, tworzy spójne z marką reklamy graficzne i wideo, planuje posty i prowadzi płatne kampanie na Twoich własnych kontach reklamowych. Gdy dodasz markę z własnej strony, Hermoso poznaje Twoje produkty, logo i paletę, a kolory podpisów i kart końcowych możesz ustawić kodami hex. Działa w aplikacji webowej albo wewnątrz Claude, ChatGPT i Cursor przez swój serwer MCP.

Darmowe narzędzia: Przewodnik po rozmiarach w mediach społecznościowych · Generator siatki na Instagram · Generator Open Graph

Najczęściej zadawane pytania

Jak uzyskać paletę kolorów ze zdjęcia?

Wrzuć zdjęcie do narzędzia i wybierz, ile kolorów chcesz, od 5 do 8. Grupuje podobne piksele i pokazuje średni kolor każdej grupy w HEX, RGB i HSL, od największej, z przyciskiem kopiowania przy każdym.

Jakiego współczynnika kontrastu potrzebuję dla tekstu?

Poziom AA w WCAG 2.2 wymaga co najmniej 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu. Poziom AAA wymaga 7:1 i 4.5:1. Duży tekst to co najmniej 18 punktów lub 14 punktów pogrubione.

Czy 4.49:1 jest wystarczająco blisko, by przejść AA?

Nie. W3C mówi, że obliczonego współczynnika nie należy zaokrąglać przy porównywaniu z progiem, więc 4.499:1 nie spełnia 4.5:1. Narzędzie ocenia dokładną wartość.

Dlaczego za każdym razem dostaję tę samą paletę?

Grupowanie startuje ze stałego punktu, najczęstszego koloru, a potem dodaje kolor najdalszy od już wybranych. Nie ma losowego startu, więc jeden obraz zawsze daje jedną odpowiedź.

Czy mój obraz jest przesyłany?

Nie. Jest odczytywany przez wbudowany czytnik plików twojej przeglądarki i liczony na płótnie na twoim urządzeniu. Nic nie jest nigdzie wysyłane ani przechowywane.