Color Palette Generator

Sobre esta ferramenta

O Extrator de Paleta de Cores gera uma escala de 10 etapas para sistemas de design a partir de qualquer cor base, correspondendo às convenções de sombras 50–900 usadas pelo Tailwind CSS, Material Design e frameworks similares.

Cada amostra na escala gerada exibe seus valores hex, RGB e HSL. A cor do texto em cada amostra se ajusta automaticamente para branco ou escuro com base na luminância.

Como usar

1. Escolha uma cor base com o seletor de cores ou digite um valor hex.
2. A escala de 10 etapas (50–900) é gerada instantaneamente, cobrindo todo o intervalo de luminosidade.
3. Use os valores hex, RGB ou HSL para aplicar cores no seu sistema de design ou variáveis CSS.

Casos de uso

Equipes de design geram escalas de cores completas como extensões de configuração do Tailwind ou propriedades CSS personalizadas. Desenvolvedores frontend constroem componentes de UI acessíveis onde o tom 50 fornece um fundo claro e 900 fornece uma cor de texto escuro.

Perguntas frequentes

• Como esta escala é diferente dos "tons" em outras ferramentas? — Esta ferramenta gera uma escala fixa de 10 etapas (50, 100, 200, … 900) ancorada em valores de luminosidade específicos, seguindo convenções comuns de sistemas de design.
• Mudar a saturação afeta a escala? — A saturação da sua cor base é preservada em todas as etapas — apenas a luminosidade muda.
• Posso usar essas cores diretamente no Tailwind CSS? — Sim. Copie os valores hex de cada nível de tom e adicione-os ao tailwind.config.js em theme.extend.colors com os números de tom como chaves.