/tool/color-scale/ работает считает браузер
Дайте цвет — инструмент построит из него шкалу ступеней и покажет, что с ней будет в интерфейсе: контраст каждой ступени против каждой, живая карточка в светлой и тёмной теме, взгляд дальтоника. Шкал в наборе может быть сколько нужно — primary, neutral, success, warning, danger забираются одним файлом. Выгрузка: CSS, Tailwind v3 и v4, SCSS, JSON, токены W3C, Android, SwiftUI. Ничего не отправляется на сервер.
Тон и насыщенность берутся у базового цвета, светлота — из кривой. Шкал может быть несколько: они уедут в один файл выгрузки.
Карточка собрана на ступенях первой шкалы: заголовок, текст, ссылка, кнопка и бейдж. Под ней написано, какая ступень куда пошла и с каким контрастом, — это и есть ответ на вопрос «а годится ли».
Строка — цвет текста, столбец — цвет фона. Число написано ровно той парой, которую оно оценивает: если в ячейке ничего не разобрать, значит эта пара и не работает. Белый и чёрный добавлены в оба конца — с ними пары нужны чаще всего.
Каждая ступень разобрана в цифрах: значение, контраст с чёрным и с белым. Точка помечает ступень, на которую сел базовый цвет.
Восемь форматов из одних и тех же чисел. В файл уходит весь набор шкал сразу, а не только первая.
Вставьте цвет, которым уже пользуетесь: кнопка, ссылка, логотип. Полосы ступеней в панели перерисовываются на каждый набранный знак.
Если этот HEX обязан остаться в интерфейсе без изменений, закрепите его на ступени — 500, 600 или той, где ему место. Кривая растянется к нему, а края шкалы останутся на своих светлотах.
Нажмите «Собрать набор», если делаете дизайн-систему: добавятся neutral, success, warning и danger. Настройки кривой у всех общие, поэтому ступени разных шкал совпадут по светлоте и их можно будет менять местами.
Посмотрите контраст-грид. Пара, в которой число не читается, в интерфейсе тоже не прочитается — это не метафора, число написано теми самыми цветами.
Проверьте карточку в тёмной теме и переключите зрение на дейтеранопию: это два места, где шкалы обычно и разваливаются.
Выберите формат и заберите файл. CSS, Tailwind v3 и v4, SCSS, JSON, токены W3C, colors.xml для Android, SwiftUI — весь набор шкал в одном файле.
Ссылка на палитру складывает все настройки в адрес страницы: её можно отправить или положить в закладки, и палитра восстановится целиком.
Ступень = OKLCH(светлота из кривой, насыщенность базы × поджатие, тон базы + сдвиг края)
Светлота берётся из OKLCH, а не из HSL, именно поэтому шаги выглядят ровными. В HSL светлота 50 % у жёлтого и у синего означает разную видимую яркость, и шкала из одиннадцати шагов проваливается в середине. Симуляция дальтонизма считается по матрицам Виено — Бреттеля в линейном RGB: это приближение, не медицинский прибор, но пары, которые оно склеивает в один цвет, склеятся и на самом деле.
Исходные данные — те же, что стоят в полях по умолчанию: их можно пересчитать в уме и убедиться, что инструмент не врёт.
Светлота #3366CC по OKLCH — 53,25 %. На «Авто» этот цвет садится на ступень 700: у неё в кривой стоит 52 %, ближе нет ничего.
Закрепляем на 500. В кривой у пятисотой стояло 68 %, теперь ей назначается 53,25 % — светлота базы.
Ступени светлее пятисотой растягиваются между неподвижным краем 97 % и новыми 53,25 %: 400 уходит с 75 % на 63,81 %, 200 — с 88 % на 83,42 %.
Ступени темнее сжимаются между 53,25 % и неподвижным краем 26 %: 600 уходит с 60 % на 48,06 %, 800 — с 44 % на 37,68 %.
Тон 262,29° и насыщенность 0,1679 на пятисотой остались базовыми, поэтому она собирается обратно из OKLCH(53,25 %, 0,1679, 262,29) и снова даёт ровно #3366CC.
Шкала стала темнее прежней, но бренд-цвет остался тем же HEX и занял место 500. Контраст #3366CC с белым — 5,36, то есть выше порога 4,5: эта ступень годится для основного текста на светлом фоне.
Это сложившаяся в дизайн-системах разметка: маленькие числа — светлые оттенки, большие — тёмные, 500 примерно посередине. Шаг 50 добавлен на краях, где глаз различает разницу лучше всего. Число ступеней переключается: девять — это 100–900, тринадцать добавляет по краям 25 и 975.
Да, для этого и сделано закрепление. Выберите ступень — и она вернёт ровно тот HEX, что вы ввели, а остальные пересчитаются по той же форме кривой. На «Авто» инструмент, наоборот, не двигает кривую и показывает, куда цвет попадает сам: так две шкалы разных цветов совпадают по светлоте ступеней.
Потому что sRGB не вмещает одинаковую насыщенность на всех светлотах. У очень светлых и очень тёмных оттенков охват уже, и насыщенность приходится снижать, иначе цвет обрежется по каналам и уедет по тону. Включите display-p3 — предел поднимется, и на широком экране края станут ярче.
WCAG 2.1 считает отношение яркостей и одинаково относится к тёмному тексту на светлом фоне и наоборот. APCA считает воспринимаемую разницу и полярность учитывает: светлый текст на тёмном фоне читается иначе, чем зеркальная пара. Формально требуется WCAG, но APCA точнее показывает, где текст на самом деле бледный. Если пара проходит оба — вопросов нет.
Чистый серый рядом с брендовым цветом выглядит грязным: глаз сравнивает его с соседом и видит лёгкий противоположный оттенок. Нейтральная шкала берёт тон бренда и насыщенность около 0,01–0,03 — серый остаётся серым, но перестаёт спорить с фирменным цветом.
Пересчитывает ступени так, как их увидит человек без одного типа колбочек: протанопия — без красных, дейтеранопия — без зелёных, тританопия — без синих. Смотреть надо не на красоту, а на слипание: если success и danger в этом режиме стали одним цветом, различать их в интерфейсе придётся значком или подписью, а не цветом.
Никуда. Всё считается в браузере, страница не делает ни одного сетевого запроса после загрузки. Настройки уезжают только в адресную строку — чтобы ссылкой на палитру можно было поделиться.