Реклама мешает? Идти Без рекламы Сегодня 

Генератор цвета, оттенка и насыщенности

ЦветРазработчик

Реклама · УДАЛИТЬ?

ВХОД

Автоматический процесс

Базовый цвет

Color Picker

Шестигранник

Имя

Используется как ключ переменной в CSS, SCSS и JSON.

Метод смешивания

Метод

OKLCH обеспечивает наимягче и наиболее естественно выглядящий градиент. HSL и RGB проще, но могут выглядеть неравномерно.

Формат экспорта

Формат

ВЫХОД

Клиентская сторона

Реклама · УДАЛИТЬ?

Гид

Генератор оттенков и тонов цвета

Выберите шестнадцатеричный или RGB цвет и мгновенно получите 10 оттенков (цвет смешан с белым) и 10 тонов (смешанных с черным) в виде визуальных образцов. Нажмите на любой образец, чтобы скопировать его шестнадцатеричный код, или экспортируйте полный набор в виде CSS-свойств, SCSS-переменных, JSON или простого списка шестнадцатеричных кодов.

Как использовать

Выберите базовый цвет с помощью цветового изображения или вставьте любое шестнадцатеричное значение (3 или 6 цифр) в поле HEX.
Опционально: измените имя переменной (используется в экспортируемых ключах CSS/SCSS/JSON).
Выберите метод смешивания. OKLCH обеспечивает наимягче градиент, HSL — классический подход веб-среды, а RGB — самый простой линейный метод смешивания.
Выберите формат экспорта. Экспорт обновляется в реальном времени при изменении любого параметра.
Нажмите на любой образец, чтобы скопировать его шестнадцатеричный код, или используйте кнопки «Скопировать» / «Скачать» на панели экспорта кода.

Возможности

10 оттенков + 10 тонов — две полосы образцов с шагом 10%, от тонкого 10% смешивания до почти чистого 100% смешивания.
Три метода смешивания — OKLCH для однородных шагов, HSL для сохранения оттенка при изменении яркости или прямой RGB.
Образцы с возможностью копирования — каждый элемент показывает свой шестнадцатеричный код и копирует его в буфер обмена при одном клике.
Множество форматов экспорта — CSS-свойства, SCSS-переменные, JSON-палитра или простой читаемый список шестнадцатеричных кодов.
Живой предварительный просмотр — любое изменение цвета, имени, метода или формата мгновенно перерисовывает образцы и код.
Скачать экспорт — сохранить сгенерированную палитру в файле с правильным расширением для выбранного формата.

 Часто задаваемые вопросы

Какова разница между оттенком и тоном?

Оттенок — это исходный цвет, смешанный с белым, что делает его светлее и мягче. Тон — это исходный цвет, смешанный с черным, что делает его темнее и глубже. Вместе они формируют диапазон одного оттенка.
Почему OKLCH обычно выглядит гладче, чем RGB или HSL?

OKLCH разработан таким образом, чтобы соответствовать восприятию человеческим глазом яркости и насыщенности, поэтому равные числовые шаги выглядят как равные визуальные шаги. RGB и HSL работают в пространстве цветов устройства, поэтому одинаковый численный шаг может выглядеть как значительно больший или меньший скачок в зависимости от того, где вы находимся на шкале.
Каковы различия между оттенками/тонами и цветовой палитрой?

Палитра — это подобранная совокупность различных оттенков, которые работают вместе (например, основной, акцент и нейтральные цвета). Оттенки и тона — это вариации одного оттенка вдоль оси светло-темно. В системах пользовательского интерфейса обычно используют оба: выбирают несколько базовых оттенков, затем генерируют оттенки и тона каждого из них.