tigtools

Próbnik kolorów z obrazu

Prześlij obraz i kliknij w dowolnym miejscu, aby uzyskać dokładny kolor danego piksela, albo pozwól narzędziu znaleźć główne kolory całego obrazu.

Działa w przeglądarce Bez rejestracji

JPEG, PNG, WebP, GIF, AVIF lub BMP, do 25 MB. Obraz pozostaje na Twoim urządzeniu.

Jak używać

  1. Wybierz obraz lub upuść go na pole.
  2. Przesuń kursor nad obraz; lupa pokaże piksele wokół niego.
  3. Kliknij lub stuknij, aby wybrać kolor i skopiować go jako HEX, RGB lub HSL.
  4. Przewiń w dół, aby zobaczyć kolory dominujące, wybierz ich liczbę i skopiuj je lub pobierz jako zmienne CSS.

Jak to działa

Obraz jest rysowany na elemencie canvas w przeglądarce i odczytywany jest z niego kolor dokładnie tego piksela pod wskaźnikiem. Lupa pokazuje powiększony obszar 11 × 11 pikseli z obrysowanym wybranym pikselem. Obrazy o boku większym niż 4096 pikseli są najpierw skalowane w dół, więc na bardzo dużych zdjęciach wybrany piksel jest średnią kilku oryginalnych pikseli.

Kolory dominujące są znajdowane za pomocą grupowania k-means: piksele są najpierw grupowane w 32 768 małych zasobników kolorów, a następnie zasobniki są łączone w wybraną liczbę kolorów, z wagą zależną od liczby pikseli w każdym z nich. Punkty startowe są wybierane deterministycznie, dlatego ten sam obraz zawsze daje tę samą paletę.

Kolory są odczytywane w przestrzeni sRGB używanej przez przeglądarkę do wyświetlania. Jeśli obraz ma osadzony profil szerokiej gamy, wartości mogą się nieznacznie różnić od tych, które pokazuje edytor zdjęć. W przeglądarkach, które ją obsługują (Chrome i Edge na komputerach stacjonarnych), przycisk „Wybierz z ekranu” korzysta z wbudowanego narzędzia EyeDropper, aby pobrać kolor z dowolnego miejsca na ekranie.

Przykłady

Dopasowywanie koloru marki

Prześlij zrzut ekranu logo, kliknij jego główny kolor i skopiuj #1a73e8 lub rgb(26, 115, 232) do swojego CSS.

Paleta ze zdjęcia

Zdjęcie plaży podzielone na 6 kolorów zwraca odcienie piasku, morza i nieba; każdy kolor ma podany udział w obrazie, a kolory są posortowane od największego do najmniejszego udziału.

Sprawdzanie odcienia

Powiększ widok lupą, aby wybrać dokładny piksel cienkiej linii, a nie wygładzoną krawędź obok niej.

Często zadawane pytania

Dlaczego kolor nieznacznie różni się od tego z mojego edytora zdjęć?

Przeglądarki konwertują obrazy do sRGB na potrzeby wyświetlania. Zdjęcia z profilem szerokiej gamy (Display P3, Adobe RGB) mogą pokazywać nieco inne wartości w edytorze, który zachowuje oryginalny profil.

Dlaczego brakuje przycisku „Wybierz z ekranu”?

Wymaga interfejsu EyeDropper API, który obsługują tylko niektóre przeglądarki – obecnie Chrome i Edge na komputerach. Pobieranie koloru z przesłanego obrazu działa wszędzie.

Jak wybierane są kolory dominujące?

Przez grupowanie wszystkich pikseli metodą k-średnich, z wagą zależną od częstości występowania danego koloru. Małe, ale wyraziste detale mogą zostać połączone z większym pobliskim kolorem; aby je rozdzielić, zwiększ liczbę kolorów.

Czy obraz jest przesyłany?

Nie. Obraz jest dekodowany i analizowany przez tę stronę w Twojej przeglądarce i nigdy nie opuszcza Twojego urządzenia.

Prywatność

Obraz jest w całości przetwarzany w Twojej przeglądarce. Nie jest wysyłany, a wybrane kolory nie są przesyłane ani zapisywane.