Generator palet kolorów
Wybierz kolor bazowy i harmonię — otrzymasz gotową paletę z kodami HEX, RGB i HSL, eksportem do CSS i JSON oraz sprawdzeniem kontrastu WCAG.
Zaloguj się, aby korzystać z: Palety kolorów
Załóż konto i przez 7 dni korzystaj ze wszystkich narzędzi za darmo. Potem 10 zł / miesiąc — z możliwością anulowania w dowolnym momencie. Twoje pliki i tak nigdy nie opuszczają przeglądarki.
Zobacz też dokumentację narzędzia.
Generator palet kolorów online
Dobrze dobrana paleta to podstawa spójnej identyfikacji i czytelnego interfejsu. Narzędzie oblicza harmonie kolorów na kole barw (przestrzeń HSL) i od razu pokazuje kody, które wklejasz do projektu — w CSS, Figmie czy edytorze grafiki.
Rodzaje harmonii
- Komplementarna — dwa kolory naprzeciw siebie (180°), mocny kontrast.
- Analogiczna — sąsiednie barwy (±30°), spokojne, naturalne zestawienie.
- Triadyczna — trzy barwy rozstawione co 120°.
- Tetradyczna — cztery barwy (0°, 60°, 180°, 240°).
- Rozdzielona komplementarna — kolor bazowy i dwa sąsiadujące z jego dopełnieniem.
- Monochromatyczna — jedna barwa w różnych jasnościach.
Kontrast WCAG
Kontrast tekstu do tła liczymy według WCAG 2.1 z względnej luminancji w przestrzeni sRGB. Poziom AA wymaga 4,5:1 dla zwykłego tekstu i 3:1 dla dużego, poziom AAA — odpowiednio 7:1 i 4,5:1.
Prywatność
Pliki ani dane nie opuszczają przeglądarki — wszystkie obliczenia wykonują się lokalnie na Twoim urządzeniu.
Najczęstsze pytania
Jak wyeksportować paletę do CSS?
W sekcji „Eksport” wybierz format CSS i skopiuj kod — dostaniesz blok :root ze zmiennymi --color-1, --color-2 itd.
Jak zapobiec zmianie wybranych kolorów przy losowaniu?
Zaznacz „Zablokuj” na karcie koloru. Losowanie zmieni pozostałe kolory, a zablokowane zostaną na swoim miejscu.
Co oznacza „AA duży”?
To spełnienie progu 3:1, który WCAG przewiduje dla dużego tekstu (co najmniej 24 px albo 19 px pogrubionego).
Czy mogę wpisać kolor w RGB lub HSL?
Tak — pole akceptuje zapis HEX (#f90 lub #ff9900), rgb(255, 153, 0) oraz hsl(36, 100%, 50%).