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

Tipo de harmonia

Predefinições e cores recentes

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.

Aparência da paleta

Fundo da área de coresUnir as amostras da paleta

Muda apenas a visualização. Suas cores e exportações continuam iguais.

Personalize esta paleta

Bloqueie as cores que deseja manter. Edite ou reordene as outras. Espaço gera novas cores com a paleta visível; campos e botões em foco mantêm seu comportamento.

As cores e a ordem são incluídas ao copiar o link de compartilhamento.

shadcn/ui Tailwind v4 · v3

Escala de tons

Gestão de cor das escalas

A redução de croma conserva luminosidade e matiz antes do arredondamento HEX. Original mantém as paletas e os links anteriores.

Paletas prontas para usar

Escolha um exemplo para abrir todas as suas cores no gerador. Edite, compare e salve sua própria versão.

Dashboards

Painel claro7 coresAbrir paleta Painel escuro7 coresAbrir paleta Gráficos categóricos7 coresAbrir paleta

Pastéis

Pêssego e lavanda6 coresAbrir paleta Jardim suave6 coresAbrir paleta Céu e rosa6 coresAbrir paleta

Tons de azul

Azul de produto5 coresAbrir paleta Azul-marinho e areia5 coresAbrir paleta Azul noturno5 coresAbrir paleta

São pontos de partida. Confira os pares reais de texto e fundo antes de usá-los.

Explorar os guias das coleções

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

Compor transparência

Cole RGBA, HSLA, OKLCH com alfa ou HEX com alfa. Escolha um fundo uniforme e aplique à ferramenta a cor opaca resultante.

Cor com transparênciaFundo uniforme

HEX opaco resultante

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

Ajustar contraste

AlterarObjetivo

A proposta ajusta a luminosidade e reduz o croma quando necessário. O par HEX final é verificado sem arredondar a relação. Confira o aspeto e o tamanho do texto.

Melhores combinações

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

Matriz de contraste dos tons · 13 × 13

As linhas são fundos e as colunas texto. Inclui onze tons, branco e preto. Use as setas e selecione um par para examiná-lo.

Tamanho do texto

Selecione um par para ver a relação e usá-lo na verificação manual.

AA: 4,5:1 normal / 3:1 grande. AAA: 7:1 normal / 4,5:1 grande. As avaliações valem para este par e tamanho.

Exportar tokens

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

Versão do Tailwind

Tailwind v4: escalas primary, secondary e neutral a partir das duas primeiras cores da paleta. Tailwind v3: escala primary e destaque.

Formato JSON

Gere tokens semânticos claros e escuros com as duas primeiras cores. Mantenha os imports existentes do framework.

Notação de cor

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.

Prévia do cartão da paleta atual — O mesmo cartão que você baixa em PNG ou SVG · 1200 × 630

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.