Правилото 60-30-10
Това е най-полезното правило за разпределяне на цветовете. Идва от интериорния дизайн, но работи за всеки проект.
- 60 %: преобладаващ цвят. Обикновено неутрален или нежен нюанс. Покрива фона и големите площи.
- 30 %: второстепенен цвят. Придава характер. Използвай го за блокове, менюта или мебели.
- 10 %: акцентен цвят. Най-яркият. Използвай го за бутони, икони или детайли.
Например: мръснобяло за 60 %, тъмносиньо за 30 % и оранжево за 10 %.
Не е нужно да мериш точно. Идеята е един цвят да води, един да подкрепя и един да изпъква.
Ролята на неутралните цветове
Неутралните цветове са бяло, черно, сиво, бежово, кремаво и светлите кафяви. Подхождат почти на всичко.
Дават почивка на очите и позволяват на ярките цветове да изпъкнат по-добре. Палитра без неутрални цветове обикновено изглежда уморителна.
- Бяло и мръснобяло: чистота и пространство.
- Сиво: модерно и сдържано. Избери топли или студени сиви, които подхождат на останалата палитра.
- Бежово и пясъчно: топлина и естественост.
- Черно или почти черно: елегантност и контраст. За текст много тъмното сиво обикновено е по-приятно от чистото черно.
Комбиниране според температурата
Цветовете са топли (червено, оранжево, жълто) или студени (синьо, зелено, лилаво). Можеш да ги комбинираш по три прости начина:
- Само топли цветове: уютно и енергично. Идеално за ресторанти или приветливи марки.
- Само студени цветове: спокойно и професионално. Идеално за здравеопазване, технологии или финанси.
- Студена основа с топъл акцент: най-универсалната възможност. Топлият акцент привлича погледа върху спокойния фон.
Какво обикновено не работи: много ярки топли и студени цветове наведнъж, без преобладаващ цвят.
Контраст за текста
Красивият цвят не струва нищо, ако текстът не може да се прочете. Контрастът между текста и фона е от решаващо значение за четимостта и достъпността.
- Използвай тъмен текст на светъл фон или светъл текст на тъмен фон.
- Избягвай жълт, светлозелен или светлосив текст върху бяло.
- Не поставяй наситени допълващи цветове един върху друг, например червено върху зелено. Трепти и уморява очите.
- Правилата WCAG изискват контрастно съотношение поне 4,5:1 за обикновен текст и 3:1 за голям текст.
Всяка двойка цветове можеш да провериш в нашата проверка на контраста.
15 цветови комбинации, които винаги работят
Тези двойки са сигурна отправна точка. Използвай ги като основа и при нужда добави неутрален цвят или акцент.
- Тъмносиньо и кремаво: класическа, сериозна и добре четима.
- Черно и златисто: лукс и елегантност.
- Синьо и оранжево: допълваща и пълна с енергия.
- Елово зелено и бежово: естествена и спокойна.
- Розово и антрацит: модерна и балансирана.
- Жълто и черно: максимален контраст, идеална за предупреждения.
- Бордо и пясъчно: топла и изтънчена.
- Тюркоазено и коралово: свежа и лятна.
- Лилаво и светлолюляково: монохромна и креативна.
- Кафяво и салвиево зелено: земна, идеална за природни марки.
- Сиво и прасковено: нежна и приветлива.
- Петролно синьо и светложълто: спокойна, с нотка светлина.
- Теракота и мръснобяло: топла и средиземноморска.
- Тъмно петролно и горчица: ретро и с характер.
- Бяло и червено: директна, енергична и добре видима.
Много повече идеи с HEX кодове ще намериш на нашата страница цветови комбинации.
Кои цветове подхождат на кой цвят
Ако вече имаш основен цвят, този списък ще ти даде бърза отправна точка:
- Червено: бяло, черно, сиво, тъмносиньо и бежово. За нещо смело: розово или оранжево.
- Оранжево: тъмносиньо, тюркоазено, бяло, кремаво и кафяво.
- Жълто: сиво, черно, тъмносиньо и бяло. Горчицата се съчетава добре с тъмнозелено.
- Зелено: бежово, бяло, кафяво, златисто и нежно розово.
- Синьо: бяло, оранжево, сиво, жълто и коралово. Тъмносиньото работи почти като неутрален цвят.
- Лилаво: сиво, люляково, златисто, салвиево зелено и бяло.
- Розово: сиво, тъмносиньо, маслиненозелено, бяло и златисто.
- Кафяво: кремаво, зелено, петролно синьо, оранжево и мръснобяло.
Сигурно си забелязал, че неутралните цветове са почти във всеки списък. Те са най-сигурният партньор за ярък цвят.
Как да създадеш своя комбинация
- Избери основен цвят според това, което искаш да изразиш.
- Намери в цветовото колело второстепенен цвят: съседен за нещо спокойно, противоположен за нещо ярко.
- Добави един или два неутрални цвята.
- Избери един акцентен цвят за най-важното.
- Тествай палитрата върху реален пример: уеб страница, слайд от презентация или снимка на стая.
Когато се колебаеш, използвай по-малко цветове. Три до пет цвята стигат за почти всеки проект.
Чести грешки с цветовете
- Твърде много цветове. Резултатът изглежда претрупан и нищо не изпъква.
- Еднаква тежест за всички цветове. Без преобладаващ цвят окото не знае накъде да гледа.
- Забравен контраст. Текст, който не може да се прочете, или бутони, които никой не вижда.
- Всичко пренаситено. Много ярките цветове уморяват. Съчетавай ги с по-нежни нюанси.
- Пренебрегване на контекста. Цветът изглежда различно на дневна светлина, на екран и на хартия.
- Копиране без промени. Палитра, която работи за една марка, не е задължително да пасва на твоята публика.
- Смесване на неутрални цветове с различна температура. Студено сиво до топло бежово може да изглежда мръсно. Избирай неутрални цветове от едно и също семейство.
- Липса на тест на няколко екрана. Цветът може да е прекрасен на компютъра и блед на телефона. Винаги го проверявай на повече от едно устройство.