Gerador de paleta monocromática

Um gerador de paleta monocromática recebe uma cor hex CSS e uma contagem inteira de passos e devolve N amostras que compartilham o mesmo matiz e a mesma saturação enquanto a luminosidade avança em incrementos iguais do preto ao branco. Designers recorrem a esta harmonia clássica de um só matiz quando um azul-marinho de marca precisa permanecer azul-marinho das superfícies profundas aos fundos pálidos, sem desviar para um matiz vizinho como faria um esquema análogo. A ferramenta converte hex em HSL, mantém H e S fixos e posiciona a luminosidade em i vezes cem dividido por N menos um, de modo que cinco passos caem em zero, vinte e cinco, cinquenta, setenta e cinco e cem por cento.

Como uma paleta monocromática escala a luminosidade

Comece com uma cor hex CSS como #3366cc ou a forma curta #36c. O analisador recorta espaços, coloca os dígitos em minúsculas, expande códigos de três dígitos com a regra CSS de duplicação e converte cada par em inteiros de vermelho, verde e azul de zero a duzentos e cinquenta e cinco.

Esses canais mapeiam para matiz, saturação e luminosidade com as fórmulas habituais de CSS e W3C: a luminosidade é a média das frações máxima e mínima do canal, a saturação depende dessa luminosidade e o matiz é medido em graus ao redor da roda de cores, com cinzas acromáticos informando matiz zero. Um esquema monocromático não gira o matiz e não mistura em direção ao preto ou ao branco em RGB; varia apenas o percentual de luminosidade enquanto matiz e saturação permanecem exatamente nos valores da cor base.

Para o índice de passo i de zero até N menos um, a luminosidade é i vezes cem dividido por N menos um, de modo que a primeira amostra é sempre preto puro com luminosidade zero, a última é sempre branco puro com luminosidade cem, e as paradas intermediárias ficam igualmente espaçadas na luminosidade HSL. Depois de conhecida cada nova luminosidade, o mesmo caminho CSS de matiz para RGB converte HSL de volta a canais inteiros e um código hex de seis dígitos em minúsculas.

Cinco passos sobre um azul de luminosidade média produzem portanto preto, um marinho profundo, um tom médio próximo do original, um céu pálido e branco — todos ainda com o matiz e a saturação originais. Não há sementes aleatórias, carimbos de relógio nem chamadas de rede, de modo que as mesmas entradas sempre geram a mesma paleta ordenada. Formas hex com alfa de quatro ou oito dígitos são rejeitadas porque este contrato é apenas RGB opaco.

Passos não inteiros ou valores fora de dois a vinte e um falham a validação para que os clientes não ultrapassem em silêncio o intervalo permitido.

O que você envia e o que recebe de volta

Envie dois campos: color como cadeia hex e steps como inteiro entre dois e vinte e um inclusive. Cada amostra da paleta inclui index, hex, inteiros r g b, números de matiz saturação luminosidade e cadeias imprimíveis rgb e hsl. A cor original é sempre devolvida como base para que os clientes possam exibir a semente ao lado da rampa; essa semente aparece dentro de swatches somente quando a luminosidade cai exatamente em uma parada par, por exemplo luminosidade cinquenta com cinco passos.

Verificações típicas incluem cinco passos em #3366cc, três passos no vermelho curto #f00 e confirmar que uma cadeia não hex falha a validação. Conecte o formulário gratuito do navegador para revisões de design e rampas rápidas e chame o contrato idêntico a partir de scripts quando precisar de geração em massa de escalas de tokens. Mantenha steps no intervalo documentado em vez de confiar em recortes silenciosos — esta ferramenta falha de forma explícita para que sistemas de design permaneçam previsíveis.

Onde paletas monocromáticas aparecem no trabalho real

Designers de produto constroem rampas de IU de um só matiz para que um primário de marca cubra texto, superfícies, chips e estados desabilitados sem introduzir um segundo matiz que lute contra a identidade. Revisores de acessibilidade exploram companheiros de uma cor de texto ou ícone ao longo de uma escada de luminosidade e entregam candidatos a um verificador de contraste em vez de adivinhar meios-tons a olho.

Equipes de marketing produzem pastéis de campanha e acentos profundos a partir de um logotipo saturado para banners sociais e cabeçalhos de e-mail, preservando a identidade de matiz da marca. Engenheiros de frontend programam rampas monocromáticas em integração contínua para que uma única cor de marca renda uma escada documentada para gráficos, selos e botões secundários.

Autores de currículo que ensinam harmonia de cores podem mostrar que um esquema monocromático é o membro de um só matiz da família clássica que também inclui rotações complementar, análoga, tríade e tétrade — esses outros destinos giram o matiz, enquanto esta página só percorre a luminosidade. Se mais tarde você precisar de um oposto complementar, um par de vizinhos análogos, uma tríade de cento e vinte graus ou um único passo de clareamento, trate-os como intenções de busca e destinos separados em vez de sobrecarregar esta página monocromática.

Cores CSS nomeadas como tomato ficam fora do escopo; resolva-as primeiro para hex.