# Gerador de paleta de cores a partir do HEX

> Este gerador cria uma paleta a partir de uma cor: uma escala de 11 tons, de 50 (quase branco) a 950 (quase preto), como a do Tailwind, e as combinações clássicas do círculo cromático, como complementar, análogas e tríade. A escala pode ser copiada como variáveis CSS ou como tema do Tailwind 4.

- Endereço oficial: https://pradev.com.br/gerador-de-paleta-a-partir-de-hex
- Categoria: Front-end e design
- Tipo: Gerador
- Atualizado em: 2026-10-01
- Autor: Leonardo Gaertner (https://pradev.com.br/sobre)
- Preço: grátis, sem cadastro. O processamento acontece no navegador de quem usa.

## Como usar

1. Digite a cor base em HEX (ou outro formato) ou escolha no seletor.
2. Confira a escala de tons e as combinações. Clique em uma cor para copiar o código.
3. Copie a escala inteira como variáveis CSS ou para o @theme do Tailwind 4.

## Como funciona

A escala varia a luz no espaço OKLCH e mantém o tom da cor base, por isso os 11 passos parecem da mesma família. Perto do branco e do preto, a saturação diminui, como nas paletas desenhadas à mão. A cor que você digitou entra na escala exatamente como é, no passo de luz mais próximo.

As combinações giram o tom no círculo de cores: a complementar fica no lado oposto (180°), as análogas ao lado (30° para cada lado), a tríade divide o círculo em três (120°) e a tétrade em quatro (90°). São pontos de partida: ajuste a luz e a saturação para cada uso.

### Exemplo com #3b82f6

```text
A cor entra no passo de luz mais próximo da escala
Complementar: #3b82f6 e o laranja oposto no círculo
Variáveis CSS: --cor-50 a --cor-950
```

## Perguntas frequentes

### Como escolher quais tons usar?

Um padrão comum: os tons 50 a 100 para fundos, 500 a 600 para botões e links, e 700 a 900 para texto. Confira o contraste entre o texto e o fundo no verificador de contraste antes de fechar a paleta.

### Por que a escala não usa HSL?

Porque no HSL a mesma luminosidade parece muito diferente conforme o tom: um amarelo com 50% de luz parece bem mais claro que um azul com 50%. No OKLCH, a luz acompanha a percepção, e a escala fica equilibrada para qualquer cor.

### Como usar a escala no Tailwind?

No Tailwind 4, cole o bloco copiado no seu CSS principal: o @theme cria as classes bg-marca-500, text-marca-700 e as demais. Troque "marca" pelo nome que quiser.

## Fontes

- [Björn Ottosson: o espaço de cor OKLab](https://bottosson.github.io/posts/oklab/)

## Guias

- [Contraste de cores e acessibilidade: o que a WCAG exige](https://pradev.com.br/guias/contraste-de-cores-wcag-acessibilidade): O que a WCAG exige de contraste entre texto e fundo (4,5:1 no AA), como a razão é calculada e como corrigir cores que não passam, com código.
- [OKLCH no CSS: cores e paletas que fazem sentido](https://pradev.com.br/guias/oklch-no-css-cores-e-paletas): O que é OKLCH, por que ele gera paletas mais equilibradas que HSL e como usar oklch() no CSS, com a conversão de HEX em JavaScript e Python.

## Ferramentas relacionadas

- [Conversor de Cores HEX RGB HSL](https://pradev.com.br/conversor-de-cores): Converta cores entre HEX, RGB, HSL, OKLCH, HWB, HSV e CMYK, com seletor de cores e os nomes do CSS. Grátis, direto no navegador.
- [Verificador de Contraste](https://pradev.com.br/verificador-de-contraste): Confira o contraste entre a cor do texto e a do fundo pela WCAG 2.2: razão, níveis AA e AAA e sugestões de cor que passam. Grátis.
- [Tabela de Cores HTML](https://pradev.com.br/tabela-de-cores-html): As 148 cores com nome do HTML e do CSS, com HEX, RGB e nome em português. Busque, ordene por tom ou luz e copie com um clique.
- [Conversor px para rem](https://pradev.com.br/conversor-px-rem): Converta px em rem, em, pt e % e o contrário, com a base de 16px ou outra. Tabela com os tamanhos mais usados. Grátis, no navegador.
- [Gerador de Lorem Ipsum](https://pradev.com.br/gerador-de-lorem-ipsum): Gere texto Lorem Ipsum por parágrafos, frases ou palavras, com ou sem tags <p>, para preencher layouts e protótipos. Grátis e sem cadastro.
- [Qual é a Tecla](https://pradev.com.br/qual-e-a-tecla): Aperte uma tecla e veja event.key, event.code, keyCode e os modificadores do JavaScript. Útil para atalhos de teclado e jogos.