Отгатването кои цветове си пасват отнема излишно много време при дизайн. Този генератор прилага класическите хармонии на цветовия кръг - същите зависимости между нюансите, които се изучават в теорията на цвета - така че всяка палитра е математически съгласувана, а не подбрана на око. Кликнете върху всяка проба, за да копирате нейния hex код, или копирайте цялата палитра като готови CSS променливи. Всичко работи изцяло в браузъра: без акаунт, без качване на файлове и без проследяване на цветовете на вашия бранд.
Безплатен генератор на цветова палитра
Работи изцяло в браузъра - без качване и без регистрация.
Хармония
CSS променливи
Какво е генератор на цветова палитра?
Генераторът на цветова палитра изгражда съгласувана цветова схема от един основен цвят по теорията на цветовия кръг. Изберете или въведете hex цвят, посочете хармония - комплементарна, аналогова, триадна или монохромна - и той мигновено изчислява подходящите цветове, всеки с копируем hex код. Всичко се случва направо в браузъра.
Как се използва
- 1Задайте основен цвят. Кликнете върху цветовото поле, за да изберете визуално, въведете hex код като #6366f1 или натиснете „Случаен“ за нова отправна точка.
- 2Изберете хармония. Превключвайте между комплементарна, разделено-комплементарна, аналогова, триадна, тетрадна, монохромна схема, сенки и тонове. Палитрата се преизчислява мигновено.
- 3Копирайте цветовете. Кликнете върху всяка проба, за да копирате нейния hex код, или използвайте бутона Копирай, за да вземете цялата палитра като CSS променливи.
За кого е
- Уеб дизайнери, които стартират сайт от един основен цвят на бранда: генерират аналогови или разделено-комплементарни двойки за фон, бутони и акценти.
- Front-end разработчици, на които им трябва начален набор от дизайн токени: копират палитрата като CSS променливи и я поставят направо в стиловете.
- Маркетолози и автори на презентации, които съчетават графики, социална графика или слайдове с цвета на логото без дизайнерски софтуер.
- Илюстратори и любители, които изследват сенки и тонове на един нюанс, за да изградят дълбочина, светлини и сенки в творбата.
Често задавани въпроси
Безплатен ли е този генератор на цветова палитра?
Да - 100% безплатен, без регистрация, без водни знаци и без ограничения. Генерирайте и копирайте колкото палитри искате за лични или комерсиални проекти.
Качват ли се някъде данните за моите цветове?
Не. Палитрата се изчислява изцяло във вашия браузър с обикновен JavaScript. Цветовете на вашия бранд, въведените стойности и кликванията никога не се изпращат към сървър.
Какво е комплементарен цвят?
Комплементарният цвят се намира точно срещу основния на цветовия кръг - завъртане на нюанса на 180 градуса. Комплементарни двойки като синьо и оранжево дават най-силния контраст, затова са предпочитани за бутони за действие на фона на бранд цвета.
Каква е разликата между аналогова и триадна палитра?
Аналоговите палитри използват съседни нюанси (в рамките на около 30 градуса от основния), затова изглеждат спокойни и хармонични. Триадните палитри вземат три нюанса, раздалечени на 120 градуса, което дава жизнена, балансирана схема с по-силен контраст между цветовете.
Какво са сенките и тоновете?
Сенките (shades) затъмняват основния цвят, като приближават светлината до черно; тоновете (tints) го изсветляват към бяло. И двата запазват същия нюанс и наситеност, затова са идеални за hover състояния, рамки и фонови слоеве на един бранд цвят.
Колко цвята трябва да съдържа палитрата на един уебсайт?
Често правило е 60-30-10: един доминиращ цвят за около 60% от интерфейса, вторичен за 30% и акцентен за 10%. Започнете от хармония с 3-5 цвята тук, после добавете сенки и тонове на всеки за състояния и повърхности.
Защо палитрата почти не се променя за сиво или черно?
Сивото, черното и бялото имат нулева наситеност, затова нямат нюанс, върху който завъртанията на хармонията да действат - завъртане на нищото връща същата неутрална стойност. Изградете неутрална скала чрез режимите на светлина: тонове за черно или тъмносиво, сенки за бяло или светлосиво и монохромен режим за средно сиво.