Idioma:Português
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.

A partir de uma imagem

Gratuito. Funciona no seu navegador.

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.

Escala de tons

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

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.

      

      

      

    

    

      
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.