Ekstraktor palety kolorów
Wyciągnij dominujące kolory z dowolnego obrazka w przeglądarce. 5–8 swatchy, kody hex, gotowe do wklejenia zmienne CSS. Pliki nigdy nie opuszczają urządzenia.
🔒 Files never leave your browser — no upload, no server, no tracking.
No image yet.
Do czego to służy?
To narzędzie czyta obrazek, próbkuje kilka tysięcy pikseli i grupuje je w 3–10 bucketów dominujących kolorów za pomocą ręcznie zaimplementowanego algorytmu median-cut. Wynik to mały zestaw reprezentatywnych kolorów hex, który możesz wykorzystać jako seed design systemu, podstawę moodboarda albo szybki sposób na wyciągnięcie kolorów marki z cudzego logo. Wszystko działa w przeglądarce; obrazek nigdy nie jest wysyłany.
Kiedy tego użyć
- Wyciągnąć dominujące kolory z logo, żeby zbudować pasujący motyw.
- Zaseed-ować config Tailwinda albo blok CSS custom-properties z obrazka hero.
- Zbudować paletę moodboarda z fotografii albo dzieła sztuki.
- Sprawdzić, czy obraz hero designu i kolor akcentu strony się zgadzają.
Jak działa median-cut
- Próbkuje obrazek w dół, żeby liczba pikseli była ogarnialna.
- Znajduje najdłuższą oś chmury pikseli (zakres R, G albo B).
- Sortuje wzdłuż tej osi, dzieli na medianie.
- Rekursja w każdej połowie, aż dojdzie do żądanej liczby bucketów.
- Zwraca średni kolor każdego bucketa.
Częste pułapki
- Obszary przezroczyste są pomijane. Piksele z alfą < 50% nie liczą się — przydatne dla logo na przezroczystych tłach.
- Zdjęcia z jednym dominującym kolorem (np. plaża z dużą ilością niebieskiego nieba) dadzą ci kilka odcieni tego koloru zamiast zróżnicowanej palety. Wytnij bardziej kolorowy fragment, jeśli chcesz range.
- Median-cut jest szybki, ale nie idealny percepcyjnie. Do jakości z teorii koloru (kolory uzupełniające, analogiczne) nadal potrzebujesz designera — algorytm bierze najczęstszy, nie najładniejszy.
- Suwak liczy buckety, nie "ważne" kolory. Poproś o 10 z logo o 2 kolorach i dostaniesz 10 — będą prawie duplikatami.