Softonic

Seletor de Cores do Material Design

Etapa 1 / 3 Escolha uma família de cores

Paleta fixa do Material Design de 2014 (Material Design 2). O Material 3 usa paletas tonais geradas.

Escolha uma família de cores

Red Pink Purple Deep Purple Indigo Blue Light Blue Cyan Teal Green Light Green Lime Yellow Amber Orange Deep Orange Brown Gray Blue Gray Black White

A paleta do Material Design define 19 famílias de cores, Vermelho, Rosa, Roxo até Cinza e Cinza Azul, cada uma com uma escala de tonalidade 50 (pálido) até 900 (quase preto), além de tonalidades de destaque opcionais A100–A700. Este seletor apresenta cada amostra em uma grade e permite que você copie qualquer valor como HEX, RGB, HSL ou nome de token Material para uso em Tailwind, variáveis CSS, UIColor do iOS ou recursos de cor do Android.

Como usar a paleta

  1. 1

    Escaneie a grade

    As famílias estão dispostas à esquerda; as tonalidades vão de 50 a 900 na parte superior.

  2. 2

    Toque em uma amostra

    Veja HEX, RGB, HSL e o nome canônico do token Material (por exemplo, Indigo 500).

  3. 3

    Copie o formato que você precisa

    Um clique copia a string exata: `#3F51B5`, `rgb(63 81 181)`, `hsl(231 48% 48%)`.

  4. 4

    Verifique o contraste

    O painel mostra a razão de contraste WCAG contra branco e preto para escolher cores de texto acessíveis.

A escada de tonalidades

Tonalidade Uso
50 Fundos de hover, superfícies pálidas
100 Fundos de chip, preenchimentos de baixa ênfase
200 Estados desativados, superfícies secundárias
300 Bordas, separadores
400 Texto secundário em fundos claros
500 Cor padrão / primária, a base
600 Estados interativos (hover, pressionado)
700 Cabeçalhos, forte ênfase
800 Texto escuro em fundos claros
900 Elemento de maior contraste (quase preto)
A100 Acento claro
A200 Acento mais claro que o padrão
A400 Acento (geralmente o destaque “brilhante” da marca)
A700 Acento profundo

Famílias na paleta Material

Vermelho, Rosa, Roxo, Roxo Profundo, Indigo, Azul, Azul Claro, Ciano, Teal, Verde, Verde Claro, Lima, Amarelo, Âmbar, Laranja, Laranja Profundo, Marrom, Cinza, Cinza Azul.

Marrom, Cinza e Cinza Azul não têm tonalidades de destaque, são as famílias neutras.

Escolhendo um primário

A especificação sugere 500 como a cor primária, 700 para a variante mais escura (usada na barra de status no Android), e um acento A200 ou A400 para ações secundárias. Esta é uma convenção, não uma regra, o Material 3 moderno (cor dinâmica) deriva paletas de uma única cor base em vez de escolher de rampas fixas.

Ponto de verificação de acessibilidade

  • Texto do corpo: razão de contraste ≥ 4.5:1 contra seu fundo (WCAG AA).
  • Texto grande (18 pt+ negrito ou 24 pt+ regular): ≥ 3:1.
  • Componentes de UI e objetos gráficos: ≥ 3:1.

A paleta não é segura para contraste por padrão. Amarelo 500 em branco falha gravemente no WCAG. Sempre verifique a razão antes de enviar uma combinação, o seletor mostra isso em linha.

Formatos suportados

  • HEX: #3F51B5 (Indigo 500).
  • RGB: rgb(63 81 181) (sintaxe moderna) ou rgb(63, 81, 181) (legado).
  • HSL: hsl(231 48% 48%).
  • Token Material: Indigo 500, útil para documentos de design e Figma.
  • Tailwind: indigo-500, insira diretamente em um atributo de classe se seu tema Tailwind usar a escala Material.
  • XML de cor do Android: <color name="indigo_500">#FF3F51B5</color>, formato ARGB.
  • UIColor do iOS: UIColor(red: 0.247, green: 0.318, blue: 0.710, alpha: 1.0).

Perguntas frequentes

Esta ferramenta reproduz a paleta fixa do Material Design publicada pelo Google em 2014 e depois documentada no site do Material Design 2. Ela não gera paletas tonais do Material 3 a partir de uma cor semente. Use-a para consultar as amostras clássicas numeradas e de destaque.

Marrom, Cinza e Cinza Azul são neutros e não participam de combinações de cores de destaque. A especificação simplesmente omite A100–A700 para eles.

A paleta padrão do Tailwind é inspirada no Material, mas não é idêntica. Se você quiser cores exatas do Material, estenda theme.extend.colors com os valores do Material e faça referência a eles como material-indigo-500 em seus nomes de classe.

A convenção diz que sim, mas nada impede você de usar 700 ou um acento como primário. A convenção 500 é sobre ter uma tonalidade base confiável com 8 passos em qualquer direção para variação.

Ferramentas relacionadas

Vetorizador de PNG para SVG

Transforme imagens raster PNG em caminhos SVG no navegador. Ideal para logotipos, ícones e desenhos lineares. Controle limiar, quantidade de cores e suavização.

Gerador de letras de grafite

Crie letras de grafite com efeitos tag, bubble, block, estêncil, neon e wild. Ajuste as cores e exporte PNG ou SVG diretamente no navegador.

BMP para PNG

Converta arquivos BMP para PNG no navegador. Sem perdas, preserva a profundidade de cor e adiciona transparência opcional do canal alfa BMP original.

Redimensionador de imagens em lote

Arraste várias imagens, ajuste ou estique para um tamanho alvo e exporte JPG, PNG ou WebP em um único ZIP. O processamento fica no seu navegador.

Quadro branco online

Desenhe ideias e organize formas, notas e imagens locais em um quadro branco privado no navegador. Exporte PNG, JPEG, SVG ou JSON editável.

Ampliador de imagens

Amplie imagens de baixa resolução em 2×, 3× ou 4× com super-resolução por IA ou interpolação clássica, preservando detalhes importantes.