9 февраля 2026

верстка

`font-palette` — как перекрасить цветные шрифты

Есть обычные монохромные шрифты, цвет которых меняется с помощью свойства color. Можно достичь симпатичных визуальных эффектов текста, если раскрасить их градиентами или задать фоновую картинку. Об этом рассказывала в одной из предыдущих статей.

Но есть сразу цветные (multicolored) шрифты или шрифты с иконками. Вот, например, коллекция на Google fonts. Такие шрифты в своем составе могут иметь сразу несколько цветовых палитр. Можно выбирать из них, например, выбрать темную или светлую версию в зависимости от темы страницы или устройства. Или создать свою палитру используя свойство font-palette и at-правило @font-palette-values.

Нюансы использования:

1. Производительность

Каждая новая палитра — это новый рендер шрифта. Много палитр на странице и анимации — готовьтесь к лагам на слабых устройствах.

2. Каскадирование

font-palette каскадируется как обычное CSS-свойство. Но если вы применили палитру к родителю, дочерние элементы не наследуют переопределенные цвета палитры — они наследуют только саму палитру.

3. Цвет и фон

Цвета в палитре — это часть шрифта. Они не реагируют на color или background-color. Хотите изменить цвет — меняйте палитру.

4. Доступность

Не забывайте про accessibility — достаточный контраст важен даже в цветных шрифтах.

5. Браузерная поддержка

Baseline Widely Available с 15 мая 2025 года

6. Спецификация

Варианты значений:

normal: Задает цветовую палитру по умолчанию (установленную создателем шрифта). При этом параметре будет отображаться палитра шрифта с индексом 0.
light: Указывает первую палитру в шрифте, соответствующую значению «светлый», которая будет использоваться для шрифта. Некоторые шрифты содержат метаданные, которые определяют палитру как подходящую для светлого (близкого к белому) фона. Если у шрифта нет этих метаданных, значение light ведет себя как normal
dark: Указывает первую палитру в шрифте, соответствующую значению «dark». Если таких метаданных нет, значение ведет себя как normal
<palette-identifier>: Позволяет задать собственные значения для палитры шрифтов с помощью правила @font-palette-values. Значение указывается в формате dashed-ident. Например, font-palette: --my-palette;
palette-mix(): Создает новое значениеfont-palette смешивая два значения font-palette в заданных процентах и с использованием методов цветовой интерполяции.

Указание темной палитры, т.е. такого набора цветов шрифта, который лучше всего будет виден на тёмном фоне:


@media (prefers-color-scheme: dark) {
  body {
    font-palette: dark;
  }
}

Другой вариант, через кастомные свойства:


:root {
  @media (prefers-color-scheme: dark) {
    --palette: dark;
  }

  @media (prefers-color-scheme: light) {
    --palette: light;
  }
}

body {
  font-palette: var(--palette);
}

@font-palette-values — конструктор палитр

Правило @font-palette-values — ваша лаборатория по созданию палитр. Вот что внутри:

1. font-family

Обязательное свойство. Указываете, для какого шрифта создаете палитру.
Важный момент — это должно быть точное совпадение с названием, которое вы используете в font-family.

Если шрифт загружается через @font-face с другим font-family, система не найдет соответствие. Все должно быть консистентно.

2. base-palette

Цветные шрифты обычно содержат встроенные палитры. base-palette: 0 (по умолчанию) — первая палитра, base-palette: 1 — вторая и т.д. или по ключу base-palette: dark.

Не все шрифты имеют несколько встроенных палитр. Всегда проверяйте документацию шрифта или используйте base-palette: 0 (можно не указывать, это значение по умолчанию).

3. override-colors

Вы можете переопределить любой цвет из базовой палитры:


@font-palette-values --ocean {
  font-family: "ColorFont";
  base-palette: 2;
  override-colors:
    0 #1a237e,    /* Самый темный синий */
    1 #3949ab,    /* Средний синий */
    2 #5c6bc0,    /* Светлый синий */
    3 #ffffff;    /* Белый для акцентов */
}

.title {
  font-family: "ColorFont";
  font-palette: --ocean;
}

Нумерация цветов зависит от шрифта. Вам нужно либо документацию читать, либо методом тыка подбирать. Нет стандарта, который определяет «цвет 0 — это всегда контур».

Живой пример:

See the pen (@Websitio) on CodePen.

Анимация смены цветов шрифта

Возьмём шрифт Nabla и используем @keyframes:


@font-palette-values --palette-1 {
  font-family: "Nabla";
  base-palette: 1;
}

@font-palette-values --palette-2 {
  font-family: "Nabla";
  base-palette: 3;
}

@keyframes animate-palette {
  from {
    font-palette: --palette-1;
  }

  to {
    font-palette: --palette-2;
  }
}

Живой пример:

See the pen (@Websitio) on CodePen.

Некоторые браузеры, всё ещё поддерживающие дискретную анимацию font-palette, будут переключать палитры, а не плавно менять цвета.

Смешивание палитр

Для смешивания палитр используется функция palette-mix()


font-palette: palette-mix(in lch, --greenTheme 80%, --lightTheme 20%);

Можно указать в каком цветовом пространстве работать, в примере указано lch и процентное соотношение.

Пока (февраль 2026) функция palette-mix() экспериментальное, работает не во всех браузерах. Актуальную поддержку смотрите на can-i-use

Связанные статьи

Текст градиентом

font-palette — как перекрасить цветные шрифты