Gerador de esquema de cores tetrádico

Este gerador de esquema de cores tetrádico constrói uma paleta retangular de quatro cores, a partir de um único código hex CSS. Você informa uma cor base, como #e74c3c, ou a forma curta #f00; o mecanismo a converte para HSL, mantém a saturação e a luminosidade fixas, e gira o matiz em quatro passos determinísticos, a zero, sessenta, cento e oitenta, e duzentos e quarenta graus. Esses deslocamentos colocam dois pares complementares na roda de cores, para que as quatro amostras formem um retângulo tetrádico clássico, não um painel de humor aleatório. Toda resposta bem-sucedida devolve o hex de entrada normalizado, quatro amostras detalhadas, com hex, RGB e HSL, mais arrays planos de hexes e matizes, para tokens de design e variáveis CSS.

O que é um esquema tetrádico (retangular) e o que a resposta contém

Um esquema de cores tetrádico, também chamado de harmonia retangular, usa quatro matizes organizados como dois pares complementares na roda de cores. Partindo do seu matiz base h, este gerador coloca cores em h mais zero graus, h mais sessenta graus, h mais cento e oitenta graus, e h mais duzentos e quarenta graus, e então reconstrói cada cor com a saturação e a luminosidade originais. Essa separação de sessenta graus entre os pares cria um retângulo, em vez de um quadrado (que usaria passos de noventa graus).

Pares complementares ficam opostos entre si, então a paleta equilibra pressão quente e fria, mantendo-se ligada à cor de marca que você digitou.

Como a entrada hex é lida e como os quatro matizes permanecem reproduzíveis

O campo preferencial é hex, mas os apelidos color, base e input também são aceitos, para que formulários, query strings, e exportações de ferramentas de design possam reaproveitar o mesmo contrato, sem renomear colunas. Os valores podem incluir ou omitir a cerquilha inicial, e podem usar a forma curta de três dígitos, como f00, que se expande dígito por dígito para ff0000, antes de qualquer conversão.

Os dígitos não diferenciam maiúsculas de minúsculas, e sempre são normalizados para a saída minúscula de seis dígitos, para que goldens e variáveis CSS permaneçam estáveis entre execuções. Depois da análise, os canais se convertem em HSL, com fórmulas sRGB padrão; o matiz é tomado em graus, no círculo de zero a trezentos e sessenta, enquanto saturação e luminosidade permanecem frações unitárias, que nunca mudam ao longo dos quatro passos.

Cada deslocamento é aplicado com módulo positivo, para que valores intermediários negativos não vazem, e então o HSL se converte de volta para RGB inteiro, com limitação de canal e dois dígitos hex minúsculos por canal.

Onde as paletas tetrádicas se encaixam em trabalho de produto, marca e UI

Designers recorrem a esquemas tetrádicos quando uma marca precisa de mais do que um único destaque, mas ainda precisa permanecer harmoniosa: sites de marketing, gráficos de múltiplas séries, cores de status de painel, e sistemas de ilustração frequentemente precisam de quatro matizes relacionados que ainda pareçam intencionais. Equipes de produto usam o layout retangular para derivar cores de hover, foco, gráfico, e chamada para ação, a partir de um único hex corporativo, sem inventar códigos hex ad-hoc em uma planilha.

Educadores e estudantes de design o usam para demonstrar pares complementares e geometria de matiz, sem aplicativos de desktop opacos, que trocam algoritmos entre versões. Combine-a com verificadores de contraste, quando a acessibilidade for o próximo passo, e com conversores de RGB ou HSL, quando precisar de formatos intermediários, para outras ferramentas na sua pilha.