Цвета в CSS: переменные, hsl() и темы

Q: Можно ли использовать переменные в Tailwind?

Да: в конфигурации задайте цвета как var(--accent), и утилиты вроде bg-accent будут брать значение из переменной.

Как хранить палитру в CSS-переменных, называть цвета по ролям, строить оттенки через hsl() и color-mix(), делать светлую и тёмную тему.

Цвет в веб-дизайне · 26 октября 2026 г. · 2 мин чтения

Палитру в CSS удобнее всего хранить в пользовательских свойствах (CSS-переменных) на :root и называть их по роли — --bg, --text, --accent, — а не по цвету. Тогда смена палитры или переход на тёмную тему сводится к переопределению нескольких переменных, а компоненты не меняются.

Базовая схема

:root {
  --bg: #F7F3EE;
  --surface: #EDE6DD;
  --text: #2A2529;
  --text-muted: #6B5F5A;
  --accent: #DE7C56;
  --accent-text: #1E1A1D;
}

body { background: var(--bg); color: var(--text); }
.button { background: var(--accent); color: var(--accent-text); }

HEX-коды для такой схемы можно взять из любого фото в генераторе палитры.

Почему называть по ролям

Плохо	Хорошо
`--orange`	`--accent`
`--dark-gray`	`--text`
`--beige`	`--surface`

Когда бренд поменяет оранжевый на зелёный, --orange: green будет вводить в заблуждение, а --accent останется верным.

Оттенки через hsl()

:root {
  --accent-h: 17;
  --accent-s: 67%;
  --accent: hsl(var(--accent-h) var(--accent-s) 60%);
  --accent-soft: hsl(var(--accent-h) var(--accent-s) 88%);
  --accent-strong: hsl(var(--accent-h) var(--accent-s) 40%);
}

Меняете один тон — меняется вся шкала. Подробнее о формате — в статье RGB, HEX и HSL.

Смешивание через color-mix()

Современные браузеры поддерживают функцию color-mix():

.button:hover { background: color-mix(in srgb, var(--accent) 85%, black); }
.tag { background: color-mix(in srgb, var(--accent) 15%, transparent); }

Светлая и тёмная тема

:root { --bg: #F7F3EE; --text: #2A2529; --accent: #C8553D; }

@media (prefers-color-scheme: dark) {
  :root { --bg: #141113; --text: #F2EDE8; --accent: #FA9B59; }
}

:root[data-theme="dark"] { --bg: #141113; --text: #F2EDE8; --accent: #FA9B59; }

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

Динамическая палитра из JavaScript

Переменные можно менять на лету:

document.documentElement.style.setProperty('--accent', '#40ACC5');

Так работает наш генератор: после анализа фото акцент интерфейса становится главным цветом снимка.

Частые вопросы

Работают ли CSS-переменные во всех браузерах?

Да, все современные браузеры поддерживают custom properties.

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

Да: в конфигурации задайте цвета как var(--accent), и утилиты вроде bg-accent будут брать значение из переменной.

Как передать палитру в градиент?

background: linear-gradient(135deg, var(--accent), var(--surface)); — подробнее в статье CSS-градиент из фото.