Inspetor de cores Extração de imagens Gradiente Guia de cores

Seu laboratório de cores

Uma cor.Sua próxima paleta.

Crie uma paleta de cores a partir de uma cor ou imagem. Veja o resultado na interface, confira o contraste e exporte para seu projeto.

Comece com uma cor

A partir de uma imagem

Gratuito. Funciona no seu navegador. Paletas prontas para usar

A ferramenta precisa de JavaScript para gerar paletas, verificar contraste e exportar tokens. Os cálculos e o processamento das imagens acontecem no navegador. Os guias continuam disponíveis para leitura.

Paleta gerada

Selecione uma cor para copiar seu valor HEX. Use a escala de tons como referência para botões, estados, cartões e superfícies.

As paletas salvas ficam neste dispositivo.

Escala de tons

Paletas prontas para usar

Explore nove combinações escolhidas manualmente. Copie as cores exatas ou confira cada par no verificador de contraste.

Paleta de cores para dashboardsCopie três paletas para dashboards claros, escuros e gráficos categóricos. Veja códigos HEX, variáveis CSS e pares de contraste calculados.Paleta de cores pastel com códigos HEXTrês paletas de cores pastel para interfaces: pêssego e lavanda, verde suave, azul e rosa. Copie HEX e CSS e confira texto e fundo.Tons de azul: códigos HEX e combinaçõesConsulte oito tons de azul com HEX e RGB e copie três combinações para interfaces claras ou escuras. Veja prévias, CSS e contraste calculado.

Inspetor de cores

Veja a cor base atual em HEX, RGB, HSL e OKLCH. Copie os valores para implementação e documentação.

#E24B4A

Simulação da visão de cores

Aproximações para alterações comuns da visão de cores. As simulações ajudam nas verificações de design e não servem para diagnóstico médico.

Verificador de contraste WCAG

O nível AA pede 4,5:1 para texto normal e 3:1 para texto grande. O AAA pede 7:1 para texto normal. Use os limites para avaliar os pares de texto e fundo da interface.

Verificação manual

Texto Texto em HEX Fundo Fundo em HEX

Taxa

Texto legível na interface

Melhores combinações

Comparações automáticas com branco, preto e as cores da paleta.

Exportar tokens

Copie variáveis CSS, configuração Tailwind, SCSS e JSON ou baixe cartões da paleta em SVG e PNG.

Baixar o cartão da paleta

Exporte um cartão de 1200 × 630 pixels em PNG ou SVG para compartilhar a paleta em documentos, apresentações e painéis de referência.

Gerado localmente no navegador.

Extrair cores de uma imagem

Escolha um PNG, JPG ou WebP. A imagem é processada localmente no navegador.

Gerador de gradientes

Crie gradientes CSS a partir da paleta atual.

Ângulo 135°

Prévia de interface

Um exemplo de interface para avaliar como a paleta funciona no contexto de texto, ações e superfícies.

Lista de verificação para publicar

Confira o uso das cores em uma interface real antes de levar a paleta ao seu projeto.

Use o tom marcado como Original para preservar a cor da marca. Sua posição depende da entrada; escolha estados de interação pelo contraste, sem presumir posições 500, 600 ou 700.
Considere tons 50 e 100 para superfícies e confira o contraste real do texto.
Verifique pelo menos 4,5:1 para texto normal antes de publicar.
Teste os estados importantes: foco, passagem do cursor, desativado, sucesso, aviso e erro.
Atribua uma função clara aos destaques e mantenha a hierarquia visual.

Ferramentas e guias de cores

Páginas dedicadas a contraste, paletas Tailwind, variáveis CSS, extração de imagens e gradientes.

Verificador de contraste WCAGConfira combinações de texto e fundo. Gerador de cores TailwindCrie uma escala de 50 a 950 para Tailwind. Variáveis de cores CSSExporte tokens de design como variáveis CSS. Extrator de cores de imagensExtraia cores de imagens localmente. Gerador de gradientes CSSCrie gradientes a partir da paleta atual. Gerador de esquema de cores para sitesPlaneje cores principais, neutras e de destaque para as seções do site. Gerador de paleta para marcasTransforme uma cor de marca em cores com funções na interface. Conversor de coresConverta e copie valores HEX, RGB, HSL e OKLCH. Gerador de tons de coresCrie uma escala de 50 a 950 a partir de uma cor base. Gerador de harmonias de coresGere paletas complementares, análogas e triádicas. Paleta de cores para modo escuroDefina superfícies escuras, bordas e destaques e confira a legibilidade. Guia de tema shadcnAssocie os valores da paleta às variáveis CSS semânticas. Gerador de tokens de designExporte tokens de cores para sistemas de design e equipes de frontend. Simulador de daltonismoVisualize aproximações da paleta para alterações comuns da visão de cores. Gerador de cores para gráficosCrie cores distintas para painéis e visualização de dados. Gerador de paletas de cores acessíveisGere uma paleta e confira o contraste das combinações com os limites AA e AAA das WCAG. Você pode exportar os resultados independentemente da aprovação de cada par. Gerador de paletas de coresEscolha uma cor base e gere uma paleta com harmonias complementares, análogas, triádicas ou monocromáticas. Exporte para CSS, Tailwind, SCSS ou JSON.

Como criar uma paleta de cores acessível

Comece com uma cor de marca, escolha a harmonia, confira o contraste do texto e exporte os tokens. Em interfaces, dê funções claras aos destaques e às superfícies.

Complementar ou análoga?

Paletas complementares usam matizes opostos para criar destaque. As análogas usam matizes vizinhos para composições mais discretas. Confira a legibilidade em ambas.

Por que o contraste importa?

O contraste influencia a legibilidade no tamanho real de uso. Confira pelo menos o nível AA para texto normal, além dos demais requisitos aplicáveis.

Posso usar a paleta no Tailwind?

Sim. A exportação Tailwind da ferramenta principal fornece uma escala de 50 a 950 e uma cor de destaque quando disponível.

As imagens são enviadas?

Não enviamos o arquivo para processar as cores. A extração usa o canvas no navegador; as estatísticas opcionais seguem a política de privacidade.