Utilore

Gerador de paleta de cores

Escolha uma cor inicial e a ferramenta calcula o resto do conjunto pelo círculo cromático. Clique em qualquer amostra para copiar o código, ou carregue uma foto e tire a paleta diretamente dela.

Esquema

Clique numa amostra para copiar o código

    Paleta a partir de uma foto

    A foto não sai do seu dispositivo — é lida no próprio navegador.

      Como usar

      1. Digite um código de cor ou abra o seletor: a paleta se redesenha enquanto você escolhe.
      2. Troque de esquema: a complementar fica oposta no círculo, a tríade o divide em três.
      3. Clique numa amostra para copiar o código, ou copie o conjunto inteiro como variáveis CSS.
      4. Para tirar cores de uma foto, escolha uma imagem — ela é lida no seu próprio aparelho.

      Bom saber

      De onde vêm os ângulos

      Um esquema de cores não é questão de gosto, mas de geometria no círculo cromático. A cor complementar fica exatamente oposta, a 180°; uma tríade divide o círculo em três partes iguais de 120°; as análogas são vizinhas dentro de trinta graus. A ferramenta gira o matiz mantendo saturação e luminosidade, então as companheiras ficam tão vivas e tão profundas quanto a cor de partida.

      Por que uma foto dá cores reais e não lama

      Contar os pixels mais frequentes não funciona numa fotografia: só o céu guarda um milhão de azuis ligeiramente diferentes, cada um aparecendo uma vez. Esta ferramenta corta o espaço de cor ao meio pelo canal mais largo e repete isso até ter caixas suficientes — assim o conjunto guarda o céu, o rosto e a sombra separadamente, em vez de um único marrom médio.

      Perguntas frequentes

      Qual esquema escolher para um site?

      Monocromático e análogo são os seguros: mantêm a página calma e não disputam atenção. Guarde a complementar para o único elemento que precisa ser notado — um botão, um selo, um aviso.

      Como uso a paleta no código?

      Copie o bloco de variáveis CSS abaixo das amostras e cole na sua folha de estilos. Os nomes saem como --color-1 … --color-6, que se leem melhor num projeto alheio do que uma fileira de códigos hexadecimais.

      Minha foto é enviada para algum lugar?

      Não. A imagem é decodificada na página e reduzida a 160 pixels antes da contagem — nada sai do aparelho, e a resposta aparece na hora.

      Por que a fileira de tons escuros não termina em preto?

      Preto puro e branco puro não carregam informação — todo mundo os conhece e, numa paleta, só ocupam lugar. A fileira para pouco antes da borda, então cada amostra continua sendo uma cor utilizável.

      Ferramentas relacionadas