Funciona totalmente no seu navegador

Gerador de paletas de cores para interfaces

Crie paletas em OKLCH, HSL e HSV, ajuste cada tom manualmente, verifique o contraste e exporte o resultado para Tailwind ou variáveis CSS.

4.9 /5 (Оценок: 156)

Базовый цвет

Введите HEX или выберите базовый цвет. Генератор построит шкалу 50–950 и сразу покажет её в интерфейсе.

L
C
H

Цветовая модель

OKLCH даёт более ровную визуальную шкалу и подходит для продуктовых интерфейсов.

Параметры генерации

Диапазон светлоты98% → 10%
Множитель насыщенности1.00×
Количество оттенков11
от 3 до 11

Предпросмотр палитры

Переключайте вкладки и смотрите, как оттенки ведут себя в реальных интерфейсных сценариях.

OKLCH • 11 оттенков
Шаблоны:
50
#eef9ff
L 98 / C 0.066
Тёмный текст
100
#e2f1ff
L 96 / C 0.120
Тёмный текст
200
#c0dbff
L 89 / C 0.161
Тёмный текст
300
#8fbaff
L 79 / C 0.191
Тёмный текст
400
#518eff
L 67 / C 0.209
Тёмный текст
500
#2361e9
L 54 / C 0.215
Белый текст
600
#0036b9
L 41 / C 0.209
Белый текст
700
#000b88
L 29 / C 0.191
Белый текст
800
#000058
L 19 / C 0.161
Белый текст
900
#000030
L 12 / C 0.120
Белый текст
950
#000019
L 10 / C 0.066
Белый текст

Вертикальная лента

Как палитра выглядит в плотном UI

50#eef9ff
100#e2f1ff
200#c0dbff
300#8fbaff
400#518eff
500#2361e9
600#0036b9
700#000b88
800#000058
900#000030
950#000019

Экспорт для Tailwind

Скопируйте объект палитры и вставьте его в tailwind.config.js.

theme: {
  extend: {
    colors: {
      brand: {
      50: '#eef9ff',
      100: '#e2f1ff',
      200: '#c0dbff',
      300: '#8fbaff',
      400: '#518eff',
      500: '#2361e9',
      600: '#0036b9',
      700: '#000b88',
      800: '#000058',
      900: '#000030',
      950: '#000019',
      },
    },
  },
}

CSS-переменные

Скопируйте токены для :root или любого контейнера темы.

:root {
  --color-50: #eef9ff;
  --color-100: #e2f1ff;
  --color-200: #c0dbff;
  --color-300: #8fbaff;
  --color-400: #518eff;
  --color-500: #2361e9;
  --color-600: #0036b9;
  --color-700: #000b88;
  --color-800: #000058;
  --color-900: #000030;
  --color-950: #000019;
}

Como usar o gerador de paletas

Comece com uma cor base, ajuste o perfil da escala e refine manualmente apenas os tons que realmente precisam.

1. Escolha uma cor base

Introduza um valor HEX ou use o campo de cor. O gerador constrói imediatamente uma escala 50–950.

2. Ajuste o modelo e as curvas

Compare OKLCH, HSL e HSV, depois ajuste a luminosidade dos extremos e a saturação geral da paleta.

3. Revise e exporte

Verifique a paleta na pré-visualização da interface e na matriz de contraste, depois exporte para Tailwind ou CSS.

Por que usar um gerador de paletas para interfaces

Uma boa paleta não é só estética. Afeta a legibilidade, a hierarquia visual, o reconhecimento do produto e a velocidade de decisão na interface.

Lógica consistente de tons

Com passos de 50 a 950, fica muito mais fácil desenhar botões, badges, fundos, estados e gráficos sem caos de cores.

Contraste e acessibilidade

A matriz de contraste e a seleção automática da cor do texto ajudam a identificar pares fracos cedo e a evitar estados ilegíveis na paleta.

Passagem rápida para o código

A exportação para Tailwind e variáveis CSS reduz o tempo entre escolher as cores e colocá-las numa interface real.

O que importa numa boa paleta de produto

O gerador de paletas é útil não só para designers. Ajuda a montar cores de sistema para site, interface SaaS, landing page ou ferramenta B2B interna mais depressa.

Luminosidade uniforme

Quando os tons saltam em luminosidade, a interface fica confusa: botões competem com cartões, acentos perdem prioridade e os estados ficam pouco claros.

Por isso o gerador permite controlar os extremos claro e escuro da escala e usar o modelo OKLCH mais uniforme.

Pensamento de sistema em vez de escolha aleatória de cores

Num produto real, uma paleta raramente é só uma cor bonita. Também são precisos fundos, estados de hover, bordas, gráficos, etiquetas, mensagens de erro, acentos secundários e texto legível em diferentes superfícies.

  • Os passos 50–200 funcionam bem para fundos, badges suaves e estados claros.
  • Os passos 400–600 costumam ser o acento principal: botões, links, separadores ativos e barras de progresso.
  • Os passos 700–950 servem para acentos densos, superfícies escuras, texto em fundos saturados e visualização de dados.

Quando a edição manual de cada passo é útil

Uma escala automática resolve a maioria das tarefas, mas sistemas de marca quase sempre precisam de algum controlo manual. Por exemplo, pode querer que o 500 fique mais denso para CTAs, o 100 mais limpo para cartões claros e o 900 mais calmo para um painel escuro. Por isso a ferramenta permite editar cada tom sem quebrar a estrutura geral da paleta.

Perguntas frequentes sobre geração de paletas

Respostas curtas às perguntas que surgem mais ao construir uma paleta para site ou interface.

Por que o OKLCH parece mais uniforme?

Este modelo corresponde melhor à perceção humana da cor, por isso os passos da paleta costumam ficar mais calmos e consistentes do que em HSL.

Preciso de editar cada tom manualmente?

Não obrigatoriamente. Na maioria dos casos basta ajustar o modelo e o intervalo de luminosidade e refinar manualmente só alguns passos-chave.

Para que serve a matriz de contraste?

Ajuda a ver rapidamente que pares de tons funcionam para texto, cartões, etiquetas, gráficos e estados, e que combinações é melhor evitar.

Quando devo escolher HSL ou HSV?

Se precisar de um modelo web familiar ou de um protótipo rápido e vivo, HSL e HSV são úteis para comparação. Para sistemas de produto, o OKLCH costuma dar melhores resultados.

O gerador é adequado para Tailwind?

Sim. Pode copiar o objeto da paleta para a config do projeto de imediato ou usar as variáveis CSS em qualquer frontend.

Esta ferramenta é só para designers?

Não. Também é útil para programadores, marketers e donos de produto que precisam de uma paleta limpa para uma nova interface ou landing page.

A construir uma nova interface ou landing page?

Use o gerador de paletas como passo de trabalho antes do design e desenvolvimento: primeiro monte o sistema de cores, depois passe ao kit de UI, página de marketing ou produto. Para outras tarefas visuais, o otimizador WebP também está disponível nesta secção.

Ver todas as ferramentas desta secção