Bez przesyłania, 100% lokalnie, bez konta

Ekstraktor palety kolorów

Prześlij obraz, aby wyodrębnić jego dominujące kolory. Uzyskaj kody HEX dla każdej próbki, kopiuj jednym kliknięciem. Wszystko działa w przeglądarce.

Jak działa Ekstraktor palety kolorów

Ekstraktor palety kolorów analizuje Twój obraz i identyfikuje wizualnie dominujące kolory za pomocą algorytmu k-means uruchamianego na danych pikseli w Canvas. Wynikiem jest zestaw próbek kolorów z wartościami HEX, które można kopiować indywidualnie. Żadne bajty obrazu nie opuszczają przeglądarki; próbkowanie pikseli przebiega lokalnie w Web Workerze, dzięki czemu główny wątek pozostaje responsywny.

Ekstrakcja grupuje setki tysięcy indywidualnych kolorów pikseli w mniejszą liczbę reprezentatywnych klastrów. Liczba kolorów wyjściowych jest konfigurowalna, więc można wyodrębnić ścisłą paletę pięciu kolorów lub szerszy zestaw dwunastu. Przydaje się to do szybkiego wyciągania kolorów marki z logo, identyfikowania dominujących tonów fotografii na tablicę inspiracji lub sprawdzania, jakie kolory pojawiają się w obrazie przesłanym przez użytkownika.

Napisał Bastien Sulyan

Ekstraktor palety kolorów: instrukcja krok po kroku

  1. Upuść obraz na obszar przesyłania lub kliknij, aby przeglądać.
  2. Ustaw liczbę kolorów do wyodrębnienia (zazwyczaj 5 do 12).
  3. Kliknij Wyodrębnij. Klastrowanie pikseli przebiega lokalnie w Web Workerze.
  4. Wyświetl wynikowe próbki kolorów i ich wartości HEX.
  5. Kliknij dowolną próbkę, aby skopiować jej kod HEX do schowka.

Typowe zastosowania

  • Projektant wyodrębnia dominującą paletę ze zdjęcia marki, aby zapewnić zgodność nowych materiałów marketingowych z istniejącą historią kolorystyczną.
  • Programista identyfikuje główne kolory w awatarze przesłanym przez użytkownika, aby dynamicznie wygenerować pasujący kolor akcentu interfejsu.
  • Artysta buduje referencyjną tablicę nastrojów, wyodrębniając palety z kilku obrazów referencyjnych i porównując wyodrębnione kody HEX.
  • Bloger wyciąga pięć dominujących tonów ze zdjęcia nagłówka, aby wybrać komplementarne kolory tekstu i przycisków dla układu wpisu.

Często zadawane pytania

Jak działa algorytm ekstrakcji kolorów?

Narzędzie odczytuje wszystkie wartości pikseli z obrazu za pomocą Canvas.getImageData(), próbkuje je dla szybkości, a następnie uruchamia klastrowanie k-means. Każdy centroid klastra staje się jednym z kolorów wyjściowych. K-means grupuje piksele według bliskości kolorów, dzięki czemu dominujące tony wizualne pojawiają się jako kolory centroidów.

Czy ekstrakcja kolorów wymaga przesłania obrazu?

Nie. Próbkowanie pikseli odbywa się wewnątrz Web Workera w przeglądarce. Obraz jest odczytywany z lokalnego dysku, rysowany na OffscreenCanvas, a tablica pikseli jest przetwarzana w pamięci. Dane nie opuszczają Twojego urządzenia.

Dlaczego wyodrębnione kolory wyglądają nieco inaczej niż te widoczne na obrazie?

Centroidy k-means reprezentują matematyczną średnią klastra kolorów pikseli. Kolor bardzo powszechny, ale nieco zróżnicowany (błękitne niebo z subtelnymi wariacjami gradientu) da centroid będący średnim odcieniem, a nie dokładną wartością piksela. Wynik to średnia reprezentatywna, nie próbka konkretnego piksela.

Czy mogę wyodrębniać palety ze zdjęć z przezroczystością?

W pełni przezroczyste piksele (alfa = 0) są wykluczone z klastrowania, aby przezroczysty obszar nie wpływał na wyodrębnione kolory w kierunku czerni lub bieli w zależności od koloru tła Canvas. Półprzezroczyste piksele są uwzględniane w próbce ważone wartością alfa.

W jakim formacie są kody kolorów?

Narzędzie wyświetla kody HEX (np. #3A7BD5). Jeśli potrzebujesz RGB, HSL lub innych formatów, skopiuj wartość HEX do narzędzia Konwerter kolorów, które przyjmuje HEX i konwertuje do wszystkich popularnych modeli kolorów.

Powiązane narzędzia

Utrzymuj wszystko lokalnie, odkrywaj narzędzia uzupełniające.

Wszystkie narzędzia do obrazów