Generator palet kolorów
Wyodrębnij kolory z obrazu lub twórz harmonie.
- Natychmiast
- Za darmo
- Prywatnie (przetwarzane lokalnie)
- Bez rejestracji
Kliknij kolor, aby skopiować jego kod
Profesjonalna paleta w kilka sekund
Każda identyfikacja wizualna zaczyna się od palety. Prowadzą do niej dwie drogi: wyjść od obrazu, który już niesie pożądany nastrój (zdjęcie, moodboard, zrzut ekranu), i wyodrębnić jego dominujące kolory, albo wyjść od koloru marki i zbudować jego harmonie według teorii koloru.
-
Obraz → paleta
Upuść obraz: algorytm k-średnich grupuje piksele i ujawnia 6 dominujących kolorów wraz z ich udziałem.
-
Kolor → harmonie
Wybierz kolor bazowy: dopełniający, analogiczne, triada i odcienie generują się natychmiast.
-
Eksportuj
Kliknij kolor, by skopiować jego kod, albo skopiuj cały blok zmiennych CSS / Tailwind.
Harmonie w pigułce
| Harmonia | Budowa | Efekt |
|---|---|---|
| Dopełniająca | 2 kolory co 180° | Maksymalny kontrast, energia |
| Analogiczne | 3 kolory przy ±30° | Miękkość, naturalna spójność |
| Triada | 3 kolory co 120° | Żywa, kolorowa równowaga |
| Odcienie | Ten sam odcień, 5 jasności | Monochromatyczna głębia, hierarchia |
Zasada 60-30-10: około 60 % koloru dominującego, 30 % drugorzędnego, 10 % akcentu. Sprawdź też kontrast tekst/tło naszym testerem WCAG.
Najczęstsze pytania
Jak kolory są wyodrębniane z obrazu?
Algorytmem klastrowania k-średnich działającym w przeglądarce: piksele są grupowane w 6 rodzin podobnych kolorów, a środek każdej rodziny staje się kolorem palety, posortowanym według ważności (udziału w obrazie).
Czym jest kolor dopełniający?
Kolor leżący dokładnie naprzeciwko na kole barw (o 180°). Para tworzy najsilniejszy kontrast: idealny, by wyróżnić przycisk call-to-action na tle.
Analogiczne, triada: kiedy ich używać?
Analogiczne (±30°) dają miękkie, spójne nastroje — idealne na tła. Triada (3 kolory co 120°) oferuje żywą równowagę: jeden dominujący, dwa akcenty.
Jak użyć eksportu CSS?
Wygenerowany blok zawiera zmienne CSS (--color-1, --color-2…) do wklejenia w :root oraz odpowiednik dla konfiguracji Tailwind. Zmień nazwy zmiennych według ról (--primary, --accent…) dla czytelniejszego kodu.
Czy mój obraz jest gdzieś wysyłany?
Nie: analiza k-średnich działa w całości w przeglądarce na miniaturze obrazu. Nic nie jest przesyłane, nawet przy dużych zdjęciach.