Generator palety kolorów

Wygeneruj harmonijną paletę kolorów do projektu graficznego lub strony. Gotowe zestawy z kodami HEX do skopiowania — za darmo online.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Schemat kolorów

Format wyjścia

Kolor bazowy

Liczba kolorów 6

Dołącz metadane

Dołącz metadane Dodatkowe dane o kolorach

Podgląd palety & Kod

Kolory w palecie

6 szt.

Schemat

Analogiczny

Format wyjścia

Zmienne CSS

Kolor bazowy

#3B82F6

rgb(59, 130, 246)

hsl(217, 91%, 60%)

#3BB1F6

rgb(59, 177, 246)

hsl(202, 91%, 60%)

#3B83F6

rgb(59, 131, 246)

hsl(217, 91%, 60%)

#3B54F6

rgb(59, 84, 246)

hsl(232, 91%, 60%)

#513BF6

rgb(81, 59, 246)

hsl(247, 91%, 60%)

#70E5F4

rgb(112, 229, 244)

hsl(187, 86%, 70%)

Kod wyjściowy (CSS):

:root {
  --cp-1: #3B82F6; /* rgb(59, 130, 246) | hsl(217, 91%, 60%) */
  --cp-2: #3BB1F6; /* rgb(59, 177, 246) | hsl(202, 91%, 60%) */
  --cp-3: #3B83F6; /* rgb(59, 131, 246) | hsl(217, 91%, 60%) */
  --cp-4: #3B54F6; /* rgb(59, 84, 246) | hsl(232, 91%, 60%) */
  --cp-5: #513BF6; /* rgb(81, 59, 246) | hsl(247, 91%, 60%) */
  --cp-6: #70E5F4; /* rgb(112, 229, 244) | hsl(187, 86%, 70%) */
  /* base: #3B82F6 | scheme: analogous */
}

Ściąga: schematy kolorów obsługiwane przez silnik

Schemat	Rozrzut barw (wg silnika)	Przykładowa paleta dla #3B82F6 (5 kolorów)
Analogiczny	barwy sąsiednie: −30°, −15°, baza, +15°, +30°	`#3B82F6` `#3BB1F6` `#3B83F6` `#3B54F6` `#513BF6`
Dopełniający	baza + barwa przeciwna (+180°)	`#3B82F6` `#F6AE3B` `#70A3F4` `#F4C170` `#1452B7`
Triadowy	baza +120° i +240° — trzy równe barwy	`#3B82F6` `#F63B83` `#83F63B` `#70A3F4` `#F470A3`
Tetradowy	baza +90°, +180°, +270° — dwie pary	`#3B82F6` `#F63BE0` `#F6AE3B` `#3BF651` `#70A3F4`
Monochromatyczny	jedna barwa, zmienne nasycenie i jasność	`#0C264F` `#11479C` `#1166EE` `#5795F9` `#A3C6FF`
Odcienie	jedna barwa, tylko jasność (12–88%)	`#03183B` `#073E97` `#0B64F4` `#689FF8` `#C4DAFC`

Palety w ostatniej kolumnie liczy dokładnie ten sam silnik, który obsługuje formularz, dla bazowego #3B82F6. W schematach wielobarwnych pierwszy swatch to zawsze kolor bazowy w oryginale; monochromatyczny i odcienie startują z tej samej barwy, płynnie zmieniając nasycenie i jasność (od ciemnych do jasnych).

Paleta kolorów a kontrast i dostępność

Kontrast to nie detal

Wytyczne WCAG wymagają kontrastu co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego — paleta z generatoryma jest startem, ale kontrast pary tekst–tło sprawdź osobno. Podpisy na swatchach powyżej dobierane są według progu jasności YIQ ((299·R + 587·G + 114·B) / 1000), więc zawsze czytają się na jasnym lub ciemnym tle.

Który schemat kiedy

Analogiczne barwy dają spokojne, spójne tła i sekcje; dopełniający — mocny akcent na przycisk CTA; triadowy i tetradowy są dynamiczne, ale wymagają wagi (jedna barwa dominująca). Monochromatyczny i odcienie budują hierarchię bez wprowadzania nowych barw — idealne na stany hover, disabled i tła kart.

Zmienne CSS w praktyce

Format „Zmienne CSS” zwraca blok :root — wklej go na górę arkusza stylów, a kolory używaj jako var(--cp-1) i kolejnych. Przy zmianie palety wystarczy podmienić kilka wierszy w jednym miejscu, zamiast szukać HEX-ów po całym projekcie.

Jak czytać paletę

Każdy swatch pokazuje HEX, RGB i HSL — HSL najlepiej opisuje rolę koloru (odcień, nasycenie, jasność), więc łatwiej dobrać warianty ręcznie. Kliknięcie swatcha kopiuje HEX do schowka, a cały kod wyjściowy trafia do pliku przyciskiem „Pobierz plik”.

Wskazówka: paleta przelicza się na żywo przy przesuwaniu suwaka liczby kolorów i wpisywaniu HEX — kafelki nad podglądem pokazują aktualny schemat, format i kolor bazowy.

Oceń to narzędzie:

5,0 / 5 · 1 ocena

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator palety kolorów — Projektowanie harmonijnych zestawów barw

Nasz darmowy generator palety kolorów to profesjonalne narzędzie online dedykowane dla projektantów stron internetowych, grafików, programistów frontendowych oraz specjalistów od brandingu. Umożliwia ono szybkie i intuicyjne tworzenie spójnych, harmonijnych i estetycznych schematów kolorystycznych do wykorzystania w projektach cyfrowych i drukowanych. Wygeneruj unikalne zestawy kolorów, sprawdź ich kody HEX, RGB oraz HSL i nadaj swojej marce wyjątkowy charakter wizualny.

Jak działa generator palety kolorów i jak znaleźć idealne inspiracje?

Projektowanie palety kolorów opiera się na zasadach teorii barw oraz psychologii kolorów. Nasz generator wykorzystuje zaawansowane algorytmy matematyczne oparte na kole barw, aby automatycznie dobierać odcienie, które idealnie ze sobą współgrają. Narzędzie pozwala na wygenerowanie losowej palety za pomocą jednego kliknięcia, co jest świetnym źródłem inspiracji na początku procesu kreatywnego, jak również na zablokowanie wybranego koloru bazowego i automatyczne dopasowanie do niego pozostałych składowych palety.

Wybierając kolory, warto pamiętać o ich oddziaływaniu emocjonalnym. Niebieski budzi zaufanie i profesjonalizm, dlatego jest chętnie stosowany przez instytucje finansowe. Czerwień symbolizuje energię i dynamizm, przyciągając wzrok do elementów wezwania do działania (CTA). Zieleń kojarzy się z naturą, zdrowiem i ekologią. Nasz kalkulator kolorów ułatwia eksperymentowanie z jasnością, nasyceniem i kontrastem, dzięki czemu stworzysz paletę dostosowaną do celów biznesowych i grupy docelowej Twojego projektu.

Najważniejsze rodzaje harmonii kolorystycznych stosowane w designie

Aby paleta kolorów wyglądała profesjonalnie, powinna opierać się na jednym z klasycznych schematów harmonii barw. Pierwszym z nich jest schemat monochromatyczny, który wykorzystuje różne odcienie, tony i nasycenia jednego koloru bazowego. To bezpieczny, elegancki i bardzo spójny wybór, minimalizujący ryzyko chaosu wizualnego. Kolejną opcją są kolory analogowe (pokrewne), leżące obok siebie na kole barw. Tworzą one naturalne, miłe dla oka przejścia, często spotykane w przyrodzie.

Dla projektów wymagających wyrazistości idealnym wyborem jest harmonia komplementarna (dopełniająca), oparta na kolorach leżących po przeciwnych stronach koła barw (np. niebieski i pomarańczowy). Zapewnia ona maksymalny kontrast i dynamiczny wygląd, doskonale wyróżniając kluczowe elementy interfejsu. Triada kolorystyczna z kolei wykorzystuje trzy barwy równomiernie rozłożone na kole barw, co pozwala na stworzenie żywego, wielobarwnego projektu, w którym jednak żaden z kolorów nie dominuje nadmiernie nad pozostałymi.

Jak wdrożyć wygenerowaną paletę kolorów w projekcie internetowym i kodzie CSS

Gdy stworzysz już swoją wymarzoną paletę kolorów, kolejnym krokiem jest jej prawidłowa implementacja w kodzie źródłowym strony internetowej lub aplikacji. Najlepszą praktyką we współczesnym web designie jest zdefiniowanie kolorów jako zmiennych CSS (CSS Custom Properties) w sekcji :root. Ułatwia to późniejsze zarządzanie stylem graficznym witryny i pozwala na błyskawiczne wprowadzenie zmian globalnych lub wdrożenie ciemnego motywu (Dark Mode) bez konieczności edycji setek linii kodu w arkuszu stylów.

Podczas wdrażania palety pamiętaj o zasadzie 60-30-10, która jest złotym standardem w projektowaniu wnętrz i interfejsów użytkownika. Zgodnie z tą regułą, sześćdziesiąt procent powierzchni strony powinien zajmować kolor dominujący (najczęściej jasne lub ciemne tło), trzydzieści procent kolor uzupełniający (teksty, sekcje, menu), a jedynie dziesięć procent kolor akcentowy (przyciski, linki, ważne ikony). Pozwala to zachować optymalny balans i sprawia, że strona jest czytelna i przejrzysta dla użytkowników.

Najczęściej zadawane pytania

Czym różnią się kody kolorów HEX, RGB i HSL?

HEX to szesnastkowy zapis koloru (np. #FF5733) powszechny in HTML i CSS. RGB określa proporcje światła czerwonego, zielonego i niebieskiego (0-255). HSL definiuje kolor za pomocą trzech parametrów: odcienia (Hue), nasycenia (Saturation) i jasności (Lightness), co ułatwia ręczną modyfikację kolorów w CSS.

Jak zapewnić odpowiedni kontrast kolorów dla osób niedowidzących?

Należy przestrzegać standardów dostępności WCAG 2.1. Zgodnie z nimi minimalny kontrast tekstu do tła powinien wynosić 4.5:1 dla standardowego tekstu oraz 3:1 dla dużego tekstu. Możesz to sprawdzić za pomocą darmowych analizatorów kontrastu online.

Czy mogę wygenerować paletę kolorów na podstawie przesłanego zdjęcia?

Tak, nasz generator posiada funkcję ekstrahowania kolorów z plików graficznych. Wystarczy przesłać zdjęcie, a algorytm automatycznie przeanalizuje piksele i wskaże dominujące oraz najlepiej pasujące barwy, tworząc spójną paletę.

Ile kolorów powinna zawierać profesjonalna paleta na stronie WWW?

Optymalna paleta kolorów dla strony internetowej zazwyczaj składa się z 3 do 5 kolorów. Zbyt duża liczba różnych barw może rozpraszać użytkownika i sprawić, że strona będzie wyglądać nieprofesjonalnie i chaotycznie.

Jak zapisać wygenerowaną paletę kolorów na później?

Nasze narzędzie pozwala na wyeksportowanie palety do formatu PDF, obrazu PNG, kodu CSS/SASS, a także na skopiowanie unikalnego adresu URL, pod którym Twoja paleta będzie zawsze dostępna do ponownego wglądu i edycji.