Przewodnik po Palette Extractor

Wyodrębnij dominujące palety kolorów z obrazów JPG, PNG, WebP, AVIF, GIF, BMP lub TIFF. Uzyskaj kody HEX i RGB dla każdego koloru. Każda ekstrakcja odbywa się lokalnie w Twojej przeglądarce — bez przesyłania plików na serwer.

Czego potrzebujesz

Przeglądarka — Chrome, Firefox, Safari lub Edge z obsługą OffscreenCanvas Formaty — JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP lub TIFF Limit — 20 MB na plik (pliki przekraczające 20 MB zostaną odrzucone) Konto — Nie jest wymagane Internet — Nie jest potrzebny po załadowaniu strony

Wyodrębnianie palety

Otwórz Palette Generator w swojej przeglądarce. Przeciągnij plik obrazu z menedżera plików i upuść go w strefie przesyłania. Alternatywnie kliknij obszar przesyłania, aby wybrać plik z urządzenia.

Przed przesłaniem upewnij się, że plik nie przekracza limitu 20 MB — większe pliki zostaną odrzucone. Wybierz liczbę kolorów do wyodrębnienia: 5, 8, 10 lub 12. Mniejsza liczba kolorów tworzy czystsze i bardziej użyteczne palety.

Większa liczba pozwala uchwycić subtelne różnice, ale może zawierać kolory, które nie są wyraźnie od siebie odróżnialne. Kliknij przycisk ekstrakcji. Algorytm kwantyzacji przetworzy dane pikseli obrazu w Twojej przeglądarce.

Grupuje on piksele według podobieństwa kolorów za pomocą k-średnich i oblicza średni kolor dla każdego klastra. Żadne dane nie są przesyłane przez sieć. Przejrzyj wyodrębnioną paletę.

Każdy kolor jest wyświetlany jako próbka z kodem HEX i wartościami RGB. Kliknij kod koloru, aby skopiować go do schowka. Użyj tych kodów w swoich projektach graficznych, CSS lub druku.

Jak to działa

Palette Generator wykorzystuje element OffscreenCanvas oraz algorytm kwantyzacji kolorów do wyodrębniania dominujących barw. Po przesłaniu obrazu przeglądarka odczytuje go bezpośrednio do pamięci za pomocą File API — nie dochodzi do przesyłania na serwer.

libvips tworzy płótno poza ekranem przy użyciu OffscreenCanvas i rysuje obraz w jego natywnej rozdzielczości za pomocą drawImage. Następnie odczytuje dane pikseli jako tablicę RGBA za pomocą getImageData, która zwraca Uint8ClampedArray zawierającą wartości czerwieni, zieleni, niebieskiego i kanału alfa dla każdego piksela. Dla obrazu 1920x1080 daje to około 8 milionów indywidualnych wartości kolorów.

Algorytm kwantyzacji grupuje piksele według podobieństwa kolorów za pomocą k-średnich. Inicjuje k centrów klastrów (gdzie k równa się wybranej liczbie kolorów), a następnie iteracyjnie przypisuje każdy piksel do najbliższego centrum klastra na podstawie odległości euklidesowej w przestrzeni RGB. Po każdej iteracji przelicza centrum klastra jako średnią matematyczną wszystkich pikseli w danej grupie.

Proces powtarza się, aż centra się ustabilizują lub zostanie osiągnięta maksymalna liczba iteracji. Wynikiem jest zestaw reprezentatywnych kolorów, które oddają tożsamość wizualną obrazu.

Każdy kolor jest wyświetlany jako próbka z kodem HEX i wartościami RGB. libvips pobiera dokładny kolor centroidu z każdego klastra, zapewniając, że wyświetlana próbka dokładnie reprezentuje matematyczną średnią wszystkich pikseli w tej grupie.

Pliki są przetwarzane w całości wewnątrz Twojej przeglądarki przy użyciu OffscreenCanvas. Nigdy nie są przesyłane na serwery ConvertCraft.

Rozwiązywanie problemów

Obraz nie chce się przesłać: Plik przekracza limit 20 MB. OffscreenCanvas działa w ramach ścisłych limitów pamięci. Przetwarzanie obrazów większych niż 20 MB wymaga ogromnych nieskompresowanych buforów pikseli w pamięci RAM, co może spowodować zawieszenie karty przeglądarki.

Paleta zawiera podobne kolory: Obraz posiada subtelne różnice kolorystyczne, które algorytm traktuje jako odrębne klastry. Zmniejsz rozmiar palety, aby uzyskać mniej, ale bardziej wyraźnych kolorów.

Kolory nie pasują do tego, co widzę: Algorytm wyodrębnia średnie matematyczne. Różnice percepcyjne między kolorami mogą nie pokrywać się z percepcją wzrokową. Wypróbuj inny rozmiar palety lub użyj narzędzia kroplomierza na konkretnych pikselach.

Paleta składa się głównie z jednego koloru: Twój obraz jest zdominowany przez jeden kolor. Algorytm wiernie reprezentuje rozkład kolorów obrazu. Wypróbuj inny obraz o większej różnorodności barw.

### Ile kolorów mogę wyodrębnić?

Narzędzie obsługuje wyodrębnianie 5, 8, 10 lub 12 kolorów. Mniejsza liczba kolorów tworzy czystsze palety. Większa liczba pozwala uchwycić subtelne różnice, ale może zawierać kolory, które nie są wyraźnie od siebie odróżnialne.

### Czy mogę wyodrębnić kolory z określonego obszaru?

Obecna wersja analizuje cały obraz. Aby wyodrębnić kolory z konkretnego fragmentu, najpierw przytnij obraz za pomocą Image Converter lub dedykowanego narzędzia do kadrowania, a następnie prześlij przyciętą wersję.

### Czy wyodrębnianie kolorów z prywatnych obrazów jest bezpieczne?

Tak. Pliki są przetwarzane w całości wewnątrz Twojej przeglądarki przy użyciu OffscreenCanvas. Nigdy nie są przesyłane na serwery ConvertCraft.

Dane Twojego obrazu nigdy nie opuszczają komputera, co zapewnia pełne bezpieczeństwo przed przechwyceniem przez sieć lub logowaniem po stronie serwera.