Теория цвета для веб-дизайна

Цвет — один из самых мощных инструментов веб-дизайнера. Он передаёт настроение, создаёт иерархию, направляет внимание и формирует узнаваемость бренда. Практическое руководство по теории цвета для веб-дизайна.

Цветовые модели: HEX, RGB и HSL

Веб-дизайнеры работают с тремя основными моделями. HEX-коды вроде #FF5733 — самые распространённые в CSS. RGB определяет цвета как комбинации красного, зелёного и синего от 0 до 255. HSL определяет цвета по тону, насыщенности и светлоте — наиболее интуитивная модель для корректировок.

Правила цветовой гармонии

• Комплементарная: два цвета напротив друг друга на цветовом круге. Высокий контраст, энергичность.
• Аналогичная: три соседних цвета на круге. Гармоничная и спокойная.
• Триадная: три цвета на равном расстоянии. Яркая и сбалансированная.
• Расщеплённая комплементарная: базовый цвет плюс два соседних с его дополнительным.
• Монохроматическая: вариации одного тона с разной насыщенностью и светлотой.

Правило 60-30-10

60% дизайна — доминирующий цвет, 30% — вторичный, 10% — акцентный. Это создаёт визуальный баланс.

Доступность и контраст

WCAG 2.1 требует минимального коэффициента контрастности 4,5:1 для обычного текста. Многие красивые цветовые комбинации не соответствуют требованиям доступности.

Создайте свою цветовую палитру с помощью бесплатного инструмента выбора цвета на Vaxtim Yoxdu. Конвертируйте между HEX, RGB и HSL, создавайте палитры гармонии и проверяйте контрастность в одном инструменте.