tigtools

Gerador de paletas de cores

Comece com uma cor base, escolha uma harmonia e copie a paleta no formato usado pelo seu projeto.

Executado no seu navegador Sem cadastro

Paleta

  • #3366cc
  • #8c6500

As cores bloqueadas não mudam quando você altera a cor base.

Exportar como

Como usar

  1. Digite uma cor base ou escolha uma. “Nova cor base aleatória” seleciona uma para você.
  2. Escolha uma harmonia. “Tons” cria uma escala de 11 etapas, da mais clara à mais escura.
  3. Bloqueie as cores que quiser manter e continue explorando outras cores base.
  4. Escolha HEX, propriedades personalizadas CSS ou JSON, defina um nome e copie o código.

Como funciona

As harmonias são criadas girando o matiz no círculo cromático: a complementar usa o matiz oposto (180°); a análoga usa os matizes vizinhos, a 30° e 60° de cada lado; a triádica usa três matizes separados por 120°; a tetrádica usa quatro matizes separados por 90°; e a complementar dividida usa os dois matizes ao lado do complementar (150° e 210°).

A rotação acontece em OKLCH, e não em HSL. O OKLCH mantém a luminosidade percebida constante, então o amarelo e o azul de uma mesma paleta parecem ter brilho semelhante, em vez de o amarelo ofuscar. Quando uma cor girada fica fora do que as telas sRGB conseguem exibir, o croma é reduzido até que ela se encaixe, mantendo a luminosidade e o matiz.

A escala de tons usa etapas fixas de luminosidade em OKLCH, numeradas de 50 a 950, de forma semelhante à nomenclatura do Tailwind CSS. O croma é reduzido perto do branco e do preto para que os tons mais claros não pareçam neon. As harmonias são um ponto de partida: antes de usar as cores em conteúdo, confira os pares de texto e fundo com um verificador de contraste.

Exemplos

Uma cor de marca com um destaque

Com a cor base #3366cc, a opção “Complementar” adiciona #8c6500, um ocre quente com a mesma luminosidade em OKLCH. Combinações de azul com laranja-amarelado são comuns para criar destaques junto a uma marca azul.

Tokens de design para uma biblioteca de componentes

Escolha “Tons” e defina o nome como “primary” para exportar variáveis CSS. Você terá de --primary-50 a --primary-950, prontas para fundos (50–100), bordas (200–300) e texto (700–900).

Manter uma cor enquanto explora outras

Bloqueie a segunda cor de uma paleta triádica e experimente diferentes cores base. A amostra bloqueada mantém o valor HEX enquanto as outras mudam.

Perguntas frequentes

Por que minhas cores são diferentes das de uma ferramenta com círculo cromático HSL?

Esta ferramenta gira o matiz em OKLCH, um espaço de cores perceptual. Os ângulos de matiz não correspondem exatamente aos de HSL, então a cor “oposta” pode ter um tom um pouco diferente do resultado de uma ferramenta baseada em HSL.

Posso usar o JSON no Tailwind CSS?

O JSON associa nomes a valores HEX no mesmo formato que o Tailwind aceita para uma cor na configuração do tema. No Tailwind 4, você também pode colar as variáveis CSS em um bloco @theme depois de renomeá-las para --color-…

As paletas geradas são acessíveis?

Não automaticamente. Uma harmonia não indica o contraste entre texto e fundo. Confira cada par que pretende usar com o Verificador de contraste.

Privacidade

As paletas são geradas no seu navegador. Suas cores não são enviadas nem armazenadas.