Próbnik kolorów i ekstraktor palety - wybieraj kolory z obrazu

Prześlij dowolny plik JPG, PNG, WebP lub GIF i kliknij w dowolne miejsce wyświetlonego obrazu — dokładny piksel pod kursorem zostanie pobrany i pokazany jako HEX, RGB i HSL z kopiowaniem jednym kliknięciem dla każdego formatu. Idealne do dopasowania koloru marki, pobrania próbki ze zdjęcia lub uchwycenia tonów akcentowych z makiety projektu.

Obraz jest zmniejszany do 320 pikseli na najdłuższym boku, a następnie każdy piksel jest przypisywany do kubełka według 4 najwyższych bitów na kanał. Najgęściej zapełnione kubełki są uśredniane z powrotem do pełnego 8-bitowego koloru, sortowane według częstości i zwracane jako Twoja paleta. Wynik to zazwyczaj od 5 do 24 dominujących kolorów, które wizualnie podsumowują obraz.

Tak. Przyciski pobierania tworzą dwa formaty: blok zmiennych CSS gotowy do wklejenia do selektora :root (--color-1, --color-2…) oraz plik JSON z wartościami heksadecymalnymi, składowymi RGB i procentowym udziałem każdego koloru. Oba formaty czysto integrują się z tokenami projektowymi, konfiguracjami Tailwind i bibliotekami palet.

Nie — pobieranie kolorów i wyodrębnianie palety odbywają się w całości w Twojej przeglądarce z użyciem API canvas HTML. Obraz pozostaje na Twoim urządzeniu, dzięki czemu narzędzie jest bezpieczne dla niepublikowanych zdjęć produktów, roboczych makiet i zasobów marki objętych umową poufności.

Przy pracy nad identyfikacją wizualną marki idealna jest liczba 5-8 kolorów — oddaje dominujący motyw bez rozmywania akcentów. Do wizualizacji danych zalecamy 10-16 kolorów, abyś miał wystarczająco dużo odcieni kategorii. Suwak pozwala wybrać wartość od 5 do 24.

Piksele o wartości alfa poniżej 128 są pomijane, więc przezroczyste tła nie zaśmiecają palety kolorami „tła”. Dzięki temu Próbnik kolorów obrazu szczególnie dobrze sprawdza się przy wyciętych produktach, grafice naklejek i wyizolowanych obiektach.

HEX (#RRGGBB) jest najbardziej zwięzły i jest tym, czego domyślnie używają CSS, Figma i Sketch. RGB pokazuje trzy wartości składowe w zakresie 0–255 — przydatne podczas programistycznej pracy z danymi obrazu. HSL (barwa, nasycenie, jasność) jest intuicyjny przy dostosowywaniu kolorów: zmień barwę, aby przejść do innej rodziny kolorów, dostosuj jasność, aby uzyskać rozjaśnienia i przyciemnienia.

Tak. Za darmo, bez zakładania konta, bez ograniczeń co do rozmiaru obrazu czy liczby wyodrębnionych palet. Nie ma nic do zainstalowania — całe narzędzie to pojedyncza strona internetowa.