Generator palet kolorów

Dostęp do narzędzi grafikit.pl wymaga konta z aktywnym okresem próbnym lub subskrypcją — szczegóły znajdziesz na stronie Konto, okres próbny i subskrypcja. Samo narzędzie otwierasz pod adresem /color-palette.php.

Do czego służy generator

Podajesz jeden kolor bazowy, a generator od razu tworzy z niego sześć zestawień według zasad harmonii barw: komplementarne, analogiczne, triadyczne, split-komplementarne, tetradyczne i monochromatyczne. Każdy kolor możesz skopiować jednym kliknięciem, a całą paletę wyeksportować jako zmienne CSS lub plik JSON. Na dole strony jest osobny kalkulator kontrastu WCAG.

Szybki start

1. Otwórz Generator palet kolorów. Od razu widzisz sześć palet policzonych dla koloru domyślnego #FE9923.
2. Zmień Kolor bazowy: kliknij próbkę koloru, wpisz kod HEX albo użyj przycisku Losowy kolor. Wszystkie palety odświeżają się natychmiast.
3. Kliknij wybrany kolor (próbkę), aby skopiować jego kod do schowka — pod próbką na chwilę pojawi się „Skopiowano!”.
4. Aby skopiować całą paletę naraz, użyj przycisku Kopiuj kody przy jej nazwie.
5. Do kodu strony przenieś palety przyciskami w sekcji Eksport całej palety.

Kolor bazowy

Kolor bazowy (próbka koloru)

Systemowy wybór koloru (input type="color"); domyślnie #FE9923. Podczas przeciągania w oknie wyboru palety odświeżają się na bieżąco. Wygląd okna wyboru zależy od przeglądarki i systemu.

Kod HEX koloru bazowego (pole tekstowe)

Pole obok próbki, maksymalnie 7 znaków. Wpisz kod w postaci #FE9923, FE9923 lub skróconej #F93 (znak # możesz pominąć). Palety odświeżają się w momencie, gdy wpisany kod jest poprawny (3 lub 6 cyfr szesnastkowych). Niepoprawne wartości są ignorowane, a po opuszczeniu pola (kliknięciu gdzie indziej) pole wraca do wartości z próbki koloru.

Losowy kolor

Przycisk losuje dowolny kolor i ustawia go jako bazowy (zarówno w próbce, jak i w polu HEX).

Format kopiowanych kodów

Format kopiowanych kodów

Lista wyboru z trzema opcjami: HEX (#FE9923) (domyślnie), RGB (rgb(254, 153, 35)), HSL (hsl(32, 99%, 57%)). Zmiana formatu natychmiast zmienia kody wyświetlane pod każdą próbką oraz to, co trafia do schowka po kliknięciu próbki lub przycisku Kopiuj kody. Kody HEX są wyświetlane wielkimi literami; w HSL wartości są zaokrąglone do liczb całkowitych.

Format nie wpływa na eksport CSS i JSON — tam zawsze używany jest HEX wielkimi literami.

Sześć palet: jak powstają kolory

Wszystkie palety są liczone w modelu HSL: zmieniany jest odcień (obrót na kole barw) lub jasność, a nasycenie bazowe zostaje bez zmian. Obok nazwy każdej palety widać małe kropki podglądu, a pod nimi rząd próbek do kliknięcia.

Kolory powstają z przeliczeń HSL↔RGB, dlatego pierwsza próbka w palecie może różnić się od wpisanego kodu o 1 w składowej RGB (zaokrąglenie). Nie ma suwaków do ręcznej zmiany harmonii ani liczby kolorów — zestawy są stałe.

Kopiowanie kolorów

Próbka koloru (klik)

Kopiuje kod pojedynczego koloru w wybranym Formacie kopiowanych kodów. Kod pod próbką zmienia się na 1,4 s w „Skopiowano!” lub — gdy przeglądarka odmówi dostępu do schowka — w „Nie udało się”. Każda próbka jest przyciskiem, więc działa także z klawiatury (Tab, potem Enter lub Spacja).

Kopiuj kody

Przycisk przy każdej palecie. Kopiuje wszystkie kolory tej palety w jednej linii, oddzielone przecinkami i spacją, np. #FE9923, #2399FE, … (w formacie wybranym na liście). Etykieta przycisku na chwilę zmienia się na „Skopiowano!” lub „Nie udało się”.

Eksport całej palety (CSS i JSON)

Sekcja Eksport całej palety obejmuje wszystkie sześć palet naraz, dla aktualnego koloru bazowego.

Kopiuj CSS

Kopiuje do schowka blok zmiennych CSS, np.
:root {
  --komplementarna-1: #FE9923;
  --komplementarna-2: #2399FE;
…
}
Nazwy zmiennych tworzone są z nazwy palety (bez polskich znaków i wielkich liter) oraz numeru koloru: komplementarna, analogiczna, triadyczna, split-komplementarna, tetradyczna, monochromatyczna.

Kopiuj JSON

Kopiuje obiekt JSON, w którym kluczami są te same nazwy palet, a wartościami tablice kodów HEX wielkimi literami.

Pobierz .css

Zapisuje plik paleta.css z tą samą zawartością co Kopiuj CSS.

Pobierz .json

Zapisuje plik paleta.json z tą samą zawartością co Kopiuj JSON.

Przyciski kopiowania pokazują na chwilę „Skopiowano!” (albo „Nie udało się”). Eksport zawsze odpowiada bieżącemu kolorowi bazowemu.

Kontrast WCAG

Sekcja Kontrast WCAG działa niezależnie od palet: ma własne próbki koloru i przelicza się na żywo przy każdej zmianie.

Kolor tekstu

Próbka koloru, domyślnie #1A1A22.

Kolor tła

Próbka koloru, domyślnie #FE9923.

Wynik

Pod polami pojawia się: pogrubiony „Przykładowy tekst 18 pkt” pokazany w wybranych kolorach, linia „Współczynnik kontrastu: X:1” (z dwoma miejscami po przecinku), a poniżej wyniki dla czterech progów:

Rodzaj tekstu	AA (próg)	AAA (próg)
Tekst normalny	4,5:1	7:1
Tekst duży	3:1	4,5:1

Każdy próg jest oznaczony „✔ spełnia” lub „✘ nie spełnia”.

Kontrast liczony jest z względnej luminancji obu kolorów według wzoru WCAG (kolejność kolorów nie ma znaczenia). Dla domyślnych kolorów wynik to ok. 8,06:1 — spełnione są oba progi, także AAA dla tekstu normalnego.

Ograniczenia

• Jeden kolor bazowy i sześć stałych zestawień — bez zapisywania własnych palet, bez dodawania i usuwania kolorów w palecie.
• Kontrast WCAG liczy tylko dla pary „tekst/tło”, dla kolorów pełnych (bez przezroczystości).
• Wygląd i funkcje okna wyboru koloru zależą od przeglądarki.
• Kopiowanie do schowka wymaga zgody przeglądarki. Gdy jej nie ma, zobaczysz komunikat „Nie udało się”.
• Ustawienia (kolor, format) nie są zapamiętywane — po odświeżeniu strony wracają wartości domyślne.
• Wymagany jest włączony JavaScript.

Typowe scenariusze

Jak stworzyć paletę z jednego koloru i sprawdzić kontrast

1. Wpisz w polu kodu HEX kolor marki (np. #FE9923) albo wybierz go w próbce Kolor bazowy.
2. Przejrzyj palety. Do interfejsu strony zwykle wystarcza Monochromatyczna (odcienie tła i tekstu) oraz Komplementarna (kolor akcentu).
3. Wybierz kolor tekstu i kolor tła, które chcesz zestawić. Skopiuj kod pierwszego, klikając próbkę (format HEX).
4. Przewiń do sekcji Kontrast WCAG. W polu Kolor tła otwórz okno wyboru koloru i wklej kod; to samo zrób z Kolor tekstu.
5. Sprawdź współczynnik. Dla tekstu podstawowego celuj w AA (co najmniej 4,5:1), a dla nagłówków i dużego tekstu w co najmniej 3:1. Jeśli „✘ nie spełnia”, wybierz ciemniejszy lub jaśniejszy odcień z palety monochromatycznej i sprawdź ponownie.
6. Gdy zestaw jest gotowy, skopiuj paletę przyciskiem Kopiuj CSS.

Przeniesienie palety do projektu CSS

1. Ustaw kolor bazowy.
2. W sekcji Eksport całej palety kliknij Pobierz .css (plik paleta.css) albo Kopiuj CSS.
3. Wklej zmienne do arkusza stylów i używaj ich np. jako color: var(--monochromatyczna-5);.

Paleta w formacie dla narzędzia graficznego

1. Z listy Format kopiowanych kodów wybierz format wymagany przez Twoje narzędzie (HEX, RGB lub HSL).
2. Przy wybranej palecie kliknij Kopiuj kody i wklej listę do dokumentu lub pliku projektowego.

Kolory w innych narzędziach grafikit.pl

Skopiowany kod koloru możesz wkleić w polach koloru edytora napisów, użyć do zmiany kolorów logo w konwerterze do SVG (sekcja Kolory w pliku SVG) albo jako kolory gradientu w generatorze gradientów.

Rozwiązywanie problemów

Palety nie zmieniają się po wpisaniu kodu

Kod musi mieć 3 lub 6 cyfr szesnastkowych (0–9, A–F), np. #FE9923. Wartości typu #FE99 lub nazwy kolorów nie są akceptowane.

Po kliknięciu próbki pojawia się „Nie udało się”

Przeglądarka nie dała dostępu do schowka. Sprawdź uprawnienia strony albo użyj innej przeglądarki; kod zawsze możesz przepisać z napisu pod próbką.

Próbka koloru obok pola HEX ma inny kolor niż palety

To zachowanie przy ręcznym wpisywaniu kodu (patrz uwaga w sekcji „Kolor bazowy”). Palety zawsze liczone są z kodu wpisanego w polu.

Kody w eksporcie CSS są w HEX, a w kopiowaniu w RGB

Eksport CSS/JSON nie uwzględnia ustawienia Format kopiowanych kodów.

Kalkulator kontrastu nie reaguje na zmianę koloru bazowego

Jest niezależny od palet — ustaw jego kolory osobno.

Najczęstsze pytania

Dlaczego palety mają różną liczbę kolorów?

Zależy to od rodzaju harmonii: triadyczna ma 3 kolory, tetradyczna 4, pozostałe po 5 (patrz tabela w sekcji „Sześć palet”).

Czy mogę zapisać palety na koncie?

W tym narzędziu nie ma zapisu — skopiuj lub pobierz wynik.

Jaka jest różnica między AA i AAA?

AA to podstawowy poziom wymagany dla większości stron (4,5:1 dla tekstu normalnego, 3:1 dla dużego), AAA to poziom podwyższony (7:1 i 4,5:1).

Prywatność

Wszystkie obliczenia kolorów (HEX, RGB, HSL, obroty odcienia, kontrast) wykonują się lokalnie w przeglądarce. Wybrane kolory nie są wysyłane na serwer ani zapisywane.

Nie znalazłeś odpowiedzi? Napisz do nas przez formularz kontaktowy.