AZ Tools

Paleta tonal Material Design 3

Cor

A partir de uma única cor base, monta uma paleta de 13 tons (0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100) seguindo as convenções do Material Design 3. Cada tom mantém o matiz da cor base e eleva o croma o máximo que o gamut sRGB permite na luminosidade alvo, usando uma rampa perceptual OKLCH. Útil para design tokens, tematizar uma biblioteca UI ou construir sistemas de cor acessíveis — o contraste contra o melhor entre preto e branco é mostrado em cada tom para escolher pares seguros de primeiro plano/fundo.

—
Presets
Paleta tonal
T 0#000000
WCAG 21.00:1
T 10#050013
WCAG 20.67:1
T 20#1c0042
WCAG 18.62:1
T 30#341767
WCAG 14.34:1
T 40#4d3486
WCAG 9.76:1
T 50#6851a5
WCAG 6.35:1
T 60#856fc6
WCAG 5.09:1
T 70#a38de7
WCAG 7.52:1
T 80#c1b0ff
WCAG 10.92:1
T 90#dfd8ff
WCAG 15.40:1
T 95#efecff
WCAG 18.11:1
T 99#fcfbff
WCAG 20.38:1
T 100#ffffff
WCAG 21.00:1
Exportação — Propriedades CSS
:root {
  --primary-0: #000000;
  --primary-10: #050013;
  --primary-20: #1c0042;
  --primary-30: #341767;
  --primary-40: #4d3486;
  --primary-50: #6851a5;
  --primary-60: #856fc6;
  --primary-70: #a38de7;
  --primary-80: #c1b0ff;
  --primary-90: #dfd8ff;
  --primary-95: #efecff;
  --primary-99: #fcfbff;
  --primary-100: #ffffff;
}

Tons gerados com OKLCH (luminosidade perceptual) e clamped ao gamut sRGB. Aproxima Material 3 HCT bem de perto.

Como usar

  1. Escolha uma cor base no seletor ou cole um hex.
  2. Renomeie a paleta se quiser (prefixo do export, ex.: `--primary-40`).
  3. Escolha o formato de export — variáveis CSS, config Tailwind, tokens JSON ou variáveis SCSS — e copie.
  4. Clique em qualquer swatch para copiar o hex.

Perguntas frequentes

É o mesmo algoritmo HCT do Google?
Em espírito sim, mas não é idêntico. O Material Color Utilities usa HCT (baseado em CAM16); esta ferramenta usa OKLCH (Björn Ottosson, 2020), espaço perceptual amigável a navegador. Tons de mesma luminosidade ficam comparáveis, mas os hex podem diferir levemente.
Por que o croma varia entre tons?
sRGB não consegue reproduzir cores muito saturadas em luminosidades muito escuras ou claras — a ferramenta busca por busca binária o croma máximo que permanece no gamut. Por isso o tom 90 fica apagado e o tom 50 costuma ser o mais vívido.
Como ler a razão de contraste?
É a contraste de luminosidade WCAG contra o melhor entre preto ou branco. ≥4,5 passa AA para texto normal; ≥3,0 passa AA para texto grande e componentes UI.
E os papéis no modo escuro?
M3 mapeia `primary` para tom 40 no claro e tom 80 no escuro, `on-primary` para tom 100 / tom 20, etc. Esta ferramenta dá a escala tonal bruta — atribuição de papéis fica no escopo do seu spec de tema.

Ferramentas relacionadas

Simulador de Daltonismo

Veja como sua imagem se parece para pessoas com cada um dos 8 tipos de deficiência visual cromática (CVD).

Cor00

Gerador de CSS Box Shadow

Desenhe box-shadow CSS visualmente em várias camadas, com pré-visualização ao vivo e saída CSS / Tailwind pronta para copiar.

Cor00

Conversor de Formatos de Cor

Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.

Cor00

Gerador de Gradientes CSS

Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.

Cor00

Gerador de Paleta de Cores

Crie paletas harmoniosas a partir de uma cor base em seis esquemas.

Cor00

Verificador de Contraste de Cor

Verifique o contraste texto/fundo nos níveis WCAG AA e AAA.

Cor00