Gerador de escala de cores
Gere uma escala de cores suave em N etapas entre duas cores instantaneamente. Escolha cores iniciais e finais com seletores nativos ou 10 pares predefinidos, defina de 2 a 50 etapas e alterne entre interpolação RGB e HSL para ver a diferença. Visualize os valores HEX, RGB e HSL de cada etapa e exporte a escala como um gradiente CSS, propriedades personalizadas CSS ou configuração do Tailwind. Totalmente privado, 100% gratuito e sem necessidade de inscrição.
Preset Pairs
Colors
Settings
RGB interpolates linearly in RGB space - good for simple gradients.
Color Scale
Por que usar nosso gerador de escala de cores?
- Contagem e modos de etapas personalizáveis: O gerador de escala de cores permite escolher de 2 a 50 etapas e alternar entre os modos de interpolação linear RGB e interpolação HSL. Ajuste o número de etapas com um controle deslizante, escolha entre 10 pares de cores predefinidos ou insira valores HEX personalizados para ajustar sua escala.
- Modos de interpolação RGB e HSL: A interpolação RGB cria uma transição linear suave entre as duas cores no espaço RGB, enquanto a interpolação HSL viaja através do espaço de cores HSL para gradientes perceptualmente mais suaves. Alterne entre os modos instantaneamente para comparar a diferença.
- 100% privado - sem upload: toda a geração da escala de cores acontece localmente no seu navegador. Seus valores de cores nunca saem do seu dispositivo e nunca são enviados para nenhum servidor - seguro para projetos de clientes e sistemas de design proprietários.
- Gratuito e sem limites: gere escalas de cores ilimitadas sem inscrição, sem assinatura e sem limites de uso. O gerador de escala de cores é totalmente gratuito para sempre, sem anúncios bloqueando a interface.
Casos de uso comuns para gerador de escala de cores
- Tokens e variáveis de design CSS: os mantenedores do sistema de design usam o gerador de escala de cores para criar escalas de cores escalonadas para propriedades personalizadas CSS. Gere tokens de cores consistentes como --scale-1 a --scale-10 com etapas distribuídas uniformemente entre duas cores de marca para uso em um aplicativo inteiro.
- Paletas de cores do Design System: Os designers usam o gerador de escala de cores para construir paletas de cores estruturadas a partir das cores da marca. As etapas geradas fornecem valores intermediários que podem ser usados para estados de foco, estados ativos, bordas e planos de fundo – garantindo consistência visual em todos os componentes da UI.
- Visualização de dados e gráficos: os desenvolvedores de visualização de dados usam o gerador de escala de cores para criar escalas de cores sequenciais para tabelas, gráficos e mapas de calor. As etapas distribuídas uniformemente garantem que cada ponto de dados tenha uma cor visualmente distinta, mantendo um gradiente coerente em toda a visualização.
- Mapas de temperatura e gravidade: os painéis de análise usam o gerador de escala de cores para criar escalas de cores para mapas de temperatura, indicadores de gravidade e barras de progresso. Do vermelho ao verde ou do azul ao laranja, a escala escalonada fornece uma diferenciação visual clara para cada nível de limite.
- Configurações personalizadas do Tailwind CSS: os desenvolvedores que usam o Tailwind CSS podem exportar a escala de cores gerada diretamente como tokens de configuração do Tailwind. Cada etapa se torna uma entrada de cor nomeada que pode ser usada em todo um projeto com classes de utilitário Tailwind como bg-scale-3 ou text-scale-7.
- Diretrizes de marca impressa e digital: Os gerentes de marca usam o gerador de escala de cores para documentar transições de gradiente para materiais de marca. Os valores HEX intermediários garantem que as transições de cores da marca possam ser reproduzidas com precisão em materiais digitais e impressos.
O que é uma escala de cores?
Uma escala de cores é uma sequência de cores uniformemente espaçadas que fazem uma transição suave entre uma cor inicial e uma cor final. Cada etapa da escala representa uma cor intermediária em uma posição específica entre os dois pontos finais. O gerador de escala de cores calcula esses valores intermediários usando interpolação matemática, produzindo um conjunto de cores que pode ser usado em sistemas de design, visualizações de dados e bibliotecas de componentes de UI.
Como funciona nosso gerador de escala de cores
- Escolha suas cores: escolha uma cor inicial e final usando o seletor de cores nativo ou insira os valores HEX diretamente. Você também pode selecionar entre 10 pares de cores predefinidos, como Pôr do sol, Oceano ou Lavanda, para começar rapidamente. Clique em Trocar para inverter a direção da sua escala.
- Defina o número de etapas: use o controle deslizante ou a entrada numérica para escolher entre 2 e 50 etapas. Mais etapas criam um gradiente mais fino com diferenças de cores menores entre cada etapa adjacente.
- Escolha o modo de interpolação: o modo RGB interpola linearmente através do cubo de cores RGB, enquanto o modo HSL interpola através do cilindro HSL para transições perceptualmente mais suaves. Alterne entre eles para ver qual funciona melhor para o seu par de cores.
- Explorar e exportar: clique em qualquer amostra para ver seus valores HEX, RGB e HSL detalhados. Exporte a escala completa como valores HEX, código gradiente CSS, propriedades personalizadas CSS ou tokens de configuração do Tailwind.
Interpolação RGB vs HSL
- A interpolação RGB faz a transição de cada canal de cor (vermelho, verde, azul) de forma independente usando interpolação linear. Este é o método mais simples e rápido, produzindo um caminho direto em linha reta através do cubo de cores RGB. A interpolação RGB funciona bem para a maioria dos pares de cores e cria gradientes de aparência natural.
- A interpolação HSL converte ambas as cores no espaço de cores HSL (matiz, saturação, luminosidade) e interpola cada componente independentemente. O valor de matiz usa interpolação de caminho mais curto para evitar percorrer um caminho longo na roda de cores. A interpolação HSL geralmente produz transições perceptualmente mais uniformes, especialmente quando as cores inicial e final têm matizes diferentes.
- Escolhendo o modo certo: RGB geralmente é preferido para gradientes simples de marca para marca, onde a precisão das cores é importante. HSL é melhor para escalas de cores usadas na visualização de dados onde a uniformidade perceptual é importante. Experimente os dois modos para ver qual produz o resultado visualmente mais agradável para o seu par de cores específico.
Privacidade, segurança e disponibilidade
Processamento 100% do lado do cliente: Nosso gerador de escala de cores é executado inteiramente em seu navegador usando JavaScript. Nenhum valor de cor é carregado, armazenado ou transmitido para qualquer servidor. Isso o torna seguro para projetos sensíveis de clientes e sistemas de design proprietários.
Sem inscrição ou limites: o gerador de escala de cores é totalmente gratuito, sem necessidade de conta, sem limites de uso e sem recursos premium. Gere escalas de cores ilimitadas instantaneamente, sem quaisquer restrições.
Perguntas frequentes
Um gerador de escala de cores cria uma sequência de cores uniformemente espaçadas que fazem uma transição suave entre uma cor inicial e uma cor final. Nosso gerador de escala de cores permite escolher entre 2 e 50 etapas, suporta modos de interpolação RGB e HSL e fornece valores intermediários HEX, RGB e HSL para cada etapa.
Primeiro, escolha uma cor inicial e uma cor final usando os seletores de cores ou insira os valores HEX diretamente. Você também pode clicar em qualquer par predefinido (como Sunset ou Ocean) para carregar rapidamente as combinações mais usadas. Em seguida, use o controle deslizante Etapas para escolher quantas cores intermediárias você deseja (2 a 50). Por fim, alterne entre os modos de interpolação RGB e HSL para ver qual produz o melhor gradiente para suas cores.
A interpolação RGB faz a transição linear de cada canal de cores (vermelho, verde, azul) entre as duas cores, criando um caminho direto em linha reta através do cubo de cores RGB. A interpolação HSL converte as cores no espaço de cores HSL e interpola Matiz, Saturação e Luminosidade separadamente - com interpolação de matiz de caminho mais curto para evitar seguir o caminho errado na roda de cores.
O gerador de escala de cores suporta de 2 a 50 etapas. O número ideal depende do seu caso de uso - 5 a 10 etapas funcionam bem para tokens de cores do sistema de design, 8 a 15 etapas são ideais para escalas de visualização de dados e 20 a 50 etapas criam um gradiente muito fino adequado para mapas de calor ou rampas de cores contínuas.
Sim. Toda a geração da escala de cores acontece 100% do lado do cliente no seu navegador. Seus valores de cores nunca são enviados para nenhum servidor, nunca são armazenados e nunca são transmitidos para lugar nenhum. O gerador de escala de cores é totalmente privado e processa tudo localmente no seu dispositivo.
O gerador de escala de cores oferece múltiplas opções de exportação. Você pode copiar todos os valores HEX como uma lista separada por vírgula, copiar a string de gradiente CSS, copiar propriedades personalizadas CSS (variáveis CSS) ou copiar um snippet de configuração CSS do Tailwind. Cada etapa também pode ser clicada para ver seus valores HEX, RGB e HSL individuais.
Um gerador de matiz e sombra começa com uma cor e produz variações mais claras e mais escuras misturando com branco e preto, respectivamente. Um gerador de escala de cores interpola entre duas cores distintas, produzindo um gradiente que pode ir de uma tonalidade para uma tonalidade completamente diferente - por exemplo, do vermelho para o azul ou do verde para o roxo.
Sim. O gerador de escala de cores é 100% gratuito, sem necessidade de inscrição, sem recursos premium e sem limites de uso. Gere escalas de cores ilimitadas sem quaisquer restrições ou custos ocultos. Não há anúncios bloqueando a interface.