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

#fff6ff

50perfil →

vs branco 1.06
vs preto 19.88

#ffdffd

100perfil →

vs branco 1.22
vs preto 17.23

#ffc1f9

200perfil →

vs branco 1.47
vs preto 14.25

#ffa0f4

300perfil →

vs branco 1.81
vs preto 11.59

#ff75ec

400perfil →

vs branco 2.33
vs preto 9.01

etapa de origem#f439dd

500perfil →

vs branco 3.24
vs preto 6.48

#e400cd

600perfil →

vs branco 4.05
vs preto 5.18

#cc00b7

700perfil →

vs branco 4.94
vs preto 4.25

#ae009d

800perfil →

vs branco 6.39
vs preto 3.29

#8d007f

900perfil →

vs branco 8.61
vs preto 2.44

#66005c

950perfil →

vs branco 12.21
vs preto 1.72

// tailwind.config.js / @theme
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
        50: "#fff6ff",
        100: "#ffdffd",
        200: "#ffc1f9",
        300: "#ffa0f4",
        400: "#ff75ec",
        500: "#f439dd",
        600: "#e400cd",
        700: "#cc00b7",
        800: "#ae009d",
        900: "#8d007f",
        950: "#66005c",
        },
      },
    },
  },
};

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: "#fff6ff", 100: "#ffdffd", 200: "#ffc1f9", 300: "#ffa0f4", 400: "#ff75ec", 500: "#f439dd", 600: "#e400cd", 700: "#cc00b7", 800: "#ae009d", 900: "#8d007f", 950: "#66005c", }, }, }, }, };

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.