Синтаксис относительного цвета — примеры использования

С прошлого месяца в Firefox 128 появилась поддержка синтаксиса относительных цветов. Я очень рад этому, поскольку это чрезвычайно мощный способ манипулирования цветами в CSS. К тому же, в этом году он был частью Interop, так что это ещё одно доказательство того, что работа идёт полным ходом.

Синтаксис с общими именами выглядит так:

color-function(from origin-color channel1 channel2 channel3 / alpha)

Вот как это работает у меня в голове:

Добавьте прозрачность к имеющемуся цвету

Обычно для цветов в проекте устанавливаются пользовательские свойства CSS.

html {
  --color-yellow: oklch(80% 0.15 94);
  --color-green:  oklch(70% 0.25 140);

  ...
}

Теперь необходимо использовать жёлтый цвет, но с прозрачностью около 50%. Как это сделать? На самом деле есть несколько способов добавить прозрачность к существующему цвету, но, на мой взгляд, синтаксис относительного цвета является самым приятным.

Раньше я разделял значения цветов следующим образом:

html {
  --color-yellow-lch: 80% 0.15 94;
  --color-yellow: oklch(var(--color-yellow-lch);

  ...
}

Таким образом, можно либо использовать весь цвет вместе, либо использовать разделённые значения для применения прозрачности:

.box {
  background: var(--color-yellow);
  border-color: oklch(var(--color-yellow-lch) / 50%);
}

Но это может выйти из-под контроля! Также можно разделить каждый цвет на L, C и H`, а затем объединить их, что даст пять переменных для каждого цвета. Слишком много.

При использовании синтаксиса относительных цветов разбиение цветов на части не требуется. Вы применяете альфа-канал (и другие преобразования) по требованию, оставляя исходный цвет единственной переменной (маркером).

.box {
  background: var(--color-yellow);
  border-color: oklch(from var(--color-yellow) l c h / 50%);
}

Мне больше нравится идея сохранить основные цвета в виде CSS переменных, а затем настраивать их по мере необходимости.

Затемнение имеющегося цвета

В примере выше использовался параметр --color-yellow, и в конце было сказано, что предпочитаю вносить разовые изменения по требованию, а не создавать новую переменную. Если часто используется чуть более тёмная версия цвета, то, конечно, сделайте новую переменную и оставайтесь последовательными. Но если речь идёт о единичном случае, то синтаксис относительных цветов просто великолепен:

.box {
  background: var(--gray-5);

  h2 {
    color: var(--color-yellow);
    /* Тёмная версия жёлтого цвета */
    border-bottom: 2px solid oklch(from var(--color-yellow) calc(l - 0.4) c h);
  }
}

Осветление имеющегося цвета

Здесь та же ситуация. Использую OKLCH, потому что он мне нравится, особенно его характеристика равномерная яркость. То есть при затемнении и осветлении разных цветов создаётся ощущение, что они осветляются/затемняются одинаково. Странно писать, но это правда. Другие цветовые пространства не осветляют и не затемняют последовательно.

.box {
  background: var(--gray-5);

  h2 {
    color: var(--color-orange);
    /* Светлая версия оранжевого */
    border-bottom: 2px solid oklch(from var(--color-orange) calc(l + 0.4) c h);
  }
}

See the Pen

Простые варианты

Избежать создания слишком большого количества переменных — приятное следствие синтаксиса относительных цветов, но всё равно можно использовать синтаксис относительных цветов для создания переменных, если их наличие полезно.

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

html {
  --base-gray: oklch(12.94% 0.02 159);

  --gray-1: var(--base-gray);
  --gray-2: oklch(from var(--base-gray) calc(l + 0.1) c h);
  --gray-3: oklch(from var(--base-gray) calc(l + 0.2) c h);
  --gray-4: oklch(from var(--base-gray) calc(l + 0.3) c h);
  --gray-5: oklch(from var(--base-gray) calc(l + 0.4) c h);
  --gray-6: oklch(from var(--base-gray) calc(l + 0.5) c h);
  --gray-7: oklch(from var(--base-gray) calc(l + 0.6) c h);
  --gray-8: oklch(from var(--base-gray) calc(l + 0.7) c h);
}

See the Pen

Тот факт, что можно начать с любого цвета, использовать любую функцию цвета и манипулировать любой частью цвета, является невероятно мощным. Приведённые выше варианты использования являются довольно простыми. Уверен, что более талантливые дизайнеры или разработчики, глубоко знающие цвет, смогут сделать гораздо более интересные вещи!