Как использовать CSS-переменные для цветов

Короткий ответ

Объявите цвета один раз в :root и используйте их через var():

<style>
  :root { --brand: royalblue; --text: #222; --surface: aliceblue; }
  .card { padding: 12px; background: var(--surface); color: var(--text); border-left: 4px solid var(--brand); }
  .card a { color: var(--brand); }
</style>
 
<div class="card">Our new plan is out. <a href="https://example.com">See prices</a></div>

Имя переменной начинается с двух дефисов. Поменяйте --brand — и цвет сменится везде, где он использован.

Переопределение для блока

Переменные наследуются, поэтому внутри отдельного блока их можно переопределить:

<style>
  :root { --brand: royalblue; }
  .btn { padding: 6px 14px; border: none; background: var(--brand); color: white; }
  .danger { --brand: crimson; }
</style>
 
<button class="btn">Save</button>
<div class="danger"><button class="btn">Delete</button></div>

Запасное значение и оттенки

Второй аргумент var() используется, если переменная не задана. А color-mix() делает из основного цвета светлый оттенок без новой переменной:

.note { background: color-mix(in oklch, var(--brand, teal) 15%, white); }

Частая ошибка

Пишут color: --brand или color: $brand — так не работает. Значение переменной читают только через var(--brand). Ещё одна ловушка — регистр: --Brand и --brand — две разные переменные.