Przejdź do wyniku narzędzia
Narzędzia

Generator palet kolorów

Zbuduj zestaw kolorów do strony, prezentacji albo ilustracji.

Przejdź do narzędzia

Zbuduj zestaw kolorów do strony, prezentacji albo ilustracji. Wybierz harmonię wokół koloru bazowego, wylosuj nową paletę lub wyodrębnij najważniejsze barwy ze zdjęcia.

Opracowanie:
Jak działa ↓ FAQ
Spis treści

Ustawienia narzędzia

Pliki i wyniki są przetwarzane w bieżącej karcie przeglądarki. Zapisz wynik przed jej zamknięciem.

Kolory ze zdjęcia

PNG, JPG lub WebP do 15 MB i 24 MP. Wyodrębnienie zastąpi kolory i blokady.

Twoja paleta kolorów

Brak gotowego wyniku

Ustaw parametry i użyj przycisku narzędzia.

Jak działa narzędzie
  1. Ustaw kolor bazowy oraz harmonię analogiczną, dopełniającą, triadę lub wariant monochromatyczny.
  2. Utwórz paletę albo kliknij „Losuj paletę”.
  3. Zablokuj kolory, które chcesz zachować. Możesz też wpisać inny HEX w polu danego koloru.
  4. Aby uzyskać paletę ze zdjęcia, wczytaj PNG, JPG lub WebP i użyj przycisku wyodrębniania.
  5. Pobierz CSS ze zmiennymi, JSON z wartościami HEX i RGB albo obraz PNG.

Szczegóły techniczne

Harmonie obliczamy w modelu HSL. W wariancie analogicznym wybieramy pobliskie odcienie, w dopełniającym także odcień po przeciwnej stronie koła, a w triadzie odcienie oddalone o 120°. Modyfikacje jasności ułatwiają zbudowanie pięciu barw użytkowych. Wariant monochromatyczny zachowuje odcień i zmienia jasność.

Przy odczycie zdjęcia zmniejszamy jego dłuższy bok do 128 px, pomijamy prawie przezroczyste piksele i grupujemy próbki kolorów. Następnie przybliżamy do pięciu reprezentatywnych barw metodą grupowania k-means w RGB. Ich kolejność odpowiada udziałowi w próbkowanym obrazie. Jednokolorowy obraz może dać tylko jeden kolor.

Blokady zachowują wybrane pozycje przy losowaniu i tworzeniu harmonii. Wyodrębnienie kolorów ze zdjęcia tworzy nową paletę i usuwa wcześniejsze blokady. To narzędzie do tworzenia zestawu barw; do przeliczenia pojedynczego koloru skorzystaj z konwertera kolorów.

FAQ

Jak zachować jeden kolor podczas losowania?

Kliknij „Zablokuj” przy tym kolorze. Kolejna harmonia lub losowanie zmieni pozostałe pozycje. Ponowne kliknięcie odblokuje kolor.

Dlaczego ze zdjęcia powstało mniej niż pięć kolorów?

Zdjęcie może mieć niewiele wyraźnie różnych kolorów, zwłaszcza po pominięciu przezroczystości. Generator zwraca dostępne reprezentatywne barwy.

Co zawiera eksport CSS?

Blok :root ze zmiennymi --kolor-1, --kolor-2 i kolejnymi. Możesz używać ich w swoim arkuszu CSS przez var(--kolor-1).

Czy paleta ze zdjęcia zachowa blokady?

Nie. Wyodrębnienie kolorów tworzy nowy zestaw i usuwa wcześniejsze blokady, zgodnie z informacją przy tej opcji.

Ograniczenia narzędzia
  • Obrazy PNG, JPG i WebP: do 15 MB i 24 megapikseli.
  • Próbkowanie daje przybliżone kolory, a nie dokładny spis wszystkich pikseli.
  • Paleta sama nie gwarantuje dostępności interfejsu. Sprawdź kontrast rzeczywistych zestawień tekstu i tła.
  • Zdjęcie i kolory pozostają w bieżącej karcie; link do narzędzia nie odtwarza wyniku.

Źródła i aktualizacja

Umieść to narzędzie na swojej stronie

Skopiuj kod i wklej go w swoim artykule. Narzędzie zadziała na Twojej stronie, a pod nim pojawi się link do źródła. Za darmo, bez rejestracji.

Motyw:
Podgląd widgetu ↗