Генератор оттенков цвета
Создавайте более темные оттенки цвета, смешивая его с черным равными шагами. Введите цвет в любом формате CSS, выберите от 2 до 20 шагов и цветовое пространство смешивания, чтобы получить таблицу со значениями HEX, RGB, HSL и OKLCH для каждого оттенка, начиная с исходного цвета. Смешивание в sRGB соответствует классическим инструментам для оттенков и Sass, а OKLab обеспечивает визуально равномерные шаги. Идеально для создания цветовых шкал UI.
Часто задаваемые вопросы
Что такое оттенок?
Оттенок — это цвет, смешанный с черным. Он сохраняет свой тон, но становится темнее. Тон, в отличие от оттенка, смешивают с белым, а цветовой тон — с серым.
Как распределяются шаги?
При 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-600 и --brand-700. Чтобы выполнить смешивание в браузере, используйте color-mix(in oklab, var(--brand) 80%, black): результатом будет тот же оттенок с 20% черного, что и при настройке OKLab.
Доступны ли более темные оттенки автоматически?
Нет. Проверьте контраст текста на каждом оттенке с помощью средства проверки контрастности: даже темный на вид оттенок может не обеспечивать контраст 4.5:1 с другим темным цветом или цветным текстом.