Anúncios incomodam? Ir Sem anúncios Hoje 

Geração de Paleta de Cores Criando uma Paleta Completa a partir de um Único Hex

Publicado em 12 de maio de 2026

Aprenda a criar uma paleta de cores completa, semântica e adequada para modo escuro a partir de um único hex de marca usando a teoria de cores HSL e JavaScript.

Geração de Paleta de Cores: Criando uma Paleta Completa a partir de um Único Hex 1

ANUNCIADO Remover?

Você tem um hex de marca. Talvez tenha vindo de um logo, de um guia de estilo ou de uma cor que você gosta. Agora precisa de uma paleta completa — tons, tons escuros, cores complementares, tokens semânticos, variações de modo escuro. Este guia mostra exatamente como construir isso, de forma programática e correta.

A Teoria de Cores que De fato Importa

A maioria da teoria de cores que você verá na escola de design não se traduz diretamente para o trabalho com interfaces. Aqui está o que realmente importa:

Tipo de Harmonia	Como Gerar	Melhor para	Exemplo
Complementares	Rotacionar o tom 180°	Acessórios de alta contraste, CTAs	Azul como principal + laranja como destaque
Análogas	±30° de rotação de tom	Fundos, gradientes sutis	Azul + verde-água + indigo
Triádicas	Três tons a 120°	Dashboards coloridos, visualização de dados	Vermelho + amarelo + azul
Complementar em divisão	180° ± 30°	Contração mais suave do que complementar	Azul + laranja-amarelo + vermelho-alaranjado

Para a maioria das bibliotecas de UI, você usará a cor da marca como principal, um vizinho análogo como secundário e um tom complementar ou em divisão para destaque e estados interativos.

Por que o HSL Supera o Hex no Trabalho com Paletas

Hex e RGB codificam a cor como canais de hardware — não como os humanos percebem a cor. O HSL (Tom, Saturação, Brilho) mapeia para a percepção humana:

Tom — a cor em si (0–360°, onde 0 = vermelho, 120 = verde, 240 = azul)
Saturação — intensidade vs. cinza (0% = cinza, 100% = cor plena)
Brilho — quanto mais claro ou escuro (0% = preto, 100% = branco)

Isso importa porque para gerar um tom da sua cor de marca, você não a mistura com branco — você aumenta o brilho no HSL. O tom permanece exatamente o mesmo. Isso não é garantido quando você realiza operações matemáticas com valores de hex.

Gerar Tons e Escuros da Maneira Correta

O modo errado é comum: interpolar o hex em direção a #ffffff para tons, em direção a #000000 para escuros. Isso introduz artefatos de desvio de tom e desatuação — seu "azul claro" se torna um azul cinzento.

O modo correto: parse o hex para HSL, depois variar apenas o brilho:

/**
 * Generate a 10-step shade scale from a base HSL color.
 * Returns shades from 50 (lightest) to 950 (darkest), like Tailwind.
 * @param {number} h - Hue (0–360)
 * @param {number} s - Saturation (0–100)
 * @param {number} l - Base lightness (0–100)
 * @returns {Object} - Scale object: { 50, 100, 200, ..., 900, 950 }
 */
function generateShadeScale(h, s, l) {
  // Lightness stops mapped to Tailwind-style scale keys
  const stops = [
    [50,  95],
    [100, 90],
    [200, 80],
    [300, 70],
    [400, 60],
    [500, l],   // 500 = your base color
    [600, 40],
    [700, 30],
    [800, 20],
    [900, 12],
    [950, 7],
  ];

  const scale = {};
  for (const [key, lightness] of stops) {
    scale[key] = `hsl(${h}, ${s}%, ${lightness}%)`;
  }
  return scale;
}

// Example: brand color #3b82f6 (Tailwind blue-500)
// HSL ≈ hsl(217, 91%, 60%)
const palette = generateShadeScale(217, 91, 60);
// palette[50]  → "hsl(217, 91%, 95%)" — near-white blue tint
// palette[500] → "hsl(217, 91%, 60%)" — brand color
// palette[900] → "hsl(217, 91%, 12%)" — near-black blue shade

A ideia central: o tom e a saturação permanecem constantes em toda a escala. Apenas o brilho muda. Isso produz uma escala visualmente coesa que parece a mesma família de cores em todos os níveis.

Precisa gerar isso a partir de um hex? Use o Extrator de Paleta de Cores para extrair os valores de HSL de qualquer cor instantaneamente.

Escala de Design 50–950

O Tailwind popularizou a escala de 11 níveis (50, 100–900, 950). É hoje um padrão de fato nos sistemas de design porque mapeia perfeitamente para casos de uso:

50–100: Fundos de página, estados de hover em superfícies claras
200–300: Bordas, divisores sutis, estados desativados
400–500: Elementos interativos — botões, links, anéis de foco
600–700: Estados de hover/ativo para elementos interativos
800–900: Texto em fundos claros
950: Quase preto para títulos de alta contraste

Quando você gera essa escala com a sua cor de marca, você obtém automaticamente todos os tons necessários para qualquer estado de componente — sem precisar tomar decisões de cor por componente.

Da Cor da Marca para uma Paleta Completa e Funcional

Aqui está o fluxo prático quando você tem um único hex de marca:

Parse para HSL. Converter #1d4ed8 → hsl(221, 74%, 48%)
Gerar a escala principal. Executar a função de escuro acima para a escala de 11 níveis.
Derivar o secundário. Rotacionar o tom ±30° para um secundário análogo: hsl(251, 74%, 48%) (azul-romântico).
Derivar o destaque. Rotacionar o tom 180° para complementar: hsl(41, 74%, 48%) (dourado).
Gerar escalas para as três cores. Mesma função de escuro, entradas de tom diferentes.

Você pode visualizar o resultado completo — incluindo os tipos de harmonia — com o Gerador de Esquemas de Cores antes de escrever uma linha de código.

Tokens de Cores Semânticas

Os valores da escala bruta são para os primos da paleta. Os tokens semânticos são o que os componentes realmente usam:

const tokens = {
  // Map scale values to semantic names
  'color-primary':         palette[500],  // brand color
  'color-primary-hover':   palette[600],
  'color-primary-subtle':  palette[50],
  'color-text':            palette[900],
  'color-text-muted':      palette[600],
  'color-border':          palette[200],
  'color-bg':              palette[50],

  // Status colors — separate scales per semantic group
  'color-success':         'hsl(142, 71%, 45%)',
  'color-warning':         'hsl(38, 92%, 50%)',
  'color-danger':          'hsl(0, 84%, 60%)',
};

Essa separação é o que torna o modo escuro viável. Seus componentes referenciam color-text, e não palette[900]. Em modo escuro, você simplesmente re-mapeia o token — não todos os componentes.

Modo Escuro: Inversão da Escala

Uma boa paleta HSL inverte quase automaticamente. A regra: troque os extremos claro e escuro da escala, depois ajuste os pontos médios ligeiramente para equilíbrio perceptual.

// Light mode
const lightTokens = {
  'color-bg':    palette[50],   // near-white background
  'color-text':  palette[900],  // near-black text
  'color-border': palette[200],
};

// Dark mode — same scale, inverted stops
const darkTokens = {
  'color-bg':    palette[950],  // near-black background
  'color-text':  palette[50],   // near-white text
  'color-border': palette[800],
};

Como o tom e a saturação permanecem constantes em toda a escala, a identidade da marca sobrevive à inversão. Um azul como principal em modo claro lê-se como o mesmo azul em modo escuro — apenas mais brilhante contra a superfície escura. Esse é o benefício composto de construir sua paleta em HSL desde o início.

Montando Tudo

Partindo de um único hex, você pode agora gerar uma paleta completa, com nomes semânticos e pronta para modo escuro, em menos de 50 linhas de JavaScript. Os passos-chave:

Parse hex → HSL
Gerar uma escala de 11 níveis de brilho, mantendo o tom e a saturação fixos
Derivar os tons secundários e de destaque por rotação
Mapear os valores da escala primitiva para tokens semânticos
Re-mapear os tokens para o modo escuro

Para prototipagem rápida sem escrever o código, o Gerador de Esquemas de Cores e Extrator de Paleta de Cores trata tudo isso visualmente — exporte o resultado como variáveis CSS ou um arquivo JSON de token e insira diretamente no seu sistema de design.