Guia de uso da ferramenta

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Categoria: Design
Tipos de entrada: color, select, range, textarea, checkbox, text
Tipo de saída: html
Cobertura de exemplos: 4
API pronta: Sim

Visão geral

O Conversor de Escala de Cinza permite transformar cores vibrantes em tons monocromáticos precisos, oferecendo diversos métodos de cálculo e controle total sobre a intensidade da dessaturação para projetos de design e acessibilidade.

Quando usar

Para verificar o contraste de elementos de interface e garantir a acessibilidade visual.
Para criar paletas de cores monocromáticas a partir de uma cor base em projetos de design.
Para converter rapidamente uma lista de cores em tons de cinza para impressão ou prototipagem.

Como funciona

1Insira a cor base ou uma lista de cores em lote no campo de entrada.
2Selecione o método de conversão desejado, como luminosidade ponderada ou média simples.
3Ajuste a barra de intensidade para definir o nível de dessaturação aplicado.
4Visualize o resultado comparativo lado a lado para validar a fidelidade da conversão.

Casos de uso

Teste de contraste de acessibilidade para interfaces web.
Criação de esquemas de cores neutras para wireframes.
Preparação de ativos gráficos para impressão em preto e branco.

Exemplos

1. Validação de Contraste de UI

Designer de Interface

Contexto

O designer precisa garantir que os botões de ação (CTA) em um site sejam legíveis mesmo para usuários com daltonismo.

Problema

Verificar se o contraste entre o texto branco e o fundo colorido é suficiente em tons de cinza.

Como usar

Insira a cor do botão no campo 'Cor base', selecione o método 'Luminosidade' e ative a 'Comparação lado a lado'.

Resultado

O designer visualiza a versão em escala de cinza e ajusta a cor base até que o contraste atinja os níveis de legibilidade necessários.

2. Conversão de Paleta de Marca

Desenvolvedor Front-end

Contexto

Uma equipe de marketing forneceu uma lista de cores da marca para criar uma versão de baixo consumo de tinta para documentos internos.

Problema

Converter rapidamente uma lista de 5 cores corporativas para tons de cinza consistentes.

Como usar

Cole as cores no campo 'Cores em lote', defina a intensidade em 100% e desative a opção de incluir cores originais.

Resultado

Uma lista limpa de valores hexadecimais em escala de cinza pronta para ser aplicada ao CSS do documento.

Perguntas frequentes

Qual a diferença entre os métodos de conversão?

Cada método utiliza uma fórmula matemática distinta. A 'Luminosidade' considera a percepção humana das cores, enquanto a 'Média' trata todos os canais RGB com o mesmo peso.

Posso converter várias cores ao mesmo tempo?

Sim, utilize o campo de cores em lote separando os valores hexadecimais por vírgulas.

O que faz a opção de pesos personalizados?

Permite definir manualmente a contribuição de cada canal (R, G, B) para o resultado final, ideal para ajustes técnicos específicos.

A ferramenta altera a cor original?

Não, a ferramenta gera uma representação em escala de cinza, mantendo a cor original intacta para comparação.

Como garantir a acessibilidade com esta ferramenta?

Ao converter elementos para escala de cinza, você pode identificar se o contraste entre texto e fundo é suficiente para usuários com deficiência visual.

Conversor de Escala de Cinza

Executar esta ferramenta

Exemplos compatíveis com esta ferramenta

Continue com ferramentas e temas relacionados

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Visão geral

Quando usar

Como funciona

Casos de uso

Exemplos

1. Validação de Contraste de UI

2. Conversão de Paleta de Marca

Perguntas frequentes

Exemplos Avançados de Aplicação Grafana

Exemplos de Códigos QR

Exemplos D3.js Data Visualization

Exemplos Rome JavaScript Toolchain

Gerador de cascata de tokens de cor

Extrator de tokens de tema ECharts

Exportador de Tokens Figma

De paleta de imagem para design tokens