Generator palet kolorow

Piekne palety 5 kolorow — spacja do generowania, blokada do zachowania, ekstrakcja z obrazow

Harmonia:

Wyodrebnij kolory z obrazu

📁 Kliknij, aby przeslac lub przeciagnij obraz

JPG, PNG, WebP — do 10 MB

Twoj obraz nigdy nie opuszcza twojego urzadzenia — wszystkie obliczenia odbywaja sie w przegladarce.

Eksportuj palete


      

    


    
    

      

        
Kontrola kontrastu WCAG

        

      

    


    
    

      

        
Zapisane palety 

        

          Wyczysc wszystkie zapisane palety?
          
          
        

        

      

    


    
    

    
    

      
Jak dziala generowanie palet

      
Kazda paleta jest generowana za pomoca przestrzeni kolorow HSL — Barwa (0–360°), Nasycenie (0–100%) i Jasnosc (0–100%). HSL jest intuicyjny dla zasad harmonii, poniewaz relacje barw sa oparte na odleglosciach katowych wokol kola barw.


      

        

          

            

            

            

          

          
Analogiczna

          
Barwy w odleglosci 30° od siebie. Harmonijna i uspokajajaca. Swietna do motywow natury i oceanu.

        

        

          

            

            

            

          

          
Dopelniajaca

          
Dwie barwy odlegle o 180°. Wysoki kontrast i zywotnosc. Czesto stosowana w brandingu sportowym.

        

        

          

            

            

            

          

          
Triadyczna

          
Trzy barwy rownomiernie rozmieszczone co 120°. Zbalansowane, ale kolorowe. Dobre dla zabawnych marek.

        

        

          

            

            

            

          

          
Monochromatyczna

          
Ta sama barwa, rozne nasycenie i jasnosc. Elegancka i spojna. Idealna do minimalistycznego designu.

        

        

          

            

            

            

          

          
Dzielone dopelnienie

          
Jedna barwa podstawowa plus dwie barwy oddalone o 150° po obu stronach. Kontrast bez napiecia.

        

        

          

            

            

            

            

          

          
Tetriadyczna

          
Cztery barwy co 90°. Bogata i zlozaona. Dziala najlepiej, gdy jeden kolor dominuje.

        

      


      
Przyklad — paleta analogiczna

      
Barwa startowa: H = 210° (niebieski). Regula analogiczna: 5 barw w odstepach 15°.
Barwy: 195°, 205°, 215°, 225°, 235°.
Nasycenie: zmienne od 55% do 70% dla glebokosci. Jasnosc: zmienne od 45% do 70% dla zakresu.
Wynik: spojny gradient bledekitny przypominajacy ocean z naturalnym kontrastem.

    


    
    

    
    

      
Wskazowki dotyczace palet kolorow dla projektantow

      
    
        
  • Stosuj regule 60-30-10. Uzyj dominujacego koloru w 60% projektu (tla, duze obszary), drugorzednego w 30% (sekcje, panele UI) i akcentowego w 10% (CTA, wyroznienia). Paleta 5-kolorowa naturalnie odpowiada tej regule.
    • 
        
  • Zawsze sprawdzaj kontrast dla tekstu. Piekna paleta moze nie spelniac wymagan WCAG AA, jesli kolor tekstu i tlo nie maja co najmniej wspolczynnika kontrastu 4,5:1. Uzyj wbudowanego narzedzia do sprawdzania kontrastu powyzej.
    • 
        
  • Ogranicz palete w produkcji. Dostepnosc 5 kolorow nie oznacza uzycia wszystkich na kazdym ekranie. Wiekszos dopracowanych projektow dominujaco uzywa 2–3 kolorow, rezerwujac pozostale na specyficzne momenty.
    • 
        
  • Najpierw zablokuj kolor marki. Jesli masz podstawowy kolor marki, kliknij ikone blokady na tym probce przed ponownym generowaniem — narzedzie zbuduje harmonijna palete wokol twojego zablokowanego koloru.
    • 
        
  • Ekstrakcja z obrazow dla dopasowania nastroju. Przeslij zdjecie oddajace nastroj, dla ktorego projektujesz (krajobraz, zdjecie produktu, obraz lifestylowy) — wyodrebniona paleta juz bedzie emocjonalnie zgodna z kierunkiem twojej marki.
    • 
      

    


    
    

      
Czesto zadawane pytania

      

        
Palety uzywaja zasad harmonii HSL (Barwa, Nasycenie, Jasnosc). Przykladowo Analogiczna wybiera barwy w odleglosci 30° od siebie, Dopelniajaca uzywa barw oddalonych o 180°, a Triadyczna wybiera trzy barwy oddalone o 120°. Nasycenie i jasnosc sa zmienne, aby tworzyc wizualnie przyjemny kontrast w obrebie kazdej palety.

        
Nie — twoj obraz nigdy nie opuszcza twojego urzadzenia. Narzedzie uzywa Canvas API przegladarki do lokalnego odczytu danych pikseli i ekstrakcji dominujacych kolorow za pomoca algorytmu grupowania czestotliwosci. Bez serwera, bez przeslania, bez sledzenia.

        
Kliknij bezposrednio na probke koloru lub jej etykiete z kodem hex, aby skopiowac kod hex do schowka. Krotko pojawia sie komunikat potwierdzajacy.

        
Mozesz eksportowac jako wlasciwosci niestandardowe CSS (--color-1 do --color-5), fragment konfiguracji Tailwind CSS, zmienne SCSS, obiekt JSON lub lista hex oddzielona przecinkami. Kliknij dowolny przycisk eksportu, aby natychmiast skopiowac do schowka.

        
Narzedzie do sprawdzania kontrastu wyswietla odznaki WCAG AA (zdany/niezdalny) dla kazdego koloru palety renderowanego jako tekst na bialym (#fff) i czarnym (#000) tle. Kolory spelniajace wspolczynnik 4,5:1 dla normalnego tekstu pokazuja zielona odznake AA ✓.

        
Do 50 palet mozna zapisac w localStorage twojej przegladarki. Utrzymuja sie miedzy sesjami. Mozesz przegladac, wczytywac lub usuwac zapisane palety z panelu Historii.