Gerador de Escalas

Transforme qualquer cor em uma escala de sistema de design de 11 etapas (50→950): interpolação OKLCH perceptualmente uniforme com a cor de origem ancorada em sua etapa mais próxima, contraste WCAG contra branco/preto em cada etapa, exportação com um clique para Tailwind / Variáveis CSS / SCSS / JSON.

#--11 etapa

#fff3fe

50perfil →

vs branco 1.08
vs preto 19.50

#ffdcfd

100perfil →

vs branco 1.24
vs preto 16.91

#ffc0fa

200perfil →

vs branco 1.48
vs preto 14.17

#fea1f5

300perfil →

vs branco 1.81
vs preto 11.63

#f67aed

400perfil →

vs branco 2.35
vs preto 8.93

etapa de origem#e94ce0

500perfil →

vs branco 3.19
vs preto 6.57

#d600ce

600perfil →

vs branco 4.42
vs preto 4.75

#bd00b8

700perfil →

vs branco 5.45
vs preto 3.86

#a1009d

800perfil →

vs branco 6.99
vs preto 3.00

#81007f

900perfil →

vs branco 9.38
vs preto 2.24

#5c005a

950perfil →

vs branco 13.10
vs preto 1.60

// tailwind.config.js / @theme
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
        50: "#fff3fe",
        100: "#ffdcfd",
        200: "#ffc0fa",
        300: "#fea1f5",
        400: "#f67aed",
        500: "#e94ce0",
        600: "#d600ce",
        700: "#bd00b8",
        800: "#a1009d",
        900: "#81007f",
        950: "#5c005a",
        },
      },
    },
  },
};

Como funciona o gerador de tons - insira, verifique, exporte.

Extraia uma escala de sistema de design de 11 etapas a partir de uma cor, perceptualmente uniforme em OKLCH.

01
Inserir
Cole um HEX, ou clique em "Criar escala" em qualquer página de cor para inserir o valor.
02
Verificar
Sua cor se ajusta à etapa mais próxima; o contraste WCAG em relação ao branco e preto é exibido abaixo de cada etapa.
03
Exportar
Escolha Tailwind / CSS vars / SCSS / JSON e copie diretamente para seu código.

Perguntas frequentes sobre o gerador de tons

Quatro perguntas que as pessoas realmente fazem sobre a geração de tons.

Por que 11 etapas?: 50-950 em 11 etapas corresponde às escalas usadas por sistemas de design mainstream (Tailwind, Radix), portanto, a troca não tem custo.
A matiz irá desviar?: Não. A interpolação é feita em OKLCH com sua cor ancorada na etapa mais próxima, portanto a matiz se mantém de 50 a 950.
Posso usar a escala comercialmente?: Sim. Uma escala de tons é números calculados sem licença associada - o que você exporta é seu.
Por que algumas etapas ficam acinzentadas?: Cores de alta croma saem do sRGB nos extremos; o mecanismo comprime a croma nesses pontos para que as etapas permaneçam vívidas, em vez de ficarem acinzentadas ou neon.

Depois de obter o resultado

Continue a partir daqui e coloque as cores para funcionar.

Correspondência a Padrões

Insira um código RAL, Pantone ou NCS — ou qualquer HEX — e corresponda-o em todos os 10 sistemas padrão com ΔE CIEDE2000.

Verificador de Contraste

Validação de contraste WCAG 2.1 entre qualquer cor de primeiro plano e plano de fundo.

Painel de Paletas

Barra de espaço para aleatorizar, travar, arrastar para reordenar, compartilhar por URL — tudo o que um painel de paletas deve fazer.

Estúdio de Paletas com IA

Descreva uma cena ou humor em uma linha — obtenha uma paleta de cinco tons com justificativa.

Gerador de Escalas

// tailwind.config.js / @theme module.exports = { theme: { extend: { colors: { brand: { 50: "#fff3fe", 100: "#ffdcfd", 200: "#ffc0fa", 300: "#fea1f5", 400: "#f67aed", 500: "#e94ce0", 600: "#d600ce", 700: "#bd00b8", 800: "#a1009d", 900: "#81007f", 950: "#5c005a", }, }, }, }, };

Como funciona o gerador de tons - insira, verifique, exporte.

Extraia uma escala de sistema de design de 11 etapas a partir de uma cor, perceptualmente uniforme em OKLCH.

Inserir

Cole um HEX, ou clique em "Criar escala" em qualquer página de cor para inserir o valor.

Verificar

Sua cor se ajusta à etapa mais próxima; o contraste WCAG em relação ao branco e preto é exibido abaixo de cada etapa.

Exportar

Escolha Tailwind / CSS vars / SCSS / JSON e copie diretamente para seu código.

Perguntas frequentes sobre o gerador de tons

Quatro perguntas que as pessoas realmente fazem sobre a geração de tons.

Por que 11 etapas?

50-950 em 11 etapas corresponde às escalas usadas por sistemas de design mainstream (Tailwind, Radix), portanto, a troca não tem custo.

A matiz irá desviar?

Não. A interpolação é feita em OKLCH com sua cor ancorada na etapa mais próxima, portanto a matiz se mantém de 50 a 950.

Posso usar a escala comercialmente?

Sim. Uma escala de tons é números calculados sem licença associada - o que você exporta é seu.

Por que algumas etapas ficam acinzentadas?

Cores de alta croma saem do sRGB nos extremos; o mecanismo comprime a croma nesses pontos para que as etapas permaneçam vívidas, em vez de ficarem acinzentadas ou neon.