Комментарии 14
Самый очевидный фикс для таких градиентов - учесть гамма-коррекцию.
Средний между жёлтым #FFFF00 и синим #0000FF цвет - это не #7F7F7F и не #808080. Средний цвет приблизительно равен #BABABA. Вот так примерно выглядит математически корректный линейный градиент:
Сама идея перехода от декартовых координат к цилиндрическим - правильная. Но выбор для этого модели HSB, вероятно, наихудший из возможных. Автор недоразобрался в теории и вынужден шаманить какие-то странные костыли типа сдвига тона или выноса точек за пределы фигуры. Всё это лишнее.
На самом деле нужно просто использовать OKLCh (олдскульную CIE LCh тоже можно, но практического смысла нет). И даже в CSS это будет работать из коробки (хотя фоллбек сделать желательно).
Ну и комментарий выше насчет гамма-коррекции правильный - это чуть менее полноценное, но тоже вполне рабочее решение.
Тоже не понял, зачем эти костыли с вычислением промежуточного цвета. Даже я, кодер-фронтендщик, знаю про oklch и oklab, а тут пост от дизайнера, который, по идее, должен в этом разбираться на порядок лучше. Может быть, Фигма не поддерживает другие пространства, кроме rgb? Если так, тогда статья имеет право на жизнь.
Да, фигма умеет интерполировать цвет только в RGB, поэтому как раз промежуточная точка - нужный костыль. Я бы вычислил её в OKLCh и добавил бы, просто чтобы макеты нормально выглядели. Но рядом оставил бы комментарий, что в коде достаточно оставить только крайние, но указать in oklch. А вот все прочие телодвижения в статье лишние.
Именно. Фигма не умеет делать градиенты. В Фотошопе как ни двигай Hue туда-сюда, Saturation всегда одинаковый, и градиенты всегда чистые. Быстро и просто, без костылей
ФШ умеет учитывать гамма-коррекцию, поэтому там результаты значительно лучше.
Но вообще говоря, грязь в середине градиента можно получить и там тоже, хотя и менее выраженную (с оговоркой, что я пользуюсь относительно старой версией, возможно в последних уже иначе).
Проблема может быть не просто в том, что цвет градиента средний, а в том, что сами цвета имеют не линейную, а квадратичную зависимость.
То есть на самом деле разница между 000000 и 888888 гораздо меньше, чем между 888888 и FFFFFF.
Таким образом, когда мы линейто интерполируем между 0000FF и 00FF00, в середине у нас есть некий 008888, который в 2 раза более тусклый, нежели настоящий цвет между этими значениями. Потому то градиент в середине и выглядит серым.
Существуют скорректированные формулы градиентов (квадратичная интерполяция) и более продвинутые цветовые пространства, не имеющие этой проблемы, ими и нужно пользоваться.
Хотя авторский хак и решает эту проблему похожим способом.
Помнится была такая статья https://habr.com/ru/articles/645165/
Сделать это можно руками или с помощью сервисов, генерирующих радиальные переходы и подбирающих промежуточный цвет.
ОК, пробуем данный сервис:
1) Тыкаем пипетку в образец автора (который Бро), получаем:
#FD0302 и #04FDEC
2) Закидываем в чудо-сервис
3) Измеряем серединку: #6a6e74. То есть, красивый серый цвет.
Как делать чистые градиенты