Fórmula de paleta de tons de material 3
Formula
O algoritmo de matiz/croma/tonal HCT produz papéis primários, secundários, terciários e neutros.
Variables
- R, G, B
- Canais sRGB (0–255 ou 0–1 normalizados)
- H, S, L
- Matiz (graus), saturação e luminosidade (0–1) em HSL
- eu
- Luminância relativa (WCAG) ou luminosidade em HSL/OKLCH
FAQ
- A fórmula da paleta de tons do Material 3 é precisa para fluxos de trabalho de impressão?
- A tela RGB e a impressão CMYK usam gamas diferentes. Trate as conversões como provas aproximadas; calibre com perfis ICC para impressão comercial.
- Posso usar esta fórmula em CSS?
- CSS moderno oferece suporte a color-mix(), oklch() e lab() para muitas operações. Para pipelines complexos, calcule em JavaScript e exporte variáveis CSS.
- O Color DevByte carrega minhas cores?
- Não. As páginas de referência de fórmulas são documentação estática; ferramentas interativas são executadas 100% do lado do cliente em seu navegador.
Visão geral
Gere paletas Tonal Spot a partir de uma cor inicial.
O Color DevByte documenta essa fórmula para desenvolvedores, designers e revisores de acessibilidade que precisam de matemática de cores reproduzível sem enviar dados a um servidor.
Use as ferramentas de cores vinculadas para aplicar esta fórmula de forma interativa com visualização ao vivo e exportação multiformato.
Quando usar esta fórmula
Aplique a fórmula da paleta tonal do material 3 ao criar tokens de design, validar o contraste WCAG ou automatizar pipelines de cores em CSS, Tailwind ou JSON do sistema de design.
Para UI de produção, sempre verifique os resultados com um verificador de contraste ou visualização visual – casos extremos na correção de gama e no mapeamento de gama podem alterar os resultados.
Notas de implementação
As ferramentas baseadas em navegador devem linearizar o sRGB antes dos cálculos de luminância ou ΔE.
Prefira a interpolação OKLCH ou LAB para gradientes e temas para evitar pontos médios acinzentados comuns em misturas RGB.