Генератор градиентов
и интерполяции цветов
Что такое интерполяция цветов
Интерполяция цветов — это математический процесс вычисления промежуточных значений между двумя точками в цветовом пространстве. Каждый градиент, который вы видите на сайтах, в приложениях и в интерфейсах, построен именно на этом принципе. Наш калькулятор позволяет задать начальный и конечный цвет, а затем автоматически рассчитывает все промежуточные оттенки.
Линейная интерполяция (RGB)
Самый распространенный метод. Значения каждого канала (R, G, B) изменяются равномерно от начального к конечному цвету. Формула: result = start + (end - start) * t, где t меняется от 0 до 1. Поддерживается всеми браузерами и CSS-движками.
RGB: плавный переход через все каналы
Интерполяция в HSL
Работает в пространстве оттенок-насыщенность-яркость. Позволяет обходить проблему «грязной середины», так как перемещается по цветовому кругу. Особенно хорош для переходов между яркими насыщенными цветами, сохраняя их чистоту на каждом шаге.
HSL: обход по цветовому кругу
Перцептивная равномерность
Человеческий глаз воспринимает яркость нелинейно: разница между 10% и 20% яркости кажется больше, чем между 80% и 90%. Пространства OKLAB и OKLCH учитывают это, создавая визуально однородные переходы без «выбросов» яркости.
Перцептивно равномерный переход
Где применяются градиенты
Цветовые переходы — универсальный инструмент, который используется практически в любой области дизайна и визуализации данных.
Веб-дизайн и UI
Фоны страниц, кнопки, карточки, прогресс-бары, навигационные панели. CSS-градиенты позволяют создавать современные интерфейсы без растровых изображений, что ускоряет загрузку сайта.
Визуализация данных
Тепловые карты, индикаторы значений, шкалы рейтингов. Градиент помогает интуитивно передать числовое значение через цвет — от холодных оттенков к теплым или от бледных к насыщенным.
Мобильные приложения
Сплэш-скрины, фоны экранов, иконки. Градиенты придают глубину интерфейсу, создавая ощущение объема и премиальности без увеличения размера приложения.
Геймдизайн
Небеса, водные поверхности, эффекты магии, шкалы здоровья. В играх градиенты используются повсеместно для создания атмосферы и визуальной обратной связи с игроком.
Графический дизайн
Постеры, обложки, баннеры, логотипы. Градиенты стали главным трендом в брендинге — от VK до 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-код в буфер обмена.
Часто задаваемые вопросы
Был ли этот калькулятор полезен?
Инструмент справочный — не заменяет эксперта
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Профессиональные решения — медицинские, финансовые, инженерные — должны приниматься только после консультации с квалифицированным специалистом. Не используйте автоматический расчёт как единственное основание для важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут ответственности за прямой или косвенный ущерб, возникший из-за использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию результатов.
Похожие калькуляторы
Калькулятор контрастности (WCAG), шрифтов и сетки
Инструменты UI/UX дизайнера. Проверка контрастности цветов (WCAG AA/AAA), расчет модульной сетки и подбор типографической шкалы.
/contrast-gridГенератор Cubic Bezier (CSS transition)
Интерактивный генератор кривых Безье для CSS анимаций. Визуальная настройка плавности переходов, пресеты (ease, linear) и копирование кода.
/cubic-bezierКалькулятор теории цвета: гармония, конвертер, палитры, смешивание, дальтонизм
Комплексный инструмент для работы с цветом: цветовые гармонии (комплементарная, аналогичная, триадная, тетрадная), конвертер HEX/RGB/HSL/HSV/CMYK, генератор палитр (монохроматическая, shades, tints, tones), смешивание цветов (аддитивное/субтрактивное), симулятор дальтонизма и анализ цветовой температуры.
/color-theory-calculatorКалькулятор Responsive Margin/Padding (Clamp generator)
Генератор CSS функции clamp() для адаптивных отступов и шрифтов. Создайте отзывчивый дизайн (fluid spacing) от мобильных до десктопа онлайн.
/responsive-helperКалькулятор типографики: Type Scale, межстрочный, Fluid Typography
Комплексный типографический калькулятор. Модульная шкала (Type Scale), расчёт межстрочного интервала (line-height), оптимальная длина строки, вертикальный ритм (baseline grid), подбор пар шрифтов и Fluid Typography с CSS clamp().
/typography-calculatorКалькулятор PPI и DPI (плотность пикселей)
Рассчитайте PPI экрана, размер пикселя и физические размеры монитора/телефона. Конвертер пикселей в сантиметры.
/ppi-calculatorКалькулятор UX-метрик: SUS, NPS, HEART, A/B-тест, эвристики Нильсена
Комплексный калькулятор UX-метрик: System Usability Scale (SUS), Net Promoter Score (NPS), HEART framework Google, статистическая значимость A/B-тестов, эвристическая оценка Нильсена (10 эвристик), метрики выполнения задач (Task Success Rate, Efficiency).
/ux-metrics-calculatorГенератор favicon из текста
Создание иконки сайта (favicon) из буквы, эмодзи или символа. Генерация ICO, PNG, SVG для всех устройств с готовым HTML-кодом.
/generator-faviconКалькулятор CSS единиц (PX, REM, EM, %)
Конвертер пикселей в rem/em и генератор calc(). Удобный инструмент для верстки и адаптивного дизайна.
/css-unit-converterКалькулятор пропорций золотого сечения
Расчёт пропорций по золотому сечению (φ = 1.618). Визуализация золотого прямоугольника и спирали Фибоначчи.
/zolotoe-sechenieКонвертер типографских единиц
Конвертация между пунктами, мм, пикселями, em/rem. Типографская шкала, пика, цицеро, дюймы.
/konverter-tipografskih-edinicКонвертер цветовых пространств
Конвертация цветов между CMYK, RGB, HEX, HSL, HSV с визуальным предпросмотром. Цветовые гармонии и контрастность WCAG.
/konverter-cvetov-cmyk-rgb-hexКалькулятор соотношения сторон
Расчёт и пересчёт соотношения сторон изображения/видео. Определение ratio, пересчёт размеров, кроп.
/sootnoshenie-storonКалькулятор DPI и размера печати
Пересчёт пикселей в размер печати при заданном DPI. Форматы A4-A0, фотопечать, полиграфия.
/kalkulyator-dpi-pechatГенератор цветовых палитр
Подбор гармоничных цветовых сочетаний: комплементарные, аналогичные, триадные. Экспорт в CSS, Tailwind, SCSS.
/generator-cvetovyh-palitr