Ekstraktor palety kolorów z obrazu za darmo

Jak to działa

Wyodrębnianie kolorów działa w całości w przeglądarce, z użyciem ręcznie napisanego algorytmu klasteryzacji k-means++ na surowych danych pikseli odczytanych przez Canvas API — bez serwera i zewnętrznej biblioteki. Ten sam obraz i te same ustawienia liczby kolorów zawsze dają tę samą paletę, bo algorytm używa deterministycznego generatora liczb pseudolosowych (mulberry32) zamiast Math.random.

1. 1
   Canvas odczytuje dane pikseli

   Obraz jest rysowany na niewidocznym elemencie HTML Canvas i zmniejszany do najwyżej 200px na dłuższym boku. Metoda getImageData() z Canvas API zwraca każdy piksel jako surowe bajty RGBA, a całkowicie przezroczyste piksele (alfa < 128) są odrzucane przed rozpoczęciem klasteryzacji.
2. 2
   k-means++ grupuje piksele

   Inicjalizator k-means++ deterministycznie wybiera centroidy, a następnie algorytm wykonuje do 20 iteracji: każdy piksel jest przypisywany do najbliższego centroidu w przestrzeni RGB, a centroidy są przeliczane jako średnia wszystkich przypisanych pikseli. Klastry, które zbiegają się do tej samej wartości hex, są łączone, więc każda próbka w wyniku jest unikalna.
3. 3
   Obliczanie metadanych dla każdego koloru

   Każdy centroid jest przeliczany na HEX, HSL i udział w łącznej liczbie pikseli (procent). Luminancja względna WCAG jest obliczana według standardowego wzoru, a przy każdej próbce pokazywane są współczynniki kontrastu względem czerni i bieli.
4. 4
   Eksport i wynik pipety

   Paletę można skopiować jako właściwości niestandardowe CSS, zmienne SCSS, fragment konfiguracji Tailwind lub JSON. Pipeta działająca po kliknięciu odwzorowuje miejsce kliknięcia na podglądzie na dokładne współrzędne piksela źródłowego na płótnie w pełnej rozdzielczości i dodaje kolor tego piksela do osobnej listy wybranych kolorów. Pasek palety PNG można pobrać przez toBlob() z Canvas.

Powiązane narzędzia