Что такое шкала оттенков
Одиннадцать шагов от 50 до 950
Шкала – это один цвет на одиннадцати уровнях светлоты. Шаг 50 самый светлый, 950 самый тёмный. Такие же номера используют Tailwind и большинство дизайн-систем, так что шкалу можно вставить в конфиг без переименований.
Оттенок и насыщенность одинаковы на всех шагах. Меняется только светлота. Поэтому шкала читается как один цвет, а не как одиннадцать разных.
Где стоит ваш цвет
Ваш цвет попадает в шкалу точно, без пересчёта. На каком шаге – решает второе поле:
- Автоматически – страница ставит цвет на шаг, ближайший по светлоте. Синий #1f6feb становится шагом 500. - Конкретный шаг – цвет закрепляется там, где вы сказали. Остальные шаги растягиваются от него: светлые до почти белого, тёмные до почти чёрного.
Если закрепить белый на шаге 950, светлым шагам некуда идти. Страница тогда не печатает десять одинаковых белых, а прямо говорит, что места нет, и предлагает другой шаг.
Контраст под каждым шагом
Под каждым оттенком – контраст чёрного и белого текста по WCAG 2.x. Лучший вариант стоит первым.
- AA – от 4,5:1, обычный текст читается. - только крупный – от 3:1, годится для заголовков от 18 pt или 14 pt жирным. - – – меньше 3:1, текст этого цвета там не читается.
Коэффициент округлён вниз до десятых. Пара с 4,46:1 покажет 4,4, а не 4,5, потому что 4,5 означало бы порог, которого пара не достигает.
CSS-переменные
Главный результат – одиннадцать строк от --color-50: …; до --color-950: …;. Их можно вставить в :root как есть. Имя color замените на своё.
Частые вопросы о шкале оттенков
Чем это отличается от генератора палитры?
Генератор палитры поворачивает оттенок по кругу и даёт соседние или противоположные цвета. Эта страница оттенок не трогает. Она даёт более светлые и тёмные версии одного цвета и проверяет, какой текст на них читается.
Почему у каждого шага два коэффициента, а не один?
Лучший из двух – чёрный или белый текст – всегда даёт не меньше 4,5:1. Один коэффициент показывал бы AA на каждом шаге и ничего бы не говорил. Второй отвечает на вопрос, можно ли поставить на этот фон и другой цвет текста.
Шкала совпадает с цветами Tailwind?
Номера шагов те же, оттенки – нет. Tailwind подбирал свои цвета вручную. Здесь каждый шаг считается из вашего цвета по формуле, поэтому одинаковый цвет всегда даёт одинаковую шкалу.
Почему серый даёт серые шаги?
У серого нет оттенка и насыщенности, так что меняется только светлота. Получается шкала от почти белого до почти чёрного – именно так и должно быть.
Сохраняет ли страница мои цвета?
Нет. Цвет и шаг уходят в запросе на сервер, шкала считается и нигде не записывается. Один и тот же цвет и шаг всегда дают одну и ту же шкалу.