Правило 60-30-10: как распределить цвета по площади
Что такое правило 60-30-10, как применять его на сайте, в презентации, соцсетях и интерьере, примеры палитр и когда правило можно нарушать.
Цвет в веб-дизайне · · 2 мин чтения
Правило 60-30-10 — это пропорция распределения цветов по площади: 60% занимает основной (обычно нейтральный) цвет, 30% — вторичный, 10% — акцентный. Правило пришло из дизайна интерьеров и одинаково хорошо работает для сайтов, презентаций, постов и одежды: оно сразу задаёт иерархию и не даёт палитре стать пёстрой.
Что входит в каждую часть
| Доля | Роль | На сайте | В интерьере |
|---|---|---|---|
| 60% | Основной | Фон страниц | Стены, пол |
| 30% | Вторичный | Карточки, шапка, крупные блоки | Мебель, текстиль |
| 10% | Акцент | Кнопки, ссылки, иконки | Декор, подушки, вазы |
Как применить к палитре из фото
- Загрузите фото в генератор палитры и получите 5–6 цветов.
- 60% — выберите самый спокойный цвет: светлый нейтральный или, для тёмного дизайна, самый тёмный.
- 30% — возьмите цвет, близкий к основному по светлоте, но отличающийся по тону.
- 10% — самый насыщенный и заметный цвет палитры.
Пример для фото лагуны:
- 60% — песочный светлый
#F5EEEC - 30% — голубой
#81B8CB - 10% — глубокий синий
#074A97
Примеры по жанрам
Сайт сервиса
Фон #F7F5F2 (60%), поверхности и иллюстрации #2A9D8F (30%), кнопки #E76F51 (10%).
Презентация
Белые слайды (60%), фирменный тёмно-синий в заголовках и плашках (30%), жёлтый для выделения цифр (10%).
Лента соцсетей
Нейтральные фото (60%), фирменный фон в шаблонах (30%), яркий цвет в надписях и стрелках (10%). Подробнее — в статье лента в одном стиле.
Когда правило можно нарушать
- Монохромный стиль — 90% один тон разной светлоты.
- Яркие промо и постеры — 50/50 двух сильных цветов создают энергию.
- Дашборды — много категорий в графиках требуют больше цветов, но интерфейс вокруг всё равно должен быть нейтральным.
Главное — сохранять иерархию: один цвет доминирует, акцент встречается редко.
Частые вопросы
Считаются ли чёрный и белый в правиле?
Да, если они занимают значимую площадь. Белый фон сайта — это и есть 60%.
Что делать, если цветов больше трёх?
Группируйте их: несколько близких оттенков считаются одной частью. Например, два бежевых — это одна «60%».
Подходит ли правило для тёмной темы?
Да: 60% — тёмный фон, 30% — поверхности чуть светлее, 10% — акцент. Подробнее в статье цвета для тёмной темы.