Формула тональной палитры «Материал 3»
Formula
Алгоритм оттенка/цветности/тона HCT создает первичные, вторичные, третичные и нейтральные роли.
Variables
- Р, Г, Б
- Каналы sRGB (нормализованные 0–255 или 0–1)
- Ч, С, Л
- Оттенок (градусы), насыщенность и яркость (0–1) в HSL.
- л
- Относительная яркость (WCAG) или яркость в HSL/OKLCH
FAQ
- Является ли формула тоновой палитры Material 3 точной для рабочих процессов печати?
- Экран RGB и печатный CMYK используют разные гаммы. Относитесь к конверсиям как к приблизительным доказательствам; калибровать с помощью профилей ICC для коммерческой печати.
- Могу ли я использовать эту формулу в CSS?
- Современный CSS поддерживает функции color-mix(), oklch() и lab() для многих операций. Для сложных конвейеров выполните вычисления в JavaScript и экспортируйте переменные CSS.
- Загружает ли Color DevByte мои цвета?
- Нет. Справочные страницы формул являются статической документацией; интерактивные инструменты работают на 100% на стороне клиента вашего браузера.
Обзор
Создавайте палитры тональных пятен на основе исходного цвета.
Color DevByte документирует эту формулу для разработчиков, дизайнеров и специалистов по обеспечению доступности, которым нужна воспроизводимая цветовая математика без отправки данных на сервер.
Используйте связанные инструменты цвета, чтобы применить эту формулу в интерактивном режиме с предварительным просмотром в реальном времени и многоформатным экспортом.
Когда использовать эту формулу
Применяйте формулу трехтоновой палитры материала при создании токенов дизайна, проверке контрастности WCAG или автоматизации цветовых конвейеров в CSS, Tailwind или JSON системы дизайна.
Для производственного пользовательского интерфейса всегда проверяйте результаты с помощью средства проверки контрастности или визуального предварительного просмотра — крайние случаи гамма-коррекции и сопоставления гаммы могут изменить результаты.
Замечания по реализации
Браузерные инструменты должны линеаризировать sRGB перед расчетом яркости или ΔE.
Предпочитайте интерполяцию OKLCH или LAB для градиентов и тем, чтобы избежать сероватых средних точек, характерных для смесей RGB.