Gerador de esquema de cores

Como usar

1. Um esquema e uma escala de luminosidade já estão na tela quando a página abre, construídos a partir da base padrão #4F46E5 — o primeiro resultado não precisa de clique.
2. Faça dele a sua cor: cole #4F46E5, rgb(79, 70, 229), hsl(243, 75%, 59%) ou um nome de cor CSS em inglês, use o seletor do sistema ou pressione “Base aleatória”. Tudo é recalculado enquanto você digita.
3. Escolha como os matizes se relacionam. Análoga (0°, ±30°, ±60°) fica na vizinhança; Complementar (0°, 180°) é a oposição direta; Triádica (0°, 120°, 240°) e Tetrádica (0°, 90°, 180°, 270°) ampliam a distribuição; Complementar dividida (0°, 150°, 210°) mantém a tensão sem o choque. A escala é sempre a cor base com luminosidade 88 / 70 / 52 / 34 / 18%, então “a versão mais clara/escura do meu primário” está a um toque.
4. Toque em qualquer amostra para copiar seu valor no formato escolhido; “Copiar CSS” entrega o conjunto inteiro como propriedades personalizadas em :root, “Copiar valores” entrega um valor por linha.

Escopo, limites e dúvidas comuns

• Cinco regras, sem ângulos personalizados e sem círculo cromático: se precisar de um matiz exato, defina a cor base ou use o conversor de cores.
• A escala usa passos fixos de luminosidade (88 / 70 / 52 / 34 / 18%) em vez de “25% mais perto do branco/preto a partir da sua cor”. Isso torna a escada comparável entre cores base diferentes, mas uma base que já é muito clara ou muito escura terá passos que mal diferem dela.
• Uma cor base cinza, branca ou preta gera um esquema todo igual: rotação de matiz em uma cor totalmente dessaturada não muda nada. Essa é a aritmética honesta, não um bug.
• Apenas cores opacas: sem alfa, sem rgba(), sem HEX de 8 dígitos. Transparência pertence ao conversor de cores.
• Apenas valores de tela sRGB: sem CMYK, sem Lab, sem gerenciamento de cor — o mesmo HEX realmente parece diferente em monitores não calibrados, e esta ferramenta não finge o contrário.
• O contraste é usado apenas para decidir se o valor impresso em uma amostra é preto ou branco. Nenhuma taxa de contraste é reportada; para verificação de acessibilidade use o conversor de cores.
• A geometria garante as relações de matiz, não a estética: um par complementar em alta saturação ainda pode ser berrante. É o que a regra significa.
• “Base aleatória” sorteia de crypto.getRandomValues do seu navegador — criptograficamente forte, não um serviço de entropia física — e fica desativada quando o navegador não oferece essa fonte. Todo o resto continua funcionando.
• Nada é enviado, armazenado ou colocado na URL: recarregar volta para #4F46E5 + Análoga + HEX, e o botão de compartilhar compartilha apenas o link da página. Leve seu esquema com “Copiar CSS”.
• Nomes de cor CSS em inglês são aceitos como entrada porque é a sintaxe do CSS; não há saída de nomes de cor localizados — a mesma cor não tem nome padrão em português ou árabe para imprimir.
• O arredondamento é de exibição: canais são inteiros, então converter a mesma cor entre HEX e HSL pode deslocar um canal em 1.