Readdy AI

Gerador de Paleta de Cores HEX

Comece com uma cor HEX e gere uma paleta completa com escala tonal, cores harmônicas, tokens semânticos e variáveis CSS prontas para copiar.

Cor Base (HEX)
Suporta #RGB ou #RRGGBB, por exemplo #0EA5E9

Presets Rápidos

Visão Geral da Paleta
Veja as relações da sua cor base e construa um sistema consistente mais rápido.

Cor Base (HEX)

#2563EB

Matiz: 221Saturação: 83%Luminosidade: 53%

Cores Harmônicas

Análogo A
#45C7E4
Análogo B
#6345E4
Complementar
#E6AB2A
Triádico A
#E2386D
Triádico B
#6DE238
Escala Tonal (50 - 900)
Tons de claro a escuro prontos para fundos, bordas, estados e contraste de texto.
50
#F4F6FB
100
#D1DBF1
200
#ABBFEB
300
#82A2E7
400
#5583E8
500
#2563EB
600
#124BC7
700
#0D3794
800
#082462
900
#04112F
Tokens Semânticos
Use esses papéis diretamente na UI para manter a consistência visual do produto e da marca.
Primary

Primary

Cor principal da marca e CTA

#2563EB
Secondary

Secondary

Cor de marca secundária

#6C59D5
Accent

Accent

Destaques de alto contraste

#E3AA2D
Background

Background

Tom de fundo da página

#F7F7F8
Surface

Surface

Fundo de cartões e contêineres

#E8E9EE
Text

Text

Cor padrão do texto

#1B212C
Variáveis CSS
Copie uma vez e adicione à sua folha de estilos.
:root {
  --color-primary: #2563EB;
  --color-secondary: #6C59D5;
  --color-accent: #E3AA2D;
  --color-background: #F7F7F8;
  --color-surface: #E8E9EE;
  --color-text: #1B212C;
  --color-primary-50: #F4F6FB;
  --color-primary-100: #D1DBF1;
  --color-primary-200: #ABBFEB;
  --color-primary-300: #82A2E7;
  --color-primary-400: #5583E8;
  --color-primary-500: #2563EB;
  --color-primary-600: #124BC7;
  --color-primary-700: #0D3794;
  --color-primary-800: #082462;
  --color-primary-900: #04112F;
}

Como Construir um Sistema de Cores Completo a Partir de um Código HEX

Esta ferramenta transforma uma cor HEX base em uma paleta estruturada em tempo real. Você pode inserir manualmente um valor HEX, escolher do seletor de cores ou gerar uma cor aleatória.

1

Passo 1: Insira ou Selecione uma Cor Base

Insira um código de cor HEX diretamente, escolha uma cor do seletor ou clique em "Cor Aleatória" para gerar automaticamente.

2

Passo 2: Veja a Visão Geral da Paleta

Veja sua cor base junto com cores harmoniosas geradas automaticamente que complementam e estendem seu design.

3

Passo 3: Explore a Escala Tonal e Tokens Semânticos

Revise a escala tonal (50–900) com tons de claro a escuro ideais para fundos, bordas, estados e contraste de texto.

4

Passo 4: Copie Variáveis CSS ou Tokens

Copie as variáveis CSS geradas com um clique e cole diretamente na sua folha de estilos.

Paletas de Cores Estruturadas para Projetos Reais

Este Gerador de Paleta de Cores HEX vai além de amostras básicas. Ele cria paletas estruturadas prontas para usar em interfaces de produto, sistemas de design e fluxos de trabalho de marca.

  • Geração de Cores Baseada em Harmonia

    Gere automaticamente cores harmoniosas complementares que mantêm equilíbrio visual e contraste.

  • Escala Tonal (50–900)

    Tons de claro a escuro otimizados para camadas de UI, estados, fundos e contraste de texto legível.

  • Tokens Semânticos para Consistência de UI

    Papéis predefinidos ajudam a manter uso consistente em ações primárias, estados de sucesso, avisos e elementos neutros.

  • Variáveis CSS Prontas para Copiar

    Exporte toda a sua paleta como variáveis CSS com um clique — pronta para implementação na sua folha de estilos.

Perguntas Frequentes

É uma ferramenta que cria uma paleta de cores completa com base em um único valor de cor HEX, incluindo variações tonais e cores harmoniosas.
Sim. Você pode inserir qualquer cor HEX válida, selecionar uma manualmente ou gerar uma cor aleatória.
A escala tonal (50–900) fornece tons estruturados para fundos, bordas, estados hover e contraste de texto acessível.
Basta copiar as variáveis e colá-las no seu arquivo CSS ou configuração do sistema de design.

Crie uma Paleta de Cores Escalável em Segundos