Ferramenta gratuita, sem cadastro

Extraia a paleta de cores de qualquer site

Cole uma URL para pegar as cores de marca, texto, fundo e destaque do site com códigos hex, ordenadas por uso. Grátis, sem cadastro. Veja exemplos completos no DESIGN.md da Stripe e no DESIGN.md da Linear, ou descubra o que um DESIGN.md acrescenta.

Experimente

Use esta paleta no seu código

O extrator agrupa as cores por papel (fundo, superfície, texto, marca, destaque e borda) e as ordena pela área da página que cada uma cobre. Para reutilizá-las, dê um nome a cada papel em vez de espalhar códigos hex pelos seus estilos, assim uma única mudança atualiza todos os lugares onde a cor aparece.

1. Nomeie as cores pelo papel, não pelo tom. --color-text-muted continua fazendo sentido depois de um redesign; --gray-600 não diz onde a cor deve ser usada. Coloque os códigos hex que você copiou.

:root {
  --color-brand: #635bff;
  --color-text: #0a2540;
  --color-text-muted: #425466;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f9fc;
  --color-border: #e3e8ee;
}

body { background: var(--color-surface); color: var(--color-text); }
a, .button-primary { color: var(--color-brand); }

2. Use no Tailwind. Cada variável vira um conjunto de utilitários como bg-surface, text-ink-muted e border-line.

/* app.css, Tailwind CSS v4 */
@theme {
  --color-brand: #635bff;
  --color-ink: #0a2540;
  --color-ink-muted: #425466;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f9fc;
  --color-line: #e3e8ee;
}

3. Verifique os pares que você usa. Texto corrido precisa de uma razão de contraste de pelo menos 4.5:1 em relação ao fundo, e texto grande, de 3:1. O extrator mostra a razão entre a cor de texto principal e o fundo da página; verifique qualquer outro par que você pretende usar antes de publicar.

As cores são uma camada de um sistema de design. Um DESIGN.md guarda as cores junto com a escala tipográfica, o espaçamento e as regras de componentes, para que o seu agente de código use a cor certa no lugar certo.

FAQ

Perguntas sobre a paleta de cores

Respostas curtas sobre o Extrator de paleta de cores de sites gratuito.

A página é carregada em um navegador de verdade e as cores que ela pinta são medidas pela área da página que cobrem. Cada cor recebe um papel estimado: fundo, painel, texto, marca, destaque ou borda.

A paleta lista as cores que a página realmente usa, ordenadas pela área que cobrem e limitadas a doze. Cores dentro de imagens ou vídeos, cores que só aparecem no hover e cores usadas em outras páginas do site não entram na conta.

Não. Ele lê a página no tema que um visitante novo vê por padrão, normalmente o claro. Sites que são escuros por padrão aparecem escuros. Um DESIGN.md completo cobre o modo escuro quando o site tem um.

Não como arquivo. Você pode copiar os códigos hex: selecione uma amostra para copiar uma cor ou copie todas de uma vez, uma por linha.

Sim, um pixel por vez. No Chrome ou no Edge, clique com o botão direito em um elemento, escolha Inspecionar e clique no quadradinho de cor ao lado de qualquer cor no painel Estilos; o seletor tem um conta-gotas que lê qualquer ponto da página. O Firefox tem o mesmo conta-gotas na barra de ferramentas do Inspetor.

Esta ferramenta lista só as cores. Um DESIGN.md cobre as cores com os seus papéis, a escala tipográfica, o espaçamento e as regras de componentes de um site, em um único arquivo que o seu agente de código consegue seguir.

Mais ferramentas gratuitas

Ver todas as ferramentas gratuitas

  • Validador de DESIGN.md

    Cole um DESIGN.md para verificar a estrutura e os tokens e ver uma prévia, direto no navegador.

    Abrir o Validador de DESIGN.md

Precisa do sistema de design completo?

Receba um DESIGN.md com as cores, a escala tipográfica, o espaçamento e os componentes de qualquer site, pronto para o seu agente de código.

Gerar um DESIGN.md