Gerador de cores monocromáticas
Gere uma paleta monocromática a partir de uma cor base com este Gerador de cores monocromáticas. Insira um código hexadecimal de 3 ou 6 dígitos e a ferramenta mantém o matiz e a saturação enquanto altera a luminosidade em 30 e 15 pontos em cada direção, entre 10 e 90 por cento, retornando cinco tons e variações claras em códigos hexadecimais, com a cor base no meio. Ideal para designers e desenvolvedores que criam escalas de cores e temas UI calmos e consistentes.
Perguntas frequentes
O que o Gerador de cores monocromáticas retorna?
Ele retorna cinco cores como códigos hexadecimais minúsculos de seis dígitos. A cor 3 é a cor base; as cores 1 e 2 são versões mais escuras, e as cores 4 e 5 são versões mais claras do mesmo matiz.
Como os tons são calculados?
A ferramenta converte seu código hexadecimal para HSL e altera apenas a luminosidade: menos 30, menos 15, mais 15 e mais 30 pontos percentuais. O matiz e a saturação permanecem iguais, então as cinco cores pertencem à mesma família de cores.
Há um limite mínimo ou máximo para a luminosidade?
Sim. Os passos mais escuros nunca ficam abaixo de 10 por cento de luminosidade, e os mais claros nunca ultrapassam 90 por cento, então a escala evita o preto puro e o branco puro.
Por que recebo cores duplicadas ou inesperadas para bases muito escuras ou muito claras?
Devido aos limites de 10 e 90 por cento, os passos próximos às extremidades se igualam ao mesmo valor. Para #000000, os dois passos mais escuros tornam-se #1a1a1a, que é mais claro que a cor base; e, para #ffffff, os dois passos mais claros são #e6e6e6.
Que paleta o vermelho puro produz?
Para #ff0000, a ferramenta retorna #660000, #b30000, #ff0000, #ff4d4d e #ff9999. O vermelho está em 50 por cento de luminosidade, então recebe toda a faixa de dois passos mais escuros e dois mais claros.
Quais formatos de cor posso inserir?
Insira um código hexadecimal de 3 ou 6 dígitos, com ou sem #, como #3366cc ou 36c. As notações RGB e HSL e os nomes de cores não são aceitos, então converta-os para hexadecimal primeiro.
Por que minha cor-base retorna um pouco diferente?
O matiz, a saturação e a luminosidade são arredondados para números inteiros, então converter para HSL e voltar pode alterar um canal em uma unidade. #ff5733, por exemplo, aparece como #ff5833 no meio da escala.
Funciona para tons de cinza?
Sim. Ao contrário dos esquemas baseados em matiz, uma escala monocromática altera a luminosidade, então um cinza produz tons de cinza mais claros e mais escuros. O preto e o branco são limitados pela faixa de 10 a 90 por cento descrita acima.
Como uso uma paleta monocromática em uma interface?
Use as cores mais escuras para texto e bordas, a cor base para ações principais e as mais claras para fundos e estados ao passar o cursor. Verifique o contraste do texto com um verificador de contraste WCAG, pois os passos vizinhos diferem apenas 15 pontos de luminosidade.
O resultado é igual ao do Gerador de paletas de cores?
Sim. Esta ferramenta executa exatamente a opção Monochromatic do Color Palette Generator, então ambas retornam os mesmos cinco códigos hexadecimais para a mesma cor base.