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

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

Это соглашение, пришедшее из Material Design и закрепившееся в Tailwind. Число примерно отражает светлоту наоборот: 50 — самый светлый, 950 — самый тёмный, 500 — базовый. Удобство в том, что шкалы разных цветов совпадают по номерам: синий 600 и красный 600 одинаково темны, и их можно менять местами без перевёрстки.

Потому что светлота в цветовой модели HSL не совпадает с воспринимаемой яркостью. Жёлтый с L равным 50% глазу кажется намного светлее синего с тем же значением. Поэтому шкалы, построенные механическим изменением L, у части цветов дают вялые или мутные ступени, и их приходится править вручную. Инструмент показывает воспринимаемую яркость рядом, чтобы такие места было видно.

По контрастности, а не на глаз. Требование WCAG для обычного текста — 4,5:1, для крупного от 18 пунктов — 3:1. У каждой ступени здесь посчитаны оба варианта, и подсказка говорит, какой из них проходит. Переломная точка почти всегда приходится на ступени 500–600.

Обычно от девяти до одиннадцати на цвет. Меньше — не хватает на состояния кнопок и подложки, больше — соседние ступени становятся неразличимыми, и выбор превращается в мучение. Ходовой набор: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.

Технически да, но от очень тёмного или очень светлого база выходит смещённой: если исходный цвет уже почти чёрный, тёмные ступени сольются. Практичнее брать за базу цвет средней светлоты, около 45–55% по L, и строить шкалу от него в обе стороны.

Нет, всё считается в браузере.