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.

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. 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.

Obraz nie jest potrzebny. Próbnik kolorów i koło barw na górze działają samodzielnie — przeciągaj kwadrat nasycenia/jasności oraz suwak odcienia lub wpisz dowolną wartość HEX, RGB lub HSL, aby precyzyjnie dobrać kolor. Przesłanie obrazu jest opcjonalne, służy jedynie do pobierania kolorów ze zdjęcia kroplomierzem.

Wybierz kolor podstawowy, a panel harmonii kolorów natychmiast zbuduje schematy dopełniające, analogiczne, triadyczne, dopełniające rozszczepione, tetradyczne i monochromatyczne w oparciu o teorię koła barw. Kliknij dowolną próbkę, aby skopiować jej kod HEX.

In the standalone Color Picker & Wheel, dial in your color and the panel shows its contrast ratio against pure white and pure black along with the WCAG rating — AAA, AA, AA Large, or Fail. Use this before finalizing a text or button color so it stays readable and meets WCAG 2.1 accessibility guidelines.

Yes. The standalone Color Picker & Wheel shows the closest matching named CSS color next to whatever HEX, RGB or HSL value you've dialed in, which is handy for quickly describing a shade in a brief, ticket or design spec without guessing.

Click Random in the Color Picker & Wheel to jump to a new color, then use the Color harmonies panel below it to see complementary, analogous, triadic and other coordinated palettes built from that color — a quick way to find a starting point when you're designing from scratch rather than sampling an existing image.

Use the Size dropdown above the palette to choose 5, 8, 10, 16 or 24 dominant colors — the palette recalculates instantly as you change it. Combine a small size like 5 for a clean brand palette with the picked-color eyedropper to grab one or two exact accent shades the automatic extraction might average away.

Yes — the standalone Color Picker & Wheel shows your current color's contrast ratio against pure white and pure black right under the swatch, labelled AAA, AA, AA Large or Fail per the WCAG thresholds (7:1, 4.5:1, 3:1). Use it to check a text/background pairing meets accessibility standards before you lock in a design color.

The Color Picker & Wheel automatically matches whatever color you've dialed in — via the picker, HEX box, or RGB/HSL fields — to its closest standard CSS color name, shown as 'Closest name' next to the swatch. It's a quick way to describe a color verbally or find its nearest web-safe equivalent.

Yes — every click or tap on the uploaded image adds a new swatch to your Picked Colors list rather than replacing the last one, so you can build up a custom set of exact pixel colors from different parts of a photo. Remove any single swatch with its × button, or clear the whole list with Clear picked.

Yes — the Random button (shuffle icon) in the Color Picker & Wheel jumps to a new hue, saturation and brightness combination in one click, useful for breaking creative block or exploring a palette you wouldn't have typed in manually. HEX, RGB, HSL and the harmony swatches below all update together.

On a touchscreen, drag your finger across the image to preview the color under it in a live floating swatch, then lift your finger to add that exact pixel to your Picked Colors list — no separate confirm tap needed. The same palette-size dropdown and export buttons work identically on mobile.