Ferramenta grátis

Gerador de paleta de cores

Arraste uma foto e veja as cores principais com códigos HEX e RGB, a checagem de contraste com texto branco e preto e uma prévia de uma página de link na bio nessas cores.

Sua foto

Número de cores
Ordem

Sua paleta

    Prévia em uma página de link na bio

    Ana Ruiz

    Cerâmica e aulas de cerâmica

    Compre as canecas novasAgende uma aulaÚltimo vídeo

      O que um gerador de paleta de cores faz

      Um gerador de paleta de cores encontra as cores principais de uma imagem e entrega os códigos delas. Este lê sua foto no navegador, agrupa pixels parecidos e devolve as 5, 6 ou 8 cores que cobrem a maior parte da imagem. Cada cor vem com código HEX e RGB e uma checagem de contraste para texto.

      Criadores de conteúdo usam uma paleta tirada das próprias fotos para que perfil, posts e página de link na bio pareçam um conjunto só. A checagem de contraste mostra quais cores aguentam texto e quais funcionam melhor como fundo ou destaque.

      Sua foto nunca sai do seu dispositivo. A ferramenta a desenha em um canvas no navegador, então não há envio, conta nem limite.

      Como fazer uma paleta a partir de uma foto

      1. Arraste uma foto

        Use uma foto que você posta com frequência, como a foto de perfil ou a de um produto. Funcionam arquivos JPG, PNG e WebP.

      2. Escolha quantas cores

        Escolha 5, 6 ou 8 cores. Ordene pela parte da foto que cobrem ou do claro ao escuro.

      3. Confira o contraste

        Cada cor mostra o contraste com texto branco e preto. Use as cores aprovadas em botões com texto.

      4. Copie os códigos

        Copie um código HEX, a lista completa ou a paleta como variáveis CSS para o seu site.

      Regras de contraste para texto nas suas cores

      As Diretrizes de Acessibilidade para Conteúdo Web (WCAG 2.2) definem o contraste mínimo entre o texto e o fundo. Os selos da ferramenta usam esses números.

      O que você confereProporção mínimaRegra WCAG
      Texto normal sobre uma cor4.5:11.4.3 Contrast (Minimum), nível AA
      Texto grande: 24px, ou 18,5px em negrito3:11.4.3 Contrast (Minimum), nível AA
      Texto normal, nível mais rigoroso7:11.4.6 Contrast (Enhanced), nível AAA
      Texto grande, nível mais rigoroso4.5:11.4.6 Contrast (Enhanced), nível AAA
      Um botão ou ícone sobre a página3:11.4.11 Non-text Contrast, nível AA

      Fontes: W3C, Understanding 1.4.3 Contrast (Minimum), W3C, Understanding 1.4.6 Contrast (Enhanced), W3C, Understanding 1.4.11 Non-text Contrast. Verificado em 11 de novembro de 2026.

      Na sua página do More.You

      Suas cores na sua página de link na bio

      Em uma página do More.You, você define o fundo, os botões, as fontes e as cores. Toda edição vai para um rascunho com desfazer, então sua página no ar nunca mostra um design pela metade.

      more.you/

      • Temas e cores no Free

        Escolha um tema e depois mude o papel de parede, o estilo dos botões, as fontes e as cores. Embaralhe a galeria de temas quando quiser ideias.

        Temas e design

      • Comece por um modelo

        Os modelos por profissão dão uma primeira página pronta. Aplique um e troque pelas cores da sua foto.

        Modelos de link na bio

      • Cinco layouts de cabeçalho

        Cabeçalhos clássico, hero, banner, recorte e forma colocam sua foto onde ela combina melhor com a paleta.

      Perguntas sobre paleta de cores

      Como o gerador de paleta de cores escolhe as cores?

      Ele reduz sua foto a uma cópia pequena, lê cada pixel e separa os pixels em grupos de cores parecidas com um método chamado median cut. Tira a média de cada grupo, descarta cores quase iguais e fica com as que cobrem a maior parte da foto.

      Minha foto é enviada para algum lugar?

      Não. A ferramenta abre sua foto no navegador e a lê em um elemento canvas no seu dispositivo. Nada é enviado ao More.You nem a outro servidor, e nada é salvo. Feche a aba e a foto e a paleta somem.

      O que significam os códigos HEX e RGB?

      Os dois descrevem a mesma cor. O RGB dá a quantidade de vermelho, verde e azul de 0 a 255, por exemplo rgb(178, 246, 227). O HEX escreve os mesmos três números na base 16 depois do símbolo #, por exemplo #B2F6E3. A maioria dos apps de design e construtores de site aceita qualquer um dos dois.

      Que contraste o texto precisa ter para ser legível?

      O WCAG 2.2, o padrão de acessibilidade web, pede uma proporção de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande, no nível AA. Texto grande é 24px, ou 18,5px em negrito. Os selos ao lado de cada cor mostram a proporção com texto branco e com texto preto.

      Como uso a paleta na minha página de link na bio?

      Use a cor mais clara como fundo da página e uma cor mais forte nos botões. Depois confira se o texto do botão passa em 4,5:1 sobre a cor do botão. A prévia da ferramenta mostra essa combinação e diz quais pares passam.

      Quais tipos de arquivo posso usar?

      Qualquer imagem que o navegador abra, como JPG, PNG, WebP e GIF. Em um GIF, a ferramenta lê o primeiro quadro. Se um arquivo não abrir, salve-o como JPG ou PNG no celular ou no computador e tente de novo.

      Posso copiar a paleta como CSS?

      Sim. Selecione Copiar como variáveis CSS para obter um bloco :root com uma variável por cor, por exemplo --color-1: #B2F6E3. Cole no início da sua folha de estilo e use var(--color-1) onde precisar da cor. As variáveis seguem a ordem que você escolheu, então --color-1 é a cor mais usada ou a mais clara.

      Mais ferramentas grátis

      Grátis e sem conta. Nada do que você digita é armazenado em nossos servidores.

      Gerador de fontes

      Transforme seu texto em 24 estilos, de negrito e itálico a script e bolhas. Copie e cole em qualquer lugar.

      Abrir ferramenta →

      Gerador de bio

      Receba 12 ideias de bio para Instagram, TikTok, X ou YouTube, com contador de caracteres em tempo real.

      Abrir ferramenta →

      Gerador de QR code

      Transforme qualquer link em QR code. Escolha as cores e baixe em PNG ou SVG. Ele nunca expira.

      Abrir ferramenta →

      Ver todas as ferramentas grátis

      Guias: Guia de design da página de bio: layouts, temas, botões, Temas de link na bio: como escolher um que converte.

      Páginas relacionadas
      Fontes
      1. W3C, Understanding SC 1.4.3 Contrast
      2. W3C, Understanding SC 1.4.6 Contrast
      3. W3C, Understanding SC 1.4.11 Non-text Contrast

      Fontes verificadas em 11 de novembro de 2026.

      Suas cores, na sua própria página

      Crie sua página grátis no More.You e defina fundo, botões e fontes com as cores da sua foto.

      more.you/

      Idioma