# Генератор оттенков с белым

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

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

### Что такое светлый оттенок?

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

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

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

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

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

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

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

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

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

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

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

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

Альфа-канал исходного цвета сохраняется для каждого светлого оттенка, поскольку белый смешивается с тем же значением альфа-канала. Тогда HEX-коды состоят из 8 цифр, а функции CSS заканчиваются значением альфа-канала после косой черты.

### Что происходит с цветами за пределами sRGB?

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

### Как использовать светлые оттенки в CSS?

Скопируйте значения HEX или oklch() в пользовательские свойства, например --brand-100 и --brand-200. Чтобы выполнить смешивание в браузере, используйте color-mix(in oklab, var(--brand) 80%, white): результатом будет тот же оттенок с 20% белого, что и при настройке OKLab.

### Можно ли использовать белый текст на светлом оттенке?

Обычно нет, поскольку светлые оттенки мало контрастируют с белым. Используйте темный текст на светлых оттенках и проверяйте каждую пару с помощью средства проверки контрастности; для обычного текста по WCAG AA нужно не менее 4.5:1.

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

[Напишите нам по электронной почте](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)