Generator palet kolorów: harmonijne schematy z jednego koloru bazowego
Z generatorem palet kolorów stworzysz online paletę z jednego koloru bazowego: wybierz kolor lub wpisz kod HEX, a natychmiast zobaczysz sześć harmonijnych schematów, każdy z wartościami HEX, RGB i HSL. Bezpłatnie, bez rejestracji i z obliczeniami wykonywanymi w całości w Twojej przeglądarce.
Autor: Justin Schuessler
Paleta kolorów gotowa? Możesz uruchomić stronę dzięki szybkiemu i niezawodnemu hostingowi WWW.
Wybierz kolor bazowy
Wszystkie poniższe schematy kolorów są natychmiast obliczane na podstawie tego koloru.
Dopełniający
Kolor bazowy oraz kolor leżący naprzeciwko niego na kole barw (180°) — mocny kontrast, dobry do akcentów.
Analogowy
Trzy sąsiadujące odcienie (±30°) — harmonijne i spokojne, często spotykane w naturze.
Triadyczny
Trzy równomiernie rozłożone odcienie (co 120°) — wyraziste, a zarazem zrównoważone.
Dopełniające rozdzielone
Kolor bazowy oraz dwa kolory sąsiadujące z jego kolorem dopełniającym — kontrast o mniejszym napięciu.
Czwórkowy
Cztery odcienie w dwóch parach kolorów dopełniających (odstęp 90°) — bogata paleta, najlepiej z jednym kolorem dominującym.
Monochromatyczny
Pięć wariantów tego samego koloru (rozjaśnione, stonowane i przyciemnione) — subtelnych i idealnie dopasowanych.
Kontynuuj z kolorem bazowym: Sprawdź kontrast · Zobacz w symulatorze daltonizmu · Otwórz w selektorze kolorów
Żadne dane nie są zapisywane ani przesyłane — każdy kolor jest obliczany wyłącznie w Twojej przeglądarce.
Funkcje
Możliwości generatora schematów kolorów
Wystarczy jeden kolor bazowy: generator obliczy na jego podstawie harmonijne zestawienia zgodne z zasadami teorii kolorów.
Sześć schematów kolorów na pierwszy rzut oka
Schematy dopełniający, analogiczny, triadyczny, rozdzielony dopełniający, tetradyczny i monochromatyczny są wyświetlane obok siebie i aktualizują się na bieżąco przy każdej zmianie koloru bazowego – bez przycisku generowania.
Swobodny wybór koloru bazowego
Pole wyboru nasycenia i jasności, suwak odcienia, pole kodu HEX (sześć znaków lub skrócona forma trzyznakowa) albo wartości RGB od 0 do 255. Możesz też zacząć od „Losowego koloru”.
HEX, RGB i HSL dla każdego koloru
Każda próbka koloru pokazuje kod HEX oraz wartości RGB i HSL. Kliknięcie próbki lub dużego podglądu koloru bazowego kopiuje kod HEX do schowka.
Udostępnij paletę kolorów przez link
Kolor bazowy jest automatycznie zapisywany w adresie URL, np. ?color=3b82f6. Każdy, kto otworzy link, zobaczy ten sam kolor bazowy i te same sześć schematów kolorów.
Obliczane w Twojej przeglądarce
Wszystkie kolory są obliczane w Twojej przeglądarce. Nie potrzebujesz konta, a wybrane kolory nie są zapisywane ani przesyłane na serwer.
Przejdź do kontrastu i dostępności
Pod schematami kolorów możesz jednym kliknięciem przekazać kolor bazowy do narzędzia do sprawdzania kontrastu, symulatora daltonizmu lub próbnika kolorów.
Jak to działa
Jak stworzyć paletę kolorów z koloru bazowego
Sześć kroków od pierwszego koloru do gotowej palety.
Krok 1
Wybierz kolor bazowy
Kliknij lub przeciągnij w polu wyboru koloru, aby ustawić nasycenie i jasność, a suwakiem poniżej ustaw odcień.
Krok 2
Wpisz kod HEX lub wartości RGB
Możesz też wpisać kod HEX, np. #3B82F6, lub trzy wartości RGB. Przycisk „Losowy kolor” pozwala zacząć od losowego koloru bazowego.
Krok 3
Porównaj schematy kolorów
Sześć schematów kolorów (dopełniający, analogiczny, triadyczny, rozdzielony dopełniający, tetradyczny i monochromatyczny) aktualizuje się natychmiast.
Krok 4
Kopiuj kod koloru
Kliknij próbkę koloru, aby skopiować jej kod HEX. Wartości RGB i HSL znajdziesz tuż pod nią.
Krok 5
Udostępnij paletę kolorów
Skopiuj adres z paska adresu. Kolor bazowy jest zapisany w linku jako ?color=… – dzięki temu później ponownie otworzysz paletę lub wyślesz ją komuś innemu.
Krok 6
Sprawdź kontrast
Otwórz kolor bazowy w narzędziu do sprawdzania kontrastu przez „Sprawdź kontrast” albo obejrzyj go w symulatorze daltonizmu.
Harmonia kolorów
Przegląd sześciu schematów kolorów
Każdemu odcieniowi odpowiada kąt od 0° do 360° na kole barw. Pięć z sześciu schematów powstaje przez obrócenie odcienia koloru bazowego o ustalony kąt, bez zmiany nasycenia i jasności. Schemat monochromatyczny zmienia natomiast tylko jasność.
Dopełniający
2 kolory · kolor bazowy + 180°
Kolor bazowy i kolor leżący dokładnie naprzeciwko niego na kole barw. Maksymalny kontrast, dobry do akcentów takich jak przyciski.
Analogowy
3 kolory · −30°, kolor bazowy, +30°
Kolor bazowy i jego dwa najbliższe kolory na kole barw. Spokojne, harmonijne połączenie.
Triadyczny
3 kolory · 0°, 120°, 240°
Trzy odcienie rozmieszczone równomiernie na kole barw. Żywsze niż schemat analogiczny, a zarazem zrównoważone.
Dopełniające rozdzielone
3 kolory · kolor bazowy + kolor dopełniający ±30°
Zamiast samego koloru dopełniającego schemat wykorzystuje dwa sąsiadujące z nim kolory. Daje niemal taki sam kontrast jak schemat dopełniający, ale jest mniej wyrazisty.
Czwórkowy
4 kolory · 0°, 90°, 180°, 270°
Dwie pary kolorów dopełniających oddalone o 90°. Bogaty schemat, który najlepiej wygląda z jednym dominującym kolorem.
Monochromatyczny
5 kolorów · ten sam odcień, pięć poziomów jasności
Odcień i nasycenie pozostają takie same, zmienia się tylko jasność – od ciemnej do jasnej. Pięć poziomów można odróżnić nawet przy bardzo jasnych lub ciemnych kolorach bazowych.
Tło
Znajdź kolor dopełniający i łącz kolory
Koło barw ekranu zamiast palety malarskiej
Generator obraca odcień na kole barw HSL, czyli w modelu kolorów używanym na ekranach. Czystej zieleni #00FF00 odpowiada tam magenta #FF00FF, a czystemu niebieskiemu #0000FF – żółty #FFFF00. Na klasycznym malarskim kole barw (czerwony, żółty, niebieski) pary te tworzą natomiast zielony i czerwony oraz niebieski i pomarańczowy. Obie odpowiedzi są poprawne w swoich modelach kolorów.
Rozkład kolorów w projekcie
Popularną wskazówką jest zasada 60-30-10: około 60 % koloru głównego, 30 % koloru drugorzędnego i 10 % koloru akcentowego. Generator nie stosuje jej automatycznie. Samodzielnie decydujesz, jaką rolę pełni każdy kolor schematu – na przykład kolor bazowy może być główny, a dopełniający akcentowy.
Harmonia nie oznacza czytelności
Harmonijny schemat kolorów nie gwarantuje odpowiedniego kontrastu tekstu względem tła. Zanim użyjesz wybranego zestawienia na stronie lub w aplikacji, sprawdź je w narzędziu do sprawdzania kontrastu. Link „Sprawdź kontrast” pod schematami kolorów przeniesie tam bezpośrednio Twój kolor bazowy.
Odkryj więcej
Więcej narzędzi do kolorów i dostępności
Wybór koloru
Przeliczaj kolory na bieżąco między HEX, RGB, HSL, HSV i CMYK, znajdź najbliższy nazwany kolor CSS i sprawdź kontrast WCAG względem czerni i bieli — wszystko w przeglądarce.
Autor: Justin Schuessler
Kontrola kontrastu
Obliczaj na bieżąco współczynnik kontrastu WCAG między dwoma kolorami i sprawdzaj zgodność z AA/AAA oraz wymaganiami dla komponentów UI — bezpośrednio w przeglądarce.
Autor: Justin Schuessler
Symulator daltonizmu
Zobacz na żywo, jak palety kolorów i własne obrazy są postrzegane przy protanopii, deuteranopii, tritanopii i achromatopsji — wszystko obliczane w przeglądarce.
Autor: Justin Schuessler
Próbnik kolorów z obrazu
Odczytaj kod koloru z obrazu: próbnik z lupą, HEX, RGB i HSL, paleta kolorów obrazu oraz wskazówka dotycząca kontrastu. Obraz pozostaje w przeglądarce.
Autor: Dimitri Heissler
FAQ
Częste pytania dotyczące Generator palet kolorów
Krótkie odpowiedzi na pytania o palety kolorów, harmonię kolorów i to narzędzie.
Ustaw nasycenie i jasność w polu wyboru koloru, wybierz odcień suwakiem albo wpisz kod HEX lub wartości RGB. Możesz też kliknąć „Losowy kolor”. Wszystkie sześć schematów kolorów aktualizuje się natychmiast, bez przycisku generowania. Każda próbka pokazuje wartości HEX, RGB i HSL, a kliknięcie kopiuje kod HEX.
Wpisz swój kolor jako kod HEX lub wartości RGB i sprawdź schemat „Dopełniający”: pokazuje kolor bazowy i kolor leżący naprzeciwko niego na kole barw (odcień obrócony o 180°). Generator korzysta z ekranowego koła barw HSL: czystej zieleni #00FF00 odpowiada magenta #FF00FF, a czystemu niebieskiemu #0000FF – żółty #FFFF00. Na klasycznym malarskim kole barw byłyby to odpowiednio czerwony i pomarańczowy.
Trzy kolory tworzą trzy z sześciu schematów: triadyczny (trzy odcienie oddalone od siebie o 120°, żywy i zrównoważony), analogiczny (kolor bazowy i jego sąsiedzi przy −30° i +30°, spokojny i harmonijny) oraz rozdzielony dopełniający (kolor bazowy i dwa kolory sąsiadujące z jego kolorem dopełniającym, kontrastowy, ale mniej wyrazisty). Wpisz kolor bazowy i porównaj wszystkie trzy schematy obok siebie.
Monochromatyczny schemat kolorów zachowuje jeden odcień i poziom nasycenia, zmieniając tylko jasność. Generator tworzy pięć poziomów jasności – od ciemnego do jasnego – które można odróżnić nawet przy bardzo jasnych lub ciemnych kolorach bazowych. Efekt jest subtelny i spójny, na przykład w tłach i większych obszarach.
Harmonijne połączenie nie musi być czytelne: problemem są zwłaszcza kolory tekstu i tła, które za mało różnią się jasnością. Przed użyciem zestawienia sprawdź je w narzędziu do sprawdzania kontrastu. Link „Sprawdź kontrast” pod schematami kolorów przeniesie tam bezpośrednio Twój kolor bazowy.
Zasada 60-30-10 to wskazówka projektowa: około 60 % koloru głównego, 30 % koloru drugorzędnego i 10 % koloru akcentowego. Generator nie stosuje jej automatycznie. Samodzielnie przypisujesz role kolorom schematu, na przykład wybierając kolor bazowy jako główny, a dopełniający jako akcentowy.
Tak. Kolor bazowy jest automatycznie zapisywany jako parametr w adresie URL, np. ?color=3b82f6. Skopiuj adres z paska adresu: każdy, kto otworzy link, zobaczy ten sam kolor bazowy i te same sześć schematów kolorów. Nie potrzebujesz do tego konta.
Z generatora palet kolorów korzystasz bezpłatnie i bez rejestracji. Wszystkie kolory są obliczane w Twojej przeglądarce, a wybrane kolory nie są zapisywane ani przesyłane na serwer. Po zamknięciu karty zachowasz dostęp do palety tylko przez wcześniej skopiowany link.
Masz dodatkowe pytania?
Kontakt z pomocą technicznąSzukasz serwera do kolejnego projektu?
VPS na ZAP-Hosting zapewnia ci pełną kontrolę nad twoją własną infrastrukturą — w tym dostęp SSH, zaporę sieciową i pełne uprawnienia root.
Bez konfiguracji. Bez ryzyka. Online w kilka sekund.
Szukasz więcej narzędzi? Zobacz wszystkie narzędzia do grafiki i projektowania
Preferowane źródło w Google
