Jakie kolory dominują na tym zdjęciu? (paleta z obrazu)
Wgrywasz zdjęcie / screenshot / mockup - tool wyciąga 4-12 kolorów dominujących używając algorytmu k-means z inicjalizacją k++ (lepszą niż czysto losowa).
Każdy kolor pokazany z procentowym udziałem w obrazie. Eksport jako CSS variables, Tailwind config, JSON.
Wszystko lokalnie - obraz nie wychodzi z przeglądarki.
Idealne do brand audit, referencji designu, mood board.
Jak korzystać
- Wgraj obraz - PNG, JPG, WebP, AVIF, HEIC. Plik downsamplowany do max 200×200 pikseli (żeby k-means trwał ~50ms zamiast 5s na 4K).
- Wybierz liczbę kolorów: 4 (dominanty), 6 (zbalansowana), 8 (szczegółowa), 10 lub 12 (komplementarna).
- Górny pasek pokazuje paletę proporcjonalnie - szerszy swatch = więcej pikseli. Klik kopiuje HEX.
- Tabela "Szczegóły" daje każdy kolor w 4 formatach (HEX, RGB, HSL, OKLCH).
- Trzy bloki eksportu: CSS variables (do :root), Tailwind config, JSON (do innych narzędzi).
Do czego się przydaje
Gdzie ekstraktor palety się przyda - typowe sytuacje:
- Brand audit - wgraj logo / mockup, sprawdź czy używasz spójnych kolorów.
- Inspiracja designu - piękne zdjęcie zachodu słońca → 6-kolorowa paleta dla landingu.
- Reverse-engineering - chcesz odtworzyć paletę cudzej strony - screenshot → ekstrakcja.
- Mood board - zbierasz zdjęcia z Pinteresta, wyciągnij wspólny vibe kolorystyczny.
- Web design - zdjęcie produktu jako "anchor color" dla całej strony.
- Print design - extract z fotografii do papieru / packaging.
- Edukacja - zobacz że "biało-niebieskie zdjęcie" ma faktycznie 30% szarości, 25% niebieskiego, 20% bieli - perceptualnie inne, niż się wydaje.
Pytania i odpowiedzi
K-means = algorytm clustering - dzieli punkty (tu: kolory pikseli) na K grup tak, żeby każdy punkt był blisko swojego centrum. Inicjalizacja k++ (David Arthur 2007) wybiera początkowe centra ważone odległością - lepiej niż losowo. 10 iteracji k-means daje stabilną paletę (więcej nie zmienia widocznie nic).