Перетворення кольорів
#e24826
≈ Cinnabar
Варіації
Мета цього розділу - точно створити відтінки (додавання чистого білого) і відтінки (додавання чистого чорного) обраного вами кольору з кроком 10%.
Порада професіонала: Використовуйте відтінки для станів наведення і тіней, відтінки для виділень і фону.
Відтінки
Темніші варіації створюються додаванням чорного до базового кольору.
Відтінки
Світліші варіації, створені шляхом додавання білого до основного кольору.
Поширені випадки використання
- • Стани компонентів інтерфейсу (наведення, активний, вимкнений)
- • Створення глибини за допомогою тіней і відблисків
- • Побудова послідовних кольорових систем
Порада щодо системи проектування
Ці варіації формують основу цілісної палітри кольорів. Експортуйте їх, щоб підтримувати узгодженість у всьому проєкті.
Поєднання кольорів
Кожна гармонія має свій настрій. Використовуйте гармонії для мозкового штурму, щоб створити комбінації кольорів, які добре поєднуються між собою.
Як користуватися
Натисніть на будь-який колір, щоб скопіювати його шістнадцяткове значення. Математично доведено, що ці комбінації створюють візуальну гармонію.
Чому це важливо
Кольорові гармонії створюють баланс і викликають певні емоції у вашому дизайні.
Доповнення
Колір та його протилежність на колірному колі, +180 градусів відтінку. Висока контрастність.
Розщеплено-комплементарний
Колір та два суміжні з ним доповнюючі, на +/-30 градусів відтінку від значення, протилежного основному кольору. Жирний, як пряме доповнення, але більш універсальний.
Тріадний
Три кольори, рівномірно розташовані вздовж колірного кола, з відстанню між ними 120 градусів відтінку. Найкраще дозволити одному кольору домінувати, а інші використовувати як акценти.
Аналогічний
Три кольори однакової яскравості та насиченості з відтінками, що розташовані поруч на колірному колі під кутом 30 градусів. Плавні переходи.
Монохроматичний
Три кольори одного відтінку зі значеннями яскравості +/-50%. Витончені та вишукані.
Тетрадичний
Два набори додаткових кольорів, розділені відстанню між ними 60 градусів відтінку.
Принципи теорії кольору
Баланс
Використовуйте один домінуючий колір, підтримуйте його другорядними і розставляйте акценти економно.
Контраст
Забезпечте достатній контраст для читабельності та доступності.
Гармонія
Кольори повинні працювати разом, щоб створити єдиний візуальний досвід.
Перевірка контрастності кольорів
Перевірте поєднання кольорів, щоб переконатися, що вони відповідають стандартам доступності WCAG щодо читабельності тексту.
Колір тексту
Колір фону
Контраст
Стандарти WCAG
Розширена перевірка контрастності
Точне налаштування за допомогою повзунків, кількох попередніх переглядів тощо
Кожен є генієм. Але якщо судити про рибу за її здатністю залізти на дерево, вона проживе все життя, вважаючи себе дурною.