Генератор градиентов
и интерполяции цветов
Что такое интерполяция цветов
Интерполяция цветов — это математический процесс вычисления промежуточных значений между двумя точками в цветовом пространстве. Каждый градиент, который вы видите на сайтах, в приложениях и в интерфейсах, построен именно на этом принципе. Наш калькулятор позволяет задать начальный и конечный цвет, а затем автоматически рассчитывает все промежуточные оттенки.
Линейная интерполяция (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-код в буфер обмена.
Часто задаваемые вопросы
Лиана Арифметова
Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».
Отказ от ответственности
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.
Похожие инструменты
Калькулятор мероприятий: бюджет, площадка, кейтеринг
Калькулятор организации мероприятий. Бюджет конференции, корпоратива, выставки. Площадка, кейтеринг, оборудование, программа.
Калькулятор DNS
Расчёты DNS: записи, TTL, производительность, DNSSEC, миграция, стоимость
Конвертер размеров одежды (RU/EU/US/UK)
Перевод размеров между российской, европейской, американской и британской системами. Мужская, женская, детская.
Калькулятор кредитного рейтинга (скоринг) и истории
Бесплатный расчет кредитного рейтинга и оценка шансов на кредит. Анализ факторов (просрочки, нагрузка). Рекомендации по улучшению истории.
Калькулятор пола ребёнка
Определение пола ребёнка по обновлению крови, китайскому и японскому календарям, группе крови
Калькулятор водного следа
Расчёт потребления воды: быт, еда, одежда. Сравнение с мировым и российским средним.
Калькулятор времени работы от батареи
Автономность устройства: ёмкость мАч/Вт·ч, потребление, КПД преобразователя. Для IoT, Arduino и электроники.
Калькулятор механической обработки
Расчёты обработки: токарная, фрезерование, сверление, инструмент, мощность, время
Калькулятор автокредита (расчёт автокредита)
Рассчитайте ежемесячный платёж, переплату и график погашения автокредита. Первый взнос, КАСКО, сравнение банков РФ.
Калькулятор алиментов на детей
Расчёт алиментов на 1, 2, 3 и более детей: доля от дохода (25%, 33%, 50%) и фиксированная сумма по прожиточному минимуму. СК РФ ст. 81-83.
Калькулятор ремонта балкона
Расчёт стоимости ремонта балкона: остекление, утепление, отделка.
Калькулятор косметических рецептур: крем, шампунь, себестоимость
Калькулятор для косметологов. Рецептура крема, шампуня, бальзама. Себестоимость продукта и масштабирование партии.
Калькулятор мостиков холода: Psi, Chi, теплопотери, конденсат
Расчёт мостиков холода: линейный Psi, точечный Chi, теплопотери через узлы, температура поверхности, риск конденсата.
Калькулятор CSS единиц (PX, REM, EM, %)
Конвертер пикселей в rem/em и генератор calc(). Удобный инструмент для верстки и адаптивного дизайна.
Калькулятор косметического производства
Расчёты косметики: эмульсия HLB, SPF, консерванты, pH, масштабирование, себестоимость