Генератор градиентов
и интерполяции цветов
Что такое интерполяция цветов
Интерполяция цветов — это математический процесс вычисления промежуточных значений между двумя точками в цветовом пространстве. Каждый градиент, который вы видите на сайтах, в приложениях и в интерфейсах, построен именно на этом принципе. Наш калькулятор позволяет задать начальный и конечный цвет, а затем автоматически рассчитывает все промежуточные оттенки.
Линейная интерполяция (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-код в буфер обмена.
Часто задаваемые вопросы
Лиана Арифметова
Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».
Отказ от ответственности
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.
Похожие инструменты
Калькулятор амортизации кредита (график платежей)
Рассчитайте аннуитетные и дифференцированные платежи по кредиту. График погашения, переплата, досрочное погашение.
Калькулятор дивидендов (доходность и DRIP)
Рассчитайте дивидендную доходность, чистый доход после НДФЛ, прогноз роста с реинвестированием (DRIP). Сравнение с депозитом.
Калькулятор опросов и NPS
Анализ шкалы Ликерта, расчёт NPS, параметры социологического опроса и стоимость полевого исследования. CATI/CAWI/CAPI методология.
Калькулятор аналоговых схем
Расчет коэффициента усиления (Av, Ai, Ap, дБ) и схем смещения биполярных транзисторов (Fixed, Emitter, Divider Bias).
Калькулятор бережливого производства (Lean)
Расчёты Lean: время такта, OEE, канбан, 5S аудит, SMED, VSM метрики
Калькулятор страхования (ОСАГО, КАСКО, жизнь)
Рассчитайте стоимость ОСАГО по коэффициентам ЦБ РФ, КАСКО, страхование жизни и имущества. Все коэффициенты КБМ, КТ, КВС.
Калькулятор судебно-бухгалтерской экспертизы
Анализ финансового мошенничества: закон Бенфорда, метод чистой стоимости, реконструкция прибыли. Квалификация по УК РФ (ст. 159, 160, 201).
Калькулятор протезирования: длина протеза, K-levels, нагрузки и ортезы
Расчёты протезирования онлайн: длина протеза, функциональные уровни K-levels, нагрузка на протез, биомеханика сустава, подбор ортеза.
Калькулятор электрика
Расчет сечения кабеля, выбор автомата, расчет потерь напряжения и освещенности. Профессиональный инструмент.
Калькулятор реставрации и антиквариата
Оценка стоимости антикварных вещей с учетом возраста, износа, реставрации и индекса цен. Расчет амортизации.
Калькулятор кондитера: пересчет рецептов
Масштабирование рецептов для разных форм, пересчет граммов в стаканы и ложки. Инструмент для кондитеров.
Калькулятор пружины (закон Гука)
Сила пружины, потенциальная энергия, период колебаний. Последовательное и параллельное соединение пружин.
Калькулятор анионного промежутка (AG)
Рассчитайте анионный промежуток по формуле Na-(Cl+HCO3). Коррекция по альбумину, дельта-дельта соотношение. Диагностика ацидоза.
Калькулятор контрастности (WCAG), шрифтов и сетки
Инструменты UI/UX дизайнера. Проверка контрастности цветов (WCAG AA/AAA), расчет модульной сетки и подбор типографической шкалы.
Калькулятор соотношения сторон (Aspect Ratio)
Калькулятор пропорций (16:9, 4:3), ресайз изображений и расчет битрейта видео. Удобный инструмент для дизайнеров.