Widzisz kolor, którego chcesz użyć ponownie — na zdjęciu, na zrzucie ekranu strony, która Ci się podoba, na starym logo, którego pliki źródłowe dawno przepadły — i potrzebujesz prawdziwego kodu HEX, a nie zgadywania. Ocenianie na oko nigdy do końca nie wychodzi; monitory kłamią, a „ten niebieski" to naprawdę sześć nieco różnych niebieskich. Wyciągnięcie palety wprost z pikseli daje Ci kody, które wkleisz do CSS, narzędzia projektowego albo dokumentu marki.
Oto jak to zrobić i jak uzyskać paletę faktycznie użyteczną, a nie losowy chwyt pikseli.
Co właściwie robi „wyodrębnianie palety"
Narzędzie skanuje obraz i znajduje kolory, które najlepiej go reprezentują — dominujące tony plus wyraźne akcenty — a potem daje Ci każdy jako kod HEX do skopiowania. Zamiast miliona pojedynczych kolorów pikseli dostajesz schludny zestaw (powiedzmy 5 albo 8), który streszcza obraz.
To naprawdę przydatne do kilku typowych zadań:
- Odzyskiwanie kolorów marki z logo albo starego materiału, gdy nie masz oryginalnej specyfikacji.
- Budowanie palety projektowej ze zdjęcia, którego nastrój chcesz dopasować — krajobrazu, ujęcia produktu, dzieła sztuki.
- Dopasowanie istniejącej strony albo grafiki, z której masz tylko zrzut ekranu.
- Wybór tła albo akcentu, który harmonizuje z obrazem, którego już używasz.
Wrzuć obraz i odczytaj kody:
Użyj kontroli liczby, by uzyskać użyteczną paletę
Najważniejszym pojedynczym ustawieniem jest to, ile kolorów wyciągasz. Zmienia to odpowiedź całkowicie.
- Mniej kolorów (3–5) daje Ci esencjonalną paletę — garść tonów definiujących obraz. To zwykle to, czego chcesz do brandingu albo systemu projektowego, gdzie zwarty zestaw jest zaletą, a nie ograniczeniem.
- Więcej kolorów (8–12) wychwytuje subtelne akcenty i gradienty. Przydatne, gdy obraz jest bogaty i zróżnicowany, a chcesz też drugorzędnych tonów, albo gdy badasz dokładnie, jak zdjęcie jest skomponowane.
Jeśli pierwszy wynik wydaje się nie tak — jeden odcień dominuje albo akcent, którego chciałeś, został scalony — dostosuj liczbę i odczytaj ponownie. Zdjęcie w 80% z nieba poda Ci dużo niebieskiego przy niskiej liczbie; podbij liczbę, by wydobyć mniejsze plamki koloru.
Kliknij, by skopiować — proces, który się liczy
Odczytywanie kodu HEX i wpisywanie go to miejsce, gdzie wkradają się błędy (#3A7BD5 kontra #3A7BD6 i spędziłeś dziesięć minut, zastanawiając się, czemu wygląda źle). W narzędziu Paleta kolorów każda próbka kopiuje swój kod HEX po kliknięciu, więc idziesz prosto z obrazu do schowka do arkusza stylów bez dotykania klawiatury.
Praktyczny przebieg:
- Załaduj obraz.
- Ustaw liczbę pod zadanie — nisko dla palety marki, wyżej, by złapać akcenty.
- Kliknij każdą próbkę, którą chcesz; wklej ją tam, gdzie trafia.
- Za mały zakres? Popraw liczbę i chwyć dodatkowe.
Odczytywanie wyników okiem projektanta
Kilka rzeczy wartych wiedzy, by paleta dobrze wyszła:
- Dominujący kolor nie zawsze jest tym użytecznym. Zdjęcie produktu na białym tle zgłosi dużo bieli albo prawie-bieli. To dokładne, ale kolor, na którym Ci naprawdę zależy, to produkt — podbij liczbę, by go wydobyć, albo najpierw przytnij do obiektu.
- Zdjęcia mają więcej kolorów, niż wyglądają. Skóra, cienie i odbicia dodają tonów, których świadomie nie zauważyłeś. Wyższa liczba je ujawnia; niższa chowa je za średnimi.
- HEX jest przenośny. Każdy skopiowany kod działa wprost w CSS, Figmie, Photoshopie, Canvie albo dokumencie marki. Bez potrzeby konwersji.
Dlaczego zostaje w Twojej przeglądarce
Całe wyodrębnianie działa lokalnie — obraz jest odczytywany i analizowany w Twojej przeglądarce dzięki Canvas i nigdy nie jest przesyłany na serwer. To ma znaczenie, gdy „obrazem" jest niewydana makieta, prywatny materiał marki klienta albo wewnętrzny zrzut, którego nie powinieneś wrzucać do przypadkowego narzędzia webowego. Jest darmowe, nie wymaga rejestracji, a po pierwszej wizycie działa offline.
Chwyć kolory, kliknij, by skopiować, wklej je tam, gdzie ich miejsce.