Próbnik kolorów z obrazu — uzyskaj kody kolorów HEX i RGB

Prześlij dowolny plik JPG, PNG, WebP lub GIF i kliknij w dowolnym miejscu wyświetlanego obrazu — próbkowany jest dokładnie piksel pod kursorem i wyświetlany jako HEX, RGB i HSL z możliwością kopiowania jednym kliknięciem dla każdego formatu. Przydatne do dopasowywania koloru marki, pobierania próbki ze zdjęcia lub wydobywania akcentów z makiety projektu.

Kliknij dowolny piksel, a to narzędzie do wybierania kolorów pokaże jego kod HEX (na przykład #FF6B35) obok RGB i HSL — te same kody kolorów HTML/CSS, które wklejasz wprost do arkusza stylów, tokenu projektowego lub atrybutu HTML. Kliknij Kopiuj, aby uchwycić kod hex jednym kliknięciem.

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. Działa w przeglądarce i nie wymaga konta. Nie trzeba nic instalować i nie ma ograniczeń co do liczby sprawdzanych palet.

Obraz nie jest potrzebny. Selektor kolorów i koło kolorów na górze działają samodzielnie — przeciągnij kwadrat nasycenia/jasności i suwak odcienia albo wpisz dowolną wartość HEX, RGB lub HSL, aby ustawić dokładny kolor. Przesłanie obrazu jest opcjonalne — służy jedynie do pobierania kolorów pipetą ze zdjęcia.

Wybierz kolor bazowy, a panel Harmonie kolorów natychmiast zbuduje układy dopełniające, analogiczne, triadyczne, rozdzielczo-dopełniające, tetradyczne i monochromatyczne w oparciu o teorię koła barw. Kliknij dowolną próbkę, aby skopiować jej kod HEX.

W samodzielnym narzędziu Próbnik i koło kolorów ustaw swój kolor, a panel pokaże jego współczynnik kontrastu względem czystej bieli i czystej czerni wraz z oceną WCAG — AAA, AA, AA Large lub Fail. Użyj tego przed ostatecznym ustaleniem koloru tekstu lub przycisku, aby pozostał czytelny i spełniał wytyczne dostępności WCAG 2.1.

Tak. Samodzielne narzędzie Color Picker & Wheel pokazuje najbliższy pasujący nazwany kolor CSS obok dowolnej wartości HEX, RGB lub HSL, którą ustawisz, co jest wygodne do szybkiego opisania odcienia w briefie, zgłoszeniu lub specyfikacji projektu bez zgadywania.

Kliknij Losuj w Próbniku i Kole kolorów, aby przejść do nowego koloru, a następnie użyj panelu Harmonie kolorów poniżej, aby zobaczyć palety dopełniające, analogiczne, triadyczne i inne skoordynowane zestawy zbudowane z tego koloru — szybki sposób na znalezienie punktu wyjścia, gdy projektujesz od zera zamiast pobierać próbki z istniejącego obrazu.

Użyj rozwijanej listy Rozmiar nad paletą, aby wybrać 5, 8, 10, 16 lub 24 dominujące kolory — paleta przelicza się natychmiast po zmianie. Połącz mały rozmiar, np. 5, dla czystej palety marki z kroplomierzem do pobierania koloru, aby wychwycić jeden lub dwa dokładne odcienie akcentu, które automatyczna ekstrakcja mogłaby uśrednić i pominąć.

Tak — samodzielny Selektor i koło kolorów pokazuje współczynnik kontrastu Twojego bieżącego koloru względem czystej bieli i czystej czerni tuż pod próbką, oznaczony jako AAA, AA, AA Large lub Fail zgodnie z progami WCAG (7:1, 4.5:1, 3:1). Użyj go, aby sprawdzić, czy zestawienie tekstu/tła spełnia standardy dostępności, zanim ustalisz kolor w projekcie.

Próbnik i koło kolorów automatycznie dopasowują dowolny wybrany kolor — za pomocą próbnika, pola HEX lub pól RGB/HSL — do najbliższej standardowej nazwy koloru CSS, pokazanej jako „Najbliższa nazwa” obok próbki. To szybki sposób na słowne opisanie koloru lub znalezienie jego najbliższego bezpiecznego dla sieci odpowiednika.

Tak — każde kliknięcie lub dotknięcie przesłanego obrazu dodaje nową próbkę do listy Pobrane kolory, zamiast zastępować poprzednią, dzięki czemu możesz zbudować własny zestaw dokładnych kolorów pikseli z różnych części zdjęcia. Usuń dowolną próbkę przyciskiem × przy niej lub wyczyść całą listę za pomocą Wyczyść pobrane.

Tak — przycisk Losowy (ikona tasowania) w Selektorze i kole kolorów jednym kliknięciem przeskakuje do nowej kombinacji odcienia, nasycenia i jasności, przydatny do przełamania twórczej blokady lub odkrywania palety, której nie wpisałbyś ręcznie. HEX, RGB, HSL i próbki harmonii poniżej aktualizują się razem.

Na ekranie dotykowym przeciągnij palcem po obrazie, aby podejrzeć kolor pod nim w unoszącej się próbce na żywo, a następnie unieś palec, aby dodać ten dokładny piksel do listy Wybranych kolorów — bez potrzeby osobnego potwierdzenia. Ta sama rozwijana lista rozmiaru palety i przyciski eksportu działają identycznie na urządzeniach mobilnych.

Tak. Koło kolorów u góry strony ma przycisk Losowo, który przeskakuje do przypadkowego koloru i natychmiast pokazuje jego kody HEX, RGB i HSL, najbliższą nazwaną barwę, współczynniki kontrastu na białym i czarnym tle oraz pełne zestawy harmonii — komplementarnej, analogicznej, triadycznej, rozdzielczo-komplementarnej, tetradycznej i monochromatycznej. To szybki sposób na znalezienie punktu wyjścia dla palety.

To narzędzie pobiera kolory z przesłanego obrazu lub z wbudowanego koła kolorów, a nie z odczytu ekranu na żywo. Najszybszy sposób na zastąpienie pipety ekranowej: zrób zrzut ekranu, przeciągnij go na stronę i kliknij dokładnie w wybrany piksel — otrzymasz te same kody HEX, RGB i HSL bez instalowania rozszerzenia, a zrzut ekranu nigdy nie opuszcza Twojej przeglądarki.

Tak — Pixoate obsługuje przetwarzanie wsadowe i zbiorcze. Przejdź do trybu wsadowego, dodaj maksymalnie 60 obrazów w wersji Premium lub 200 w wersji Pro, ustaw opcje raz, a każdy obraz będzie przetwarzany z tymi samymi ustawieniami przed pobraniem jednego arkusza kalkulacyjnego – wiersz palety na obraz. Przetwarzanie zbiorcze to funkcja Premium; wyjście korzysta z tej samej jakości i ustawień, co w trybie pojedynczym.

Tak — przy przetwarzaniu zbiorczym konfigurujesz ustawienia jednorazowo i mają one zastosowanie do każdego elementu w partii — do 60 obrazów w wersji Premium lub 200 w wersji Pro. Nie ma potrzeby powtarzania konfiguracji dla każdego elementu, a wyodrębnianie palet odbywa się w przeglądarce; do pobrania zapisywany jest tylko gotowy arkusz kalkulacyjny.

Prawie zawsze chodzi o jedną z trzech rzeczy. Plik przekracza bezpłatny limit 11 MB — Premium obsługuje 50 MB, a Pro 120 MB. Format nie jest obsługiwany przez to narzędzie, więc sprawdź listę w panelu przesyłania. Albo rzeczywisty format pliku nie zgadza się z rozszerzeniem: zmiana nazwy nie zmienia jego zawartości, dlatego pozornie prawidłowy obraz może zostać odrzucony.

Raportuje, co naprawdę znajduje się w pliku, więc pusty lub zaskakujący wynik zwykle oznacza, że danych w ogóle tam nie było — usuniętych przez aplikację, która je ostatnio zapisała, usuniętych przez platformę podczas przesyłania lub nieobecnych w oryginale. Wypróbuj nienaruszony oryginalny plik prosto z aparatu lub źródła, a nie kopię, która przeszła przez aplikację do przesyłania wiadomości.

Nie. Możesz uruchomić Color Picker i pobrać darmowy wynik bez konta i nie zawiera on znaku wodnego. Premium to to, co kupujesz, gdy limity zaczynają się ograniczać: do 60 plików w jednej partii, przesyłanie większych plików, brak dziennego limitu i wynik w oryginalnej rozdzielczości. Na etapie pobierania nie jest ujawniane nic, co nie było widoczne przed rozpoczęciem.

Nie — Próbnik kolorów działa w przeglądarce na komputerze stacjonarnym i telefonie. Nie trzeba nic instalować, nie trzeba rozpoczynać okresu próbnego ani kupować licencji, zanim zobaczysz, czy spełnia Twoje potrzeby. Wypróbuj na pliku, w którym faktycznie utknąłeś, a nie na próbce.