Dlaczego dodaliśmy automatyczne wyodrębnianie palety do próbnika kolorów

Nasz próbnik kolorów zawsze pozwalał przesłać obraz i kliknąć dowolny piksel, aby uzyskać jego dokładną wartość HEX, RGB i HSL. To odpowiada na pytanie „jakiego koloru jest ten konkretny punkt?“ — przydatne, ale nie jest to pytanie, które większość ludzi faktycznie ma na myśli, przesyłając zdjęcie. Zwykle chodzi o „jaka jest ogólna paleta kolorów tego obrazu?“ — wyciągnięcie palety marki z logo albo dopasowanie nastroju obrazu referencyjnego do schematu kolorów strony internetowej.

Próbkowanie pojedynczego piksela nie może na to odpowiedzieć. Dlatego dodaliśmy wyodrębnianie palety: prześlij obraz, a narzędzie automatycznie wyciąga osiem dominujących kolorów i pokazuje je jako klikalne próbki.

Jak to działa

Nie ma tu żadnego modelu AI i nic nigdzie nie jest przesyłane — to prosty algorytm zliczania częstotliwości, który działa w kilka milisekund:

1. Obraz jest zmniejszany do płótna 80×80. Pełna rozdzielczość nie jest potrzebna do statystyk kolorów, a zmniejszenie sprawia, że wszystko jest natychmiastowe nawet przy dużych zdjęciach.
2. Każdy piksel jest przypisywany do koszyka na podstawie uproszczonej wersji jego koloru — górnych 5 bitów każdego kanału RGB, dzięki czemu wizualnie niemal identyczne piksele trafiają do tego samego koszyka zamiast być liczone jako osobne kolory.
3. Koszyki są sortowane według liczby pikseli, które do nich trafiły, a osiem największych staje się paletą, każdy pokazany jako średni kolor wszystkiego w tym koszyku.

To wszystko. Bez uczenia maszynowego, bez zewnętrznych usług — tylko zmniejszanie próbkowania i zliczanie, dlatego jest to natychmiastowe i nigdy nie opuszcza Twojej przeglądarki.

Kliknij próbkę, uzyskaj kod

Każda próbka palety jest klikalna: kliknij jedną, a stanie się aktywnym kolorem narzędzia, z automatycznie wypełnionymi HEX, RGB i HSL, a hex zostanie skopiowany do schowka tym samym kliknięciem. Jest też przycisk „kopiuj wszystko“, jeśli chcesz całą paletę jako listę oddzieloną przecinkami, przydatną do wklejenia bezpośrednio w narzędziu projektowym lub bloku niestandardowych właściwości CSS.

Wypróbuj

Prześlij dowolny obraz — zrzut ekranu, logo, zdjęcie — na stronie próbnika kolorów, a paleta pojawi się automatycznie poniżej.