Generator schematów kolorów

Wybierz kolor bazowy i uzyskaj pełną paletę, komplementarną, analogiczną, triadyczną, tetradyczną lub monochromatyczną. Kopiuj dowolną próbkę jako HEX, RGB lub HSL. Nic nie opuszcza przeglądarki.

Jak działa Generator schematów kolorów

Generator schematów kolorów buduje kompletne palety kolorów z pojedynczego wybranego koloru bazowego: dopełniające (naprzeciwko na kole barw), analogiczne (sąsiednie odcienie), triadyczne (trzy równomiernie rozłożone), tetradyczne (cztery odcienie w dwóch parach dopełniających) i monochromatyczne (różna jasność i nasycenie tego samego odcienia). Cała logika palety działa w przeglądarce; nic z tego co wprowadzasz, nie opuszcza Twojego urządzenia.

Każda wygenerowana paleta pokazuje próbki z wartościami HEX i RGB gotowymi do skopiowania. Daje to projektantom punkt wyjścia oparty na teorii kolorów, a nie na zgadywaniu. Ponieważ generator działa offline po pierwszym załadowaniu strony, możesz swobodnie eksperymentować z kolorami marki podczas spotkania z klientem, nie potrzebując połączenia sieciowego. Wpisz swój kolor bazowy w dowolnej notacji, jaką masz, HEX, RGB lub HSL, a każda wygenerowana próbka zostanie zwrócona we wszystkich trzech, więc możesz skopiować tę, której oczekuje Twoje narzędzie projektowe.

Napisał Bastien Sulyan

Generator schematów kolorów: instrukcja krok po kroku

Wybierz kolor bazowy za pomocą selektora kolorów lub wpisując wartość HEX.
Wybierz typ harmonii z zakładek: dopełniający, analogiczny, triadyczny, tetradyczny lub monochromatyczny.
Próbki palety pojawiają się natychmiast z wartościami HEX i RGB.
Kliknij dowolną próbkę, aby skopiować jej wartość HEX do schowka.
Dostosuj kolor bazowy, aby przeglądać warianty i obserwować aktualizację całej palety.

Typowe zastosowania

Projektant rozpoczynający nową tożsamość marki wybiera kolor podstawowy i generuje paletę triadyczną, aby zaproponować klientowi kombinacje trzech kolorów.
Programista budujący motyw ciemny używa palety monochromatycznej do generowania zakresu jasnych i ciemnych odcieni z jednego koloru marki.
Autor treści wybiera paletę analogiczną, aby wybrać kolory akcentujące do prezentacji, które są spójne bez ostrego kontrastu.
Projektant interfejsu używa palety dopełniającej, aby zidentyfikować kolor akcentu o wysokim kontraście, który wyróżnia się na tle podstawowego koloru marki.

Często zadawane pytania

Jak działa paleta dopełniająca?

Kolor dopełniający to odcień bezpośrednio naprzeciwko koloru bazowego na kole barw HSL, 180 stopni dalej. Umieszczenie kolorów dopełniających obok siebie tworzy maksymalny kontrast. Narzędzie pokazuje kolor bazowy i jego dopełnienie, a także jaśniejsze i ciemniejsze warianty każdego z nich.

Jaka jest różnica między paletą triadyczną a tetradyczną?

Paleta triadyczna używa trzech odcieni równomiernie rozmieszczonych co 120 stopni na kole barw. Paleta tetradyczna używa czterech odcieni co 90 stopni, tworząc dwie pary dopełniające (zwane też podwójnymi dopełniającymi lub kwadratowymi). Palety tetradyczne są bardziej złożone i wymagają starannego zrównoważenia proporcji, aby uniknąć wizualnego szumu.

Czy wybrane kolory są gdzieś przechowywane lub wysyłane?

Nie. Generowanie palety to arytmetyka na reprezentacji HSL koloru bazowego: obracanie kąta odcienia o stałe wartości, przesuwanie jasności i nasycenia. Każde obliczenie działa lokalnie w przeglądarce; nic nie jest wysyłane na żaden serwer.

Czy mogę wyeksportować paletę jako plik CSS lub plik tokenów projektowych?

Narzędzie aktualnie pokazuje próbki z kopiowalnymi wartościami HEX i RGB. Aby uzyskać pełny eksport niestandardowych właściwości CSS lub JSON tokenów projektowych, skopiuj wartości ręcznie do pliku tokenów lub CSS projektu. Dedykowany przycisk eksportu może zostać dodany w przyszłej aktualizacji.

Czy ten generator stosuje się do jakiegoś formalnego standardu teorii kolorów?

Obliczenia palety używają standardowych formuł rotacji odcienia w przestrzeni kolorów HSL, co jest konwencją w większości narzędzi do projektowania stron internetowych. Dokładna jednorodność percepcyjna HSL ma ograniczenia w porównaniu z LAB lub OKLCH, ale rotacje HSL tworzą palety zgodne z konwencjami koła barw, których projektanci zazwyczaj oczekują.

Powiązane narzędzia

Utrzymuj wszystko lokalnie, odkrywaj narzędzia uzupełniające.

Wszystkie narzędzia dla programistów