Генератор палитры Material Design
Выберите базовый цвет и мгновенно получите его десять оттенков — от самого светлого (50) до самого тёмного (900) — в духе тональных палитр, популяризированных Material Design. Расчёт выполняется полностью в вашем браузере.
Как это работает
Инструмент принимает ваш базовый цвет за оттенок 500, затем вычисляет более светлые оттенки (50–400), постепенно смешивая его с белым, и более тёмные (600–900), смешивая его с чёрным, причём доля смешивания растёт по мере удаления от 500. Получается согласованная тональная палитра, готовая для дизайн-системы или библиотеки компонентов.
Это тот же алгоритм, что использует Material Design?
Нет, Google вычисляет свои официальные палитры по собственному, более сложному алгоритму на основе цветового пространства HCT. Этот инструмент предлагает приближение с помощью линейного смешивания с белым и чёрным: результат визуально близок и сразу пригоден для работы, но не претендует на пиксель-в-пиксель точное воспроизведение официальных палитр Material.
Как использовать эту палитру в моём проекте?
Нажмите на оттенок, чтобы скопировать его HEX-код, а затем используйте его как CSS-переменную или дизайн-токен (например, --primary-500): светлые оттенки часто используют для фонов и неактивных состояний, оттенок 500 — для основного цвета, а тёмные — для текста или активных состояний с высоким контрастом.
Все цветовые расчёты выполняются прямо в вашем браузере, без обращений к внешним серверам.