Generator palety kolorów
Zacznij od ulubionego koloru albo zdaj się na przypadek, a potem zachowaj odcienie, które pasują.
Zapieczętowane na tym urządzeniu
Działa w przeglądarce. Nic nie jest wysyłane.
Zapieczętowane
Twoja paleta
Ustawienia
Buduje paletę wokół koloru bazowego. Zablokowane kolory zostają.
Eksport
Jak to działa
-
Wybierz kolor bazowy lub losuj
Podaj kolor bazowy i wybierz harmonię albo naciśnij „Nowa paleta” (lub spację), aby dostać świeżą propozycję.
-
Zablokuj to, co ci się podoba
Zablokuj kolory, które chcesz zachować, i wygeneruj paletę ponownie: zmienią się tylko odblokowane. Kliknij próbkę, aby poprawić ją ręcznie.
-
Wyeksportuj paletę
Skopiuj ją jako zmienne CSS lub JSON do swojego kodu albo pobierz PNG, aby pokazać ją zespołowi.
Najczęściej zadawane pytania
Co oznaczają harmonie?
Pochodzą z koła barw. Kolory analogiczne leżą obok siebie i działają spokojnie. Kolory dopełniające leżą naprzeciwko siebie i tworzą kontrast. Harmonie dopełniająca dzielona, triadyczna i kwadratowa rozkładają kolory równomiernie na kole, dając żywsze palety. Monochromatyczna używa jaśniejszych i ciemniejszych wersji jednego odcienia.
Jak działa blokowanie?
Wybierz kłódkę pod kolorem, aby go zachować. Gdy wygenerujesz nową paletę, zablokowane kolory zostaną dokładnie na swoich miejscach, a nowe zostaną dobrane tak, aby do nich pasowały.
Dlaczego kolory są tak dobrze zrównoważone?
Palety powstają w OKLCH, przestrzeni barw zaprojektowanej z myślą o ludzkim wzroku. Obracanie odcienia w tej przestrzeni zachowuje spójną jasność i nasycenie, więc żaden kolor nie wydaje się nieoczekiwanie jaskrawy ani blady na tle pozostałych.
Jak użyć palety w moim projekcie?
Skopiuj eksport CSS i wklej go do arkusza stylów: dostaniesz zmienne takie jak --color-1, których możesz używać wszędzie. Eksport JSON zawiera każdy kolor w HEX, RGB i OKLCH, do design tokenów lub skryptów.
Czy mogę używać palet komercyjnie?
Tak. Kolory nie należą do nikogo, a palety utworzone tutaj możesz swobodnie wykorzystywać w projektach prywatnych i komercyjnych.