Генератор градиентов
и интерполяции цветов
Что такое интерполяция цветов
Интерполяция цветов — это математический процесс вычисления промежуточных значений между двумя точками в цветовом пространстве. Каждый градиент, который вы видите на сайтах, в приложениях и в интерфейсах, построен именно на этом принципе. Наш калькулятор позволяет задать начальный и конечный цвет, а затем автоматически рассчитывает все промежуточные оттенки.
Линейная интерполяция (RGB)
Самый распространенный метод. Значения каждого канала (R, G, B) изменяются равномерно от начального к конечному цвету. Формула: result = start + (end - start) * t, где t меняется от 0 до 1. Поддерживается всеми браузерами и CSS-движками.
RGB: плавный переход через все каналы
Интерполяция в HSL
Работает в пространстве оттенок-насыщенность-яркость. Позволяет обходить проблему «грязной середины», так как перемещается по цветовому кругу. Особенно хорош для переходов между яркими насыщенными цветами, сохраняя их чистоту на каждом шаге.
HSL: обход по цветовому кругу
Перцептивная равномерность
Человеческий глаз воспринимает яркость нелинейно: разница между 10% и 20% яркости кажется больше, чем между 80% и 90%. Пространства OKLAB и OKLCH учитывают это, создавая визуально однородные переходы без «выбросов» яркости.
Перцептивно равномерный переход
Где применяются градиенты
Цветовые переходы — универсальный инструмент, который используется практически в любой области дизайна и визуализации данных.
Веб-дизайн и UI
Фоны страниц, кнопки, карточки, прогресс-бары, навигационные панели. CSS-градиенты позволяют создавать современные интерфейсы без растровых изображений, что ускоряет загрузку сайта.
Визуализация данных
Тепловые карты, индикаторы значений, шкалы рейтингов. Градиент помогает интуитивно передать числовое значение через цвет — от холодных оттенков к теплым или от бледных к насыщенным.
Мобильные приложения
Сплэш-скрины, фоны экранов, иконки. Градиенты придают глубину интерфейсу, создавая ощущение объема и премиальности без увеличения размера приложения.
Геймдизайн
Небеса, водные поверхности, эффекты магии, шкалы здоровья. В играх градиенты используются повсеместно для создания атмосферы и визуальной обратной связи с игроком.
Графический дизайн
Постеры, обложки, баннеры, логотипы. Градиенты стали главным трендом в брендинге — от Instagram до Firefox, ведущие бренды используют их в своей айдентике.
Email-маркетинг
Хедеры писем, CTA-кнопки, разделители. Даже в email-верстке CSS-градиенты поддерживаются большинством клиентов (Gmail, Outlook.com, Apple Mail).
CSS-градиенты/ полное руководство
CSS поддерживает три типа градиентов: линейный, радиальный и конический. Каждый из них принимает список цветов (color stops) и направление. Градиенты в CSS — это значения свойства background-image, а не цвета, поэтому их можно комбинировать с другими фонами.
linear-gradient (линейный)
Цвета сменяются по прямой линии. Задайте угол или направление (to right, to bottom-left, 135deg) и перечислите цвета. Можно указать позицию каждого цвета в процентах.
background: linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #0000ff 100%);radial-gradient (радиальный)
Цвета расходятся из одной точки кругами наружу. Можно задать форму (circle или ellipse), размер и позицию центра (at center, at top left).
background: radial-gradient(circle at center, #ff0000, #0000ff);conic-gradient (конический)
Цвета распределяются по кругу, как циферблат часов. Идеально для круговых диаграмм, спиннеров загрузки и декоративных элементов. Начальный угол задается через from.
background: conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #0000ff, #ff0000);repeating-linear-gradient (повторяющийся)
Создает бесконечно повторяющийся паттерн. Незаменим для полосатых фонов, текстур «под ткань» и декоративных полос. Работает аналогично и для radial, и для conic.
background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);Совет: используйте полупрозрачные цвета (rgba или hsla) для создания наложений поверх изображений. Например, rgba(0,0,0,0.5) создаст затемнение.
Производительность: CSS-градиенты рендерятся GPU и не требуют загрузки файлов. Один градиент заменяет изображение размером 10-50 КБ.
Цветовые пространства и форматы
Понимание цветовых моделей помогает осознанно выбирать оттенки и создавать гармоничные переходы. Каждая модель описывает цвет по-своему, и от выбора зависит результат интерполяции.
HEX (шестнадцатеричный)
#FF5733Самый популярный формат в вебе. Шесть символов (0-9, A-F) после решетки кодируют три канала по 256 значений: красный, зеленый и синий. Сокращенная запись #F53 эквивалентна #FF5533. Удобен для CSS, дизайн-макетов и коммуникации между дизайнерами и разработчиками.
RGB (красный, зеленый, синий)
rgb(255, 87, 51)Десятичная запись тех же трех каналов (0-255). Удобна для программной генерации цвета и математических вычислений. Расширенная форма rgba() добавляет четвертый канал — прозрачность (alpha) от 0 до 1. Именно в RGB-пространстве работает наш калькулятор при интерполяции.
HSL (оттенок, насыщенность, яркость)
hsl(14, 100%, 60%)Более интуитивная модель для человека. Оттенок (H) — угол на цветовом круге (0-360), насыщенность (S) — от серого до чистого цвета (0-100%), яркость (L) — от черного до белого (0-100%). Удобна для подбора палитр: меняя только H, вы получаете гармоничные цвета одной «температуры».
OKLCH / OKLAB (перцептивные)
oklch(0.7 0.15 30)Современные пространства, учитывающие особенности человеческого зрения. Обеспечивают визуально равномерные переходы: каждый шаг градиента выглядит одинаково по яркости и насыщенности. Поддерживаются в CSS через color() и oklch(). Рекомендуются для дизайн-систем с высокими требованиями к цвету.
Советы по работе с градиентами
Практические рекомендации, которые помогут создавать красивые и функциональные цветовые переходы в ваших проектах.
1Избегайте «грязной середины»
При смешении комплементарных цветов (красный + зеленый, синий + оранжевый) в RGB середина градиента часто получается мутной. Решение: добавьте промежуточную точку остановки (color stop) — яркий третий цвет, который проведет переход через чистые оттенки вместо серых.
2Используйте аналогичные цвета
Цвета, расположенные рядом на цветовом круге (аналогичные), создают самые плавные и естественные градиенты. Например, переход от синего к фиолетовому или от оранжевого к желтому всегда выглядит гармонично без дополнительных настроек.
3Проверяйте доступность текста
Если поверх градиента размещен текст, убедитесь, что контрастность достаточна во всех точках перехода, а не только в начале и конце. Самое слабое место — середина градиента, где яркость может быть слишком близкой к цвету текста.
4Ограничивайте количество цветов
Два-три цвета в градиенте — оптимальный выбор. Больше цветов усложняют восприятие и могут создать «радужный» эффект, который выглядит непрофессионально. Если нужно больше оттенков, лучше использовать несколько последовательных двухцветных градиентов.
5Тестируйте на разных экранах
Цветопередача отличается на IPS, OLED, TN-матрицах и при печати. Тонкие градиенты (близкие по яркости) могут «схлопнуться» на дешевых мониторах, а насыщенные — пересветиться на OLED. Проверяйте результат на нескольких устройствах.
6Используйте градиент как акцент
Не обязательно заливать весь экран. Градиент отлично работает как акцентный элемент: подчеркивание заголовка, боковая полоса карточки, hover-эффект кнопки. Точечное применение привлекает внимание, не перегружая дизайн.
Как пользоваться калькулятором
Простая пошаговая инструкция для создания идеального градиента за несколько секунд.
Выберите начальный цвет
Кликните на палитру Start Color или введите HEX-код вручную. Можно воспользоваться готовыми пресетами: Sunset, Ocean, Forest и другими.
Выберите конечный цвет
Аналогично задайте End Color. Попробуйте начать с аналогичных оттенков — они дают самые гармоничные переходы.
Настройте количество шагов
Двигайте слайдер Steps от 2 до 24. Чем больше шагов, тем плавнее переход. Для веба обычно достаточно 6-10 шагов.
Скопируйте результат
Наведите на превью и нажмите «Копировать CSS». Кликните на любой цвет палитры, чтобы скопировать его HEX-код в буфер обмена.
Часто задаваемые вопросы
Лиана Арифметова
Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».
Был ли этот калькулятор полезен?
Отказ от ответственности
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.
Похожие инструменты
Калькулятор ремонта балкона
Расчёт стоимости ремонта балкона: остекление, утепление, отделка.
Калькулятор бутстрэп и байесовских оценок
Выполните ресемплинг методом Бутстрэп и оцените параметры с помощью Байесовского вывода. Доверительные и кредибельные интервалы онлайн.
Калькулятор загрузки паллет/контейнера
Расчёт оптимальной загрузки контейнера или паллета. 20ft, 40ft, еврофура, газель. Количество коробок и заполняемость.
Калькулятор кредитной нагрузки (ПДН)
Расчёт показателя долговой нагрузки (ПДН). Оценка шансов на одобрение кредита по требованиям ЦБ РФ.
Калькулятор кредиторской задолженности
Рассчитайте оборачиваемость кредиторской задолженности, DPO, эффективность использования торгового кредита и скидки за раннюю оплату.
Калькулятор SaaS-метрик: Unit-экономика, MRR, Churn, Runway
Комплексный калькулятор SaaS-метрик: unit-экономика (CAC, LTV, LTV/CAC, ARPU, ARPPU), метрики выручки (MRR, ARR, Quick Ratio), анализ оттока (Churn, NRR, когорты), метрики роста (Rule of 40, T2D3), воронка конверсий и финансовые прогнозы (runway, burn rate).
Калькулятор краудфандинговой кампании
Количество бэкеров, чистая прибыль, комиссии Planeta.ru и Boomstarter, налог УСН 6%.
Калькулятор прививок (календарь вакцинации)
Календарь вакцинации РФ по возрасту. Национальный календарь прививок, сроки ревакцинации.
Калькулятор барбекю / гриля
Расчёт мяса, овощей, углей и напитков на компанию. Маринад, бюджет, шампуры. Свинина, курица, говядина, баранина.
Калькулятор навеса
Расчёт навеса: размеры, каркас, кровля, фундамент, стоимость. Односкатный, двускатный, арочный. Поликарбонат, профнастил.
Калькулятор ER (Engagement Rate)
Расчёт вовлечённости (ER) для Telegram, VK, YouTube. Формулы ERR, ER by followers, бенчмарки и интерпретация результатов.
Калькулятор точного земледелия
Расчёт норм внесения удобрений, высева, СЗР и экономии ресурсов при дифференцированном подходе. ROI от GPS, дронов и датчиков.
Генератор Open Graph тегов
Создание OG-тегов для корректного отображения ссылок в VK, Telegram, Facebook и Twitter. Предпросмотр карточки и готовый HTML-код.
Калькулятор планирования учёбы и подготовки к экзаменам
Планировщик подготовки к ЕГЭ/ОГЭ, Парето-анализ тем, матрица Эйзенхауэра для учёбы и расписание интервальных повторений по алгоритму SM-2.
Калькулятор площади ожога (правило девяток)
Расчёт площади ожога по правилу Уоллеса и Ланду-Браудеру. TBSA %, формула Паркленда для инфузионной терапии.