Генератор цветовой шкалы
Мгновенно создавайте плавную цветовую шкалу из N шагов между двумя цветами. Выбирайте начальный и конечный цвета с помощью встроенных средств выбора или 10 пар предустановок, задавайте шаги от 2 до 50 и переключайтесь между интерполяцией RGB и HSL, чтобы увидеть разницу. Просматривайте значения HEX, RGB и HSL каждого шага и экспортируйте масштаб в виде градиента CSS, пользовательских свойств CSS или конфигурации Tailwind. Полностью конфиденциальный, 100% бесплатный и не требующий регистрации.
Preset Pairs
Colors
Settings
RGB interpolates linearly in RGB space - good for simple gradients.
Color Scale
Зачем использовать наш генератор цветовой шкалы?
- Настраиваемое количество шагов и режимы: генератор цветовой шкалы позволяет выбирать от 2 до 50 шагов и переключаться между режимами линейной интерполяции RGB и интерполяции HSL. Отрегулируйте количество шагов с помощью ползунка, выберите одну из 10 предустановленных пар цветов или введите собственные значения HEX для точной настройки масштаба.
- Режимы интерполяции RGB и HSL: интерполяция RGB создает плавный линейный переход между двумя цветами в пространстве RGB, в то время как интерполяция HSL проходит через цветовое пространство HSL для получения более плавных градиентов восприятия. Мгновенно переключайтесь между режимами, чтобы сравнить разницу.
- 100% конфиденциальность — без загрузки: вся генерация цветовой шкалы происходит локально в вашем браузере. Ваши значения цвета никогда не покидают ваше устройство и никогда не отправляются на какой-либо сервер — это безопасно для клиентских проектов и собственных систем проектирования.
- Бесплатно и без ограничений: создавайте неограниченные цветовые шкалы без регистрации, подписки и ограничений на использование. Генератор цветовой шкалы полностью бесплатен навсегда, и никакая реклама не блокирует интерфейс.
Распространенные случаи использования генератора цветовой шкалы
- Токены и переменные дизайна CSS. Разработчики систем дизайна используют генератор цветовой шкалы для создания ступенчатых цветовых шкал для пользовательских свойств CSS. Создавайте одинаковые цветовые токены, такие как --scale-1– --scale-10, с равномерно распределенными шагами между двумя фирменными цветами для использования во всем приложении.
- Цветовые палитры системы дизайна. Дизайнеры используют генератор цветовой шкалы для создания структурированных цветовых палитр на основе фирменных цветов. Сгенерированные шаги предоставляют промежуточные значения, которые можно использовать для состояний наведения, активных состояний, границ и фона, обеспечивая визуальную согласованность всех компонентов пользовательского интерфейса.
- Визуализация данных и диаграммы. Разработчики визуализации данных используют генератор цветовой шкалы для создания последовательных цветовых шкал для диаграмм, графиков и тепловых карт. Равномерно распределенные шаги гарантируют, что каждая точка данных будет иметь визуально различимый цвет, сохраняя при этом последовательный градиент во всей визуализации.
- Карты температуры и серьезности: информационные панели аналитики используют генератор цветовой шкалы для создания цветовых шкал для карт температуры, индикаторов серьезности и индикаторов выполнения. Ступенчатая шкала от красного до зеленого или от синего до оранжевого обеспечивает четкую визуальную дифференциацию каждого порогового уровня.
- Пользовательские конфигурации Tailwind CSS. Разработчики, использующие Tailwind CSS, могут экспортировать сгенерированную цветовую шкалу непосредственно в виде токенов конфигурации Tailwind. Каждый шаг становится именованной записью цвета, которую можно использовать во всем проекте с помощью служебных классов Tailwind, таких как bg-scale-3 или text-scale-7.
- Рекомендации по использованию бренда в печатной и цифровой форме. Бренд-менеджеры используют генератор цветовой шкалы для документирования градиентных переходов для обеспечения бренда. Промежуточные значения HEX гарантируют, что переходы цветов бренда могут быть точно воспроизведены как в цифровых, так и в печатных материалах.
Что такое цветовая шкала?
Цветовая шкала — это последовательность равномерно расположенных цветов, которые плавно переходят от начального цвета к конечному цвету. Каждый шаг шкалы представляет собой промежуточный цвет в определенной позиции между двумя конечными точками. Генератор цветовой шкалы вычисляет эти промежуточные значения с помощью математической интерполяции, создавая набор цветов, которые можно использовать в системах дизайна, визуализации данных и библиотеках компонентов пользовательского интерфейса.
Как работает наш генератор цветовой шкалы
- Выберите цвета: выберите начальный и конечный цвет с помощью встроенной палитры цветов или напрямую введите шестнадцатеричные значения. Вы также можете выбрать одну из 10 предустановленных цветовых пар, таких как «Закат», «Океан» или «Лаванда», чтобы быстро приступить к работе. Нажмите «Поменять местами», чтобы изменить направление масштаба.
- Установите количество шагов: используйте ползунок или введите число, чтобы выбрать от 2 до 50 шагов. Большее количество шагов создает более тонкий градиент с меньшими различиями в цвете между каждым соседним шагом.
- Выберите режим интерполяции: режим RGB интерполирует линейно через цветовой куб RGB, а режим HSL интерполирует через цилиндр HSL для более плавных переходов. Переключайтесь между ними, чтобы увидеть, какой из них лучше всего подходит для вашей цветовой пары.
- Исследование и экспорт. Щелкните любой образец, чтобы просмотреть его подробные значения HEX, RGB и HSL. Экспортируйте полный масштаб в виде шестнадцатеричных значений, кода градиента CSS, пользовательских свойств CSS или токенов конфигурации Tailwind.
Интерполяция RGB и HSL
- Интерполяция RGB преобразует каждый цветовой канал (красный, зеленый, синий) независимо, используя линейную интерполяцию. Это самый простой и быстрый метод, создающий прямой прямой путь через цветовой куб RGB. Интерполяция RGB хорошо работает для большинства цветовых пар и создает естественные градиенты.
- Интерполяция HSL преобразует оба цвета в цветовое пространство HSL (оттенок, насыщенность, яркость) и интерполирует каждый компонент независимо. Значение оттенка использует интерполяцию кратчайшего пути, чтобы избежать длительного обхода цветового круга. Интерполяция HSL часто дает более однородные по восприятию переходы, особенно когда начальный и конечный цвета имеют разные оттенки.
- Выбор правильного режима: RGB обычно предпочтительнее для простых градиентов от бренда к бренду, где точность цветопередачи имеет значение. HSL лучше подходит для цветовых шкал, используемых при визуализации данных, где важна однородность восприятия. Поэкспериментируйте с обоими режимами, чтобы увидеть, какой из них дает наиболее визуально приятный результат для вашей конкретной цветовой пары.
Конфиденциальность, безопасность и доступность
100% обработка на стороне клиента: наш генератор цветовой шкалы полностью работает в вашем браузере с использованием JavaScript. Никакие значения цвета никогда не загружаются, не сохраняются и не передаются на какой-либо сервер. Это делает его безопасным для чувствительных клиентских проектов и собственных систем проектирования.
Никакой регистрации или ограничений: генератор цветовой шкалы совершенно бесплатен, не требует учетной записи, ограничений на использование и дополнительных функций. Создавайте неограниченные цветовые шкалы мгновенно и без каких-либо ограничений.
Часто задаваемые вопросы
Генератор цветовой шкалы создает последовательность равномерно расположенных цветов, которые плавно переходят от начального цвета к конечному цвету. Наш генератор цветовой шкалы позволяет выбирать от 2 до 50 шагов, поддерживает режимы интерполяции RGB и HSL и предоставляет промежуточные значения HEX, RGB и HSL для каждого шага.
Сначала выберите начальный и конечный цвет с помощью палитры цветов или напрямую введите шестнадцатеричные значения. Вы также можете щелкнуть любую пару предустановок (например, «Закат» или «Океан»), чтобы быстро загрузить часто используемые комбинации. Затем с помощью ползунка «Шаги» выберите, сколько промежуточных цветов вы хотите (2–50). Наконец, переключитесь между режимами интерполяции RGB и HSL, чтобы увидеть, какой из них обеспечивает лучший градиент для ваших цветов.
Интерполяция RGB линейно перемещает каждый цветовой канал (красный, зеленый, синий) между двумя цветами, создавая прямой прямой путь через цветовой куб RGB. Интерполяция HSL преобразует цвета в цветовое пространство HSL и интерполирует оттенок, насыщенность и яркость отдельно — с интерполяцией оттенка по кратчайшему пути, чтобы избежать неправильного движения по цветовому кругу.
Генератор цветовой шкалы поддерживает от 2 до 50 шагов. Оптимальное количество зависит от вашего варианта использования: 5–10 шагов хорошо подходят для цветовых токенов системы проектирования, 8–15 шагов идеально подходят для масштабов визуализации данных, а 20–50 шагов создают очень тонкий градиент, подходящий для тепловых карт или непрерывных цветовых шкал.
Да. Вся генерация цветовой шкалы происходит на 100% на стороне клиента в вашем браузере. Ваши значения цвета никогда не отправляются на какой-либо сервер, никогда не сохраняются и никогда никуда не передаются. Генератор цветовой шкалы полностью конфиденциальен и обрабатывает все локально на вашем устройстве.
Генератор цветовой шкалы предоставляет несколько вариантов экспорта. Вы можете скопировать все значения HEX в виде списка, разделенного запятыми, скопировать строку градиента CSS, скопировать пользовательские свойства CSS (переменные CSS) или скопировать фрагмент конфигурации CSS Tailwind. Также можно щелкнуть каждый шаг, чтобы увидеть его отдельные значения HEX, RGB и HSL.
Генератор оттенков и теней начинается с одного цвета и создает более светлые и темные варианты путем смешивания с белым и черным соответственно. Генератор цветовой шкалы интерполирует два разных цвета, создавая градиент, который может переходить от одного оттенка к совершенно другому — например, от красного к синему или от зеленого к фиолетовому.
Да. Генератор цветовой шкалы абсолютно бесплатен, не требует регистрации, не имеет дополнительных функций и ограничений на использование. Создавайте неограниченные цветовые гаммы без каких-либо ограничений или скрытых затрат. Нет рекламы, блокирующей интерфейс.