Преобразование цвета
#ca4e4e
≈ Chestnut Rose
Вариации
Цель этого раздела - точное создание оттенков (добавление чистого белого) и теней (добавление чистого черного) выбранного вами цвета с шагом в 10%.
Профессиональный совет: Используй оттенки для hover-состояний и теней, оттенки - для бликов и фона.
Тени
Более темные варианты создаются путем добавления черного к твоему базовому цвету.
Оттенки
Более светлые вариации создаются путем добавления белого к твоему базовому цвету.
Общие случаи использования
- • Состояния компонентов пользовательского интерфейса (hover, active, disabled)
- • Создай глубину с помощью теней и бликов
- • Построение последовательных цветовых систем
Совет по созданию системы дизайна
Эти вариации составляют основу целостной цветовой палитры. Экспортируй их, чтобы сохранить последовательность во всем твоем проекте.
Сочетания цветов
У каждой гармонии есть свое настроение. Используйте гармонии для мозгового штурма цветовых сочетаний, которые хорошо работают вместе.
Как использовать
Щелкни по любому цвету, чтобы скопировать его шестнадцатеричное значение. Математически доказано, что эти комбинации создают визуальную гармонию.
Почему это важно
Цветовые гармонии создают баланс и вызывают определенные эмоции в твоем дизайне.
Комплементарный
Цвет и его противоположность на цветовом круге, +180 градусов оттенка. Высокая контрастность.
Сплит-комплементарный
Цвет и два соседних с ним дополнения, +/-30 градусов оттенка от значения, противоположного основному цвету. Смелый, как прямой комплемент, но более универсальный.
Триада
Три цвета, равномерно расположенные вдоль цветового круга, каждый из которых находится на расстоянии 120 градусов оттенка друг от друга. Лучше всего позволить одному цвету доминировать, а остальные использовать в качестве акцентов.
Аналогичные
Три цвета одинаковой яркости и насыщенности с оттенками, которые находятся рядом на цветовом круге, на расстоянии 30 градусов друг от друга. Плавные переходы.
Монохромный
Три цвета одного оттенка со значениями яркости +/-50%. Утонченный и изысканный.
Тетрадный
Два набора комплементарных цветов, разделенных 60 градусами оттенка.
Принципы теории цвета
Баланс
Используй один доминирующий цвет, поддерживай его второстепенными, а акценты расставляй скупо.
Контраст
Обеспечь достаточную контрастность для читабельности и доступности.
Гармония
Цвета должны работать вместе, чтобы создать единое визуальное восприятие.
Проверка контрастности цветов
Протестируй цветовые сочетания, чтобы убедиться, что они соответствуют стандартам доступности WCAG по читаемости текста.
Цвет текста
Цвет фона
Контраст
Стандарты WCAG
Каждый человек - гений. Но если вы будете судить о рыбе по ее способности забираться на дерево, она всю жизнь будет верить, что она глупая.