colorize
ColorKit
CK

Gerador de Paleta de Cores

Pressione a barra de espaço para gerar infinitas combinações. Bloqueie suas cores prediletas e explore harmonias cromáticas.

#28C333

#DCB8FF

#6B5E11

#B867E9

#BB94A0

O que faz o Gerador de Paleta de Cores?

Gera esquemas de 5 cores calculados segundo teorias de harmonia cromática, auxiliando designers e desenvolvedores na escolha de identidades visuais coerentes.

Como utilizar

  • Gerar: Toque na Barra de espaço ou clique em "Gerar paleta".
  • Bloquear: Clique no ícone de cadeado para congelar as cores que você adorou.
  • Copiar: Clique no código HEX para transferi-lo diretamente para a área de transferência.
Base de Conhecimento & FAQ

Perguntas Frequentes

Respostas e soluções diretas para dúvidas frequentes, desafios técnicos e padrões da indústria.

O que é a regra de cores 60-30-10 no design de interface e web?expand_more
A regra 60-30-10 é uma proporção de equilíbrio visual essencial:
  • 60% Cor dominante: Geralmente a base neutra do layout (branco, ardósia ou escuro).
  • 30% Cor secundária: Usada em cartões, menus laterais e cabeçalhos para conferir profundidade.
  • 10% Cor de destaque (accent): Um tom vibrante de alto contraste reservado estritamente para conversões: botões de ação (CTA), links e notificações ativas.
Como garantir que a paleta gerada atenda aos padrões de acessibilidade?expand_more
Para manter a conformidade com as diretrizes de acessibilidade (WCAG 2.1 AA):
  • Garanta que os textos aplicados sobre os fundos mantenham proporção mínima de 4.5:1.
  • Evite textos brancos sobre amarelo puro (#FFFF00) ou verde-limão claro, que chegam a míseros 1.2:1.
  • Utilize nosso Verificador de Contraste WCAG para testar cada par antes do lançamento.
Como exportar minha paleta para Tailwind CSS ou variáveis CSS nativas?expand_more
Adicione as cores geradas como variáveis no seu CSS global: 
:root {
  --color-primary: #4F46E5;
  --color-secondary: #06B6D4;
  --color-accent: #F43F5E;
  --color-neutral: #1E293B;
  --color-surface: #F8FAFC;
}
Ou declare no tailwind.config.js dentro de theme.extend.colors.
Qual a diferença psicológica entre paletas de cores quentes e frias?expand_more
Paletas quentes (vermelho, laranja, amarelo) comunicam dinamismo, apetite e urgência (delivery, promoções, mídia). Paletas frias (azul, verde petróleo, índigo) transmitem confiança, sobriedade e segurança (bancos, saúde, plataformas em nuvem).
Quantas cores um design system profissional costuma conter?expand_more
Um sistema de design escalável costuma definir:
  • 1 cor de marca primária (com escala tonal de 50 a 950).
  • 1 cor secundária de apoio.
  • 1 cor de destaque para ações principais.
  • 1 escala de neutros (8 a 10 tons de cinza para fundos, bordas e textos).
  • 4 cores semânticas: Sucesso (verde), Atenção (âmbar), Erro (vermelho) e Informação (azul).