Generator palet kolorów
- Pliki nie opuszczają urządzenia
- Działa w przeglądarce
- Za darmo, bez konta, bez znaku wodnego
3b82f6
e24956
3ba01b
Jak używać: Generator palet kolorów
Twórz palety kolorów na trzy sposoby: reguły harmonii od koloru bazowego, losowe palety, które możesz zablokować i wylosować ponownie, albo 11-stopniową skalę odcieni od 50 do 950 jak w Tailwindzie. Kolory są liczone w OKLCH, a każda paleta eksportuje się do CSS, Tailwind v3 albo v4, JSON, .gpl albo .ase.
- 1
Wybierz Tryb: Harmonia, Losowa albo Odcienie.
- 2
Dla Harmonii albo Odcieni ustaw Kolor bazowy, a potem wybierz Regułę albo Nazwę koloru i stopień, przy którym Zachować bazę.
- 3
Dla Losowej kliknij Generuj albo naciśnij Spację i zablokuj kolory, które chcesz zachować, zanim wygenerujesz ponownie.
- 4
Najedź na kolor i kliknij ikonę kopiowania; w Harmonii możesz też zrobić z niego nowy kolor bazowy.
- 5
W Eksporcie wybierz HEX, CSS, Tailwind v3, Tailwind v4 albo JSON i skopiuj kod albo pobierz .gpl albo .ase.
Częste pytania
Dlaczego harmonie są liczone w OKLCH?
Odcienie są obracane w OKLCH, więc każdy kolor zachowuje postrzeganą jasność i żywość koloru bazowego. Obrót w HSL sprawiłby, że żółcie wyglądałyby dużo jaśniej niż błękity.
Jak budowane są odcienie od 50 do 950?
Jasność idzie krzywą zbliżoną do własnych palet Tailwinda, a chroma osiąga szczyt około 500–600. Kolor bazowy jest zachowany dokładnie na swoim stopniu; Auto wybiera stopień najbliższy jego jasności.
Czy mogę wrócić do wcześniejszej losowej palety?
Tak. Użyj Poprzedniej palety i Następnej palety; ostatnie 50 palet zostaje, dopóki strona jest otwarta, ale nic nie jest zapisywane po zamknięciu.
Ile kolorów może mieć paleta?
Losowe palety mają od 2 do 10 kolorów (użyj przycisków − i +). Reguły harmonii dają stałą liczbę, na przykład 2 dla dopełniających i 5 dla analogicznych albo monochromatycznych, a Odcienie zawsze dają 11.
Jak wygląda eksport Tailwind v4?
Blok @theme ze zmiennymi --color-*, gotowy do wklejenia w CSS. Odcienie są zapisywane jako wartości oklch() o nazwach takich jak --color-brand-500; pozostałe tryby używają HEX.