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