Цветово преобразуване
#b400ff
≈ Electric Violet
Вариации
Целта на тази секция е точно да произведе нюанси (добавено чисто бяло) и сенки (добавено чисто черно) на избрания от теб цвят в стъпки от 10%.
Професионален съвет: Използвай сенки за състояния на задържане и сенки, нюанси за акценти и фонове.
Сенки
По-тъмни вариации, създадени чрез добавяне на черно към основния ти цвят.
Нюанси
По-светли вариации, създадени чрез добавяне на бяло към основния ти цвят.
Чести случаи на употреба
- • Състояния на UI компоненти (задържане, активно, деактивирано)
- • Създаване на дълбочина със сенки и акценти
- • Изграждане на консистентни цветови системи
Съвет за дизайн система
Тези вариации формират основата на единен цветови Palette. Експортирай ги, за да поддържаш консистентност в целия си проект.
Цветови комбинации
Всяка хармония има свое настроение. Използвай хармонии, за да измислиш цветови комбинации, които работят добре заедно.
Как да използваш
Кликни върху който и да е цвят, за да копираш неговата hex стойност. Тези комбинации са математически доказани, че създават визуална хармония.
Защо е важно
Цветовите хармонии създават баланс и предизвикват специфични емоции в твоите дизайни.
Допълнение
Цвят и неговата противоположност на цветното колело, +180 градуса на оттенъка. Висок контраст.
Разделно-допълващ
Цвят и два съседни на неговото допълнение, +/-30 градуса на оттенъка от стойността, противоположна на основния цвят. Смел като правото допълнение, но по-гъвкав.
Триадичен
Три цвята, разположени равномерно по цветното колело, всеки на 120 градуса на оттенъка. Най-добре е един цвят да доминира, а другите да се използват като акценти.
Аналогичен
Три цвята със същата яркост и наситеност с оттенъци, които са съседни на цветното колело, на 30 градуса разстояние. Плавни преходи.
Монохроматичен
Три цвята със същия оттенък с яркостни стойности +/-50%. Фини и изискани.
Тетрадичен
Два комплекта допълващи се цветове, разделени от 60 градуса на оттенъка.
Принципи на цветната теория
Баланс
Използвай един доминиращ цвят, подкрепи с вторичен и акцентирай пестеливо.
Контраст
Осигури достатъчен контраст за четимост и достъпност.
Хармония
Цветовете трябва да работят заедно, за да създадат единно визуално изживяване.
Проверка на цветен контраст
Тествай цветови комбинации, за да се увериш, че отговарят на стандартите за достъпност на WCAG за четимост на текста.
Цвят на текста
Фонов цвят
Контраст
WCAG стандарти
Разширен проверител на контраста
Фина настройка с плъзгачи, множество прегледи и още
Всеки е гений. Но ако съдиш риба по способността й да се катери по дърво, тя ще живее целия си живот, вярвайки, че е глупава.