Grab the exact color from any image

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.

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.

Yes. Free, free account required to download, no limits on image size or number of palettes extracted. There is nothing to install — the entire tool is a single web page.

No image needed. The Color Picker & Wheel at the top works on its own — drag the saturation/brightness square and the hue slider, or type any HEX, RGB or HSL value to dial in an exact color. Uploading an image is optional, just for eyedropping colors out of a photo.

Pick your base color and the Color harmonies panel instantly builds complementary, analogous, triadic, split-complementary, tetradic and monochromatic schemes using color-wheel theory. Click any swatch to copy its HEX code.

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.