# Генератор цветовых тонов

Создавайте оттенки цвета, смешивая его с нейтральным серым в равных пропорциях: насыщенность будет снижаться, а тон останется прежним. Введите один цвет в любом формате CSS, выберите от 2 до 20 шагов и цветовое пространство — и получите таблицу со значениями HEX, RGB, HSL и OKLCH для каждого оттенка, начиная с исходного цвета. Полезно для приглушенных палитр, неактивных состояний, неброских поверхностей и более спокойных вариантов фирменных цветов.

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

### Что такое тон?

Тон — это цвет, смешанный с серым. Он сохраняет свой оттенок и становится более приглушенным. В отличие от него, светлый оттенок смешивают с белым, а темный — с черным.

### Какой серый используется?

Средний серый sRGB #808080, rgb(128 128 128). Поэтому светлые цвета становятся немного темнее, а темные — немного светлее, приближаясь к нему. Чтобы смешать цвет с другим оттенком серого, воспользуйтесь микшером цветов и задайте нужный серый.

### Как распределяются шаги?

При N шагах в строке k цвет смешивается с долей серого (k - 1) / N, поэтому при 10 шагах получаются 0%, 10%, 20% и так далее до 90%. Первая строка всегда содержит исходный цвет, а чистый серый в список не входит.

### Чем тон отличается от снижения насыщенности HSL?

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

### Чем отличается смешивание в sRGB от смешивания в OKLab?

При смешивании в sRGB усредняются значения каналов с гамма-кодированием — классический подход в диаграммах оттенков, похожих на краски, и Sass mix(). При смешивании в OKLab используется перцептивное пространство, поэтому насыщенность снижается равномернее от шага к шагу.

### Какие форматы ввода можно использовать?

HEX-коды с # или без него, названия цветов CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() и cmyk(). За один запуск вводите один цвет.

### Сколько оттенков можно создать?

От 2 до 20 за один запуск, по умолчанию — 10. В это число входит исходный цвет в первой строке.

### Какие значения отображаются в таблице?

Для каждого шага отображаются доля серого, шестнадцатеричный код, rgb(), hsl() и oklch() в современном синтаксисе CSS. Каналы RGB — целые числа, значения в процентах HSL содержат до двух знаков после запятой, а светлота и насыщенность OKLCH — до четырех.

### Что происходит с прозрачными цветами и цветами широкого цветового охвата?

Прозрачность исходного цвета сохраняется для каждого оттенка, поэтому шестнадцатеричные коды содержат 8 цифр. Цвета за пределами цветового охвата sRGB преобразуются в него по алгоритму CSS Color 4 в столбцах HEX, RGB и HSL, а в столбце OKLCH отображается исходное значение без преобразования.

### Как воссоздать оттенок в CSS?

Скопируйте шестнадцатеричное значение или значение oklch() либо позвольте браузеру смешать его с помощью color-mix(in oklab, var(--brand) 70%, #808080) для получения тона с долей 30% в настройке OKLab. color-mix() работает во всех современных основных браузерах.

Ваша реклама здесь?

[Напишите нам по электронной почте](mailto:hi@dennn.is?subject=%D0%A0%D0%B5%D0%BA%D0%BB%D0%B0%D0%BC%D0%B0%20%D0%BD%D0%B0%20OneClick%20Pro)

[Реклама Набор плагинов для работы агентов с WordPress.](https://sleekwp.com/?ref=oneclickpro)