Цветовые палитры

Как превратить палитру в интерфейс

Палитра — это отправная точка, а не готовая дизайн-система. Выберите один цвет, который несёт бренд, один нейтральный для текста и поверхностей, остальные оставьте для акцентов и состояний. Каждая палитра здесь выгружается в CSS-переменные или конфиг Tailwind, так что путь от образцов до кода — это копирование и вставка.

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

Надёжная пропорция: примерно 60% экрана — доминирующий нейтральный, 30% — вторичный цвет, 10% — акцент, приберегаемый для того, на что вы хотите, чтобы нажимали. Интерфейсы чаще рассыпаются от акцента повсюду, чем от неудачно выбранного оттенка.

Сколько цветов должно быть в палитре?

Для интерфейса обычно достаточно трёх–пяти базовых: фирменный цвет, один-два нейтральных и акцент, плюс смысловые цвета для успеха, предупреждения и ошибки. Всё сверх этого чаще оказывается шкалой тех же цветов, а не действительно новыми.

Как понять, что палитра доступна?

Сама по себе палитра не бывает доступной или недоступной — значение имеет каждая пара, которую вы используете. Проверяйте сочетания «текст на фоне» по WCAG: 4,5:1 для основного текста и 3:1 для крупного текста и элементов интерфейса. Откройте любой образец, чтобы увидеть контраст, или прогоните пару через проверку контрастности.

Можно ли использовать палитры коммерчески?

Да, свободно и без указания авторства. Значения цветов не охраняются авторским правом, поэтому их можно брать в клиентскую и коммерческую работу как есть.

Как перенести палитру в код?

На странице каждой палитры есть готовые CSS-переменные и расширение темы для Tailwind. Вставьте переменные в общий стиль или сниппет — в конфиг Tailwind, и цвета станут именованными токенами по всему проекту.