Генератор на цветови схеми

Изберете основен цвят и получете пълна палитра, комплементарна, аналогова, триадна, тетрадна или монохроматична. Копирайте всеки образец като HEX, RGB или HSL. Нищо не напуска браузъра ви.

Как работи Генератор на цветови схеми

Генераторът на цветови схеми изгражда пълни цветови палитри от единичен основен цвят, избран от вас: допълващ (противоположен на цветовото колело), аналогов (съседни нюанси), триадичен (три равномерно наредени), тетрадичен (четири нюанса в две допълващи двойки) и монохроматичен (варираща яркост и наситеност на същия нюанс). Цялата логика на палитрата се изпълнява в браузъра; нищо, което въведете, не напуска устройството ви.

Всяка генерирана палитра показва мостри с готови за копиране HEX и RGB стойности. Това дава на дизайнерите отправна точка, базирана на теорията за цветовете, а не на догадки. Тъй като генераторът може да работи офлайн след първоначалното зареждане на страницата, можете свободно да експериментирате с цветовете на марката по време на среща с клиент, без да се нуждаете от мрежова връзка. Въведете основния си цвят в нотацията, с която разполагате - HEX, RGB или HSL - и всяка генерирана мостра се връща и в трите, така че да можете да копирате тази, която очаква вашият дизайнерски инструмент.

Написано от Bastien Sulyan

Как да използвате Генератор на цветови схеми, стъпка по стъпка

Изберете основен цвят с инструмента за избор на цвят или като въведете HEX стойност.
Изберете тип хармония от разделите: допълващ, аналогов, триадичен, тетрадичен или монохроматичен.
Мострите на палитрата се появяват незабавно с техните HEX и RGB стойности.
Щракнете върху произволна мостра, за да копирате HEX стойността в клипборда.
Коригирайте основния цвят, за да изследвате вариации и да наблюдавате как се актуализира цялата палитра.

Често срещани приложения

Дизайнер, стартиращ нова идентичност на марка, избира основния цвят и генерира триадична палитра, за да предложи три цветови комбинации на клиент.
Разработчик, изграждащ тема за тъмен режим, използва монохроматичната палитра, за да генерира набор от нюанси и сенки от единичен цвят на марка.
Автор на съдържание избира аналогова палитра, за да подбере акцентни цветове за презентация, изглеждаща хармонично без остър контраст.
UI дизайнер използва допълващата палитра, за да идентифицира акцентен цвят с висок контраст, открояващ се на фона на основния цвят на марката.

Често задавани въпроси

Как работи допълващата палитра?

Допълващият цвят е нюансът директно противоположен на основния цвят в HSL цветовото колело, на 180 градуса разстояние. Поставянето на допълващи цветове едно до друго създава максимален контраст. Инструментът показва основния цвят и допълнението му, плюс по-светли и по-тъмни варианти на всеки.

Каква е разликата между триадични и тетрадични палитри?

Триадичната палитра използва три нюанса, равномерно наредени на 120 градуса един от друг в цветовото колело. Тетрадичната палитра използва четири нюанса на 90 градуса един от друг, образувайки две допълващи двойки (наречена още двойно допълваща или квадратна палитра). Тетрадичните палитри са по-сложни и изискват внимателно балансиране на пропорциите, за да се избегне визуален шум.

Съхраняват ли се или изпращат ли се избраните цветове?

Не. Генерирането на палитра е аритметика върху HSL представяне на основния цвят: завъртане на ъгъла на нюанса с фиксирани величини, промяна на яркостта и наситеността. Всяко изчисление се изпълнява локално в браузъра; нищо не се изпраща на сървър.

Мога ли да експортирам палитрата като CSS файл или файл с дизайнерски token?

Инструментът в момента показва мостри с копируеми HEX и RGB стойности. За пълен експорт на CSS потребителски свойства или JSON с дизайнерски token, копирайте стойностите ръчно в token файла или CSS на проекта. Специален бутон за експортиране може да бъде добавен в бъдеща актуализация.

Следва ли генераторът някакъв формален стандарт за теория на цветовете?

Изчисленията на палитрата използват стандартни формули за завъртане на нюанса в HSL цветовото пространство, което е конвенцията в повечето инструменти за уеб дизайн. Точната перцептивна равномерност на HSL има ограничения в сравнение с LAB или OKLCH, но завъртанията в HSL произвеждат палитри, съответстващи на конвенциите на цветовото колело, които дизайнерите обикновено очакват.

Свързани инструменти

Пазете всичко локално, разгледайте допълнителни инструменти.

Всички инструменти за разработчици