Градиент — это плавный переход между двумя или более цветами, создаваемый с помощью функций linear-gradient() или radial-gradient(). Его используют в вебе для фонов, кнопок, рамок, декоративных элементов и даже в интерактивных эффектах при наведении.

Классические градиенты в CSS описываются в sRGB — привычном цветовом пространстве браузеров. Но у sRGB есть ограничения: некоторые переходы выглядят тусклыми или неравномерными, особенно если использовать яркие и сложные оттенки.

Чтобы добиться более естественного восприятия цвета, в CSS можно использовать современные цветовые модели, например oklch. Эта модель разработана с учётом особенностей человеческого зрения: яркость, насыщенность и оттенок регулируются отдельно, а сами переходы кажутся глазу равномерными.

Пример градиента в oklch

background: linear-gradient(
  to right, 
  oklch(60% 0.28 150), 
  oklch(60% 0.28 300)
);

В oklch() три параметра:

  • Светлота (Lightness) — в примере это 60%. Определяет, насколько цвет яркий или тёмный.
  • Насыщенность (Chroma) — в примере 0.28. Чем выше значение, тем цвет «чище» и интенсивнее.
  • Оттенок (Hue) — в примере 150 и 300. Это положение цвета на цветовом круге в градусах.

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

Сравнение с классическим sRGB

Для наглядности создадим два блока: один с градиентом в sRGB, второй в oklch. На ярких цветах разница особенно заметна. 

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Сравнение градиентов</title>
  <style>
    .gradient-srgb {
      background: linear-gradient(to right, rgb(255, 0, 0), rgb(0, 0, 255));
      height: 100px;
      margin-bottom: 20px;
    }
    .gradient-oklch {
      background: linear-gradient(to right, oklch(60% 0.28 29), oklch(60% 0.28 264));
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="gradient-srgb"></div>
  <div class="gradient-oklch"></div>
</body>
</html>

В sRGB переход от красного к синему часто даёт заметную «грязь» в середине (тусклый фиолетовый), тогда как в oklch он будет выглядеть чище и ровнее для глаза.

Поддержка браузерами

На момент написания oklch() поддерживается в современных версиях Chrome, Edge, Safari и Firefox, но в старых браузерах работать не будет. Если проект должен быть кроссбраузерным, используйте fallback: 

background: linear-gradient(to right, red, blue); /* Fallback для старых браузеров */
background: linear-gradient(to right, oklch(60% 0.28 150), oklch(60% 0.28 300));

Где применять

oklch-градиенты особенно полезны:

  • В брендированных элементах, где важны точные оттенки.
  • В UI с большим количеством цветовых переходов (дашборды, карты, графики).
  • В промо-страницах и лендингах, где цвет — часть визуального вау-эффекта.

Итог

Переход на oklch в градиентах — это шаг к более качественной, естественной цветопередаче в вебе. Да, придётся проверять поддержку и добавлять fallback, но визуальная разница того стоит. Если вы работаете с современными интерфейсами и хотите, чтобы цвета выглядели так же хорошо, как в дизайне, — попробуйте oklch уже сегодня.