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 jedna z trzech rzeczy. Plik przekracza limit bezpłatnego przesyłania wynoszący 20 MB — Premium zajmuje 50 MB, a Pro 120 MB. Format nie jest akceptowany przez to narzędzie, więc sprawdź listę wyświetloną w panelu przesyłania. Lub plik nie jest w formacie zgodnym z jego nazwą: zmiana nazwy pliku nie powoduje zmiany zawartości pliku i dlatego plik o prawidłowym wyglądzie jest odrzucany.

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.

Color Picker supports free standard use within the published processing allowances. Free downloads are clean — no watermark. No signup is required for standard tool use. Photo effects and AI edits have a web-size limit on Free, with the original-resolution result available through Premium or one credit. Crop, resize, rotate, compress and convert stay full size. Premium supports batches of up to 60 files, with the applicable plan limits shown before processing.

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.