Gere uma paleta de cores triádica a partir de uma cor hexadecimal
Digite #336699 e receba suas duas companheiras triádicas, #993366 e #669933, giradas 120 e 240 graus no círculo cromático. Saturação e luminosidade não mudam, então as três cores parecem da mesma família. Grátis no seu navegador.
- Grátis
- Funciona no seu navegador
- Sem cadastro
- Seus dados não saem do seu aparelho
Executar grátis
Exemplo resolvido
- Cor
- #336699
- Cor base
- #336699
- Cores triádicas
- #993366, #669933
- Paleta
- #336699, #993366, #669933
- Deslocamentos de matiz
- 120, 240
Este gerador de paleta triádica recebe uma cor hexadecimal e encontra os dois matizes posicionados exatamente a 120 e 240 graus dela no círculo cromático. A saturação e a luminosidade da cor-base são preservadas, criando uma família equilibrada de três cores sem escolhas aleatórias nem cálculos manuais. Informe um valor hexadecimal padrão com três ou seis dígitos, com ou sem cerquilha inicial. O resultado inclui a base normalizada, as duas cores geradas, a paleta completa e os deslocamentos de matiz. Formatos inválidos retornam um erro de entrada claro, o que torna a ferramenta adequada tanto para trabalhos interativos de design quanto para pipelines automatizados.
Como a paleta triádica é gerada
Uma paleta triádica contém três matizes distribuídos igualmente em um modelo circular de cores. Imagine os vértices de um triângulo equilátero sobre o círculo cromático: cada avanço cobre 120 graus. O gerador primeiro valida e normaliza a cor hexadecimal informada.
A notação de três caracteres é expandida para seis, portanto #369 vira #336699, e as letras são padronizadas em minúsculas. Em seguida, os canais vermelho, verde e azul são convertidos em matiz, saturação e luminosidade. Somente o matiz gira: uma cor recebe 120 graus e a outra, 240, com retorno correto ao ultrapassar 360.
Saturação e luminosidade permanecem inalteradas, preservando a intensidade e o brilho gerais. Por fim, as duas cores HSL voltam à notação hexadecimal de seis dígitos. A resposta mantém as duas cores calculadas separadas da paleta completa.
Não há aleatoriedade, rede, data atual nem estado armazenado; entradas idênticas sempre produzem saídas idênticas.
Como escolher e aplicar as cores geradas
Comece com uma cor-base que já tenha uma função definida, como a cor principal da marca, o ponto de partida de uma ilustração ou um destaque da interface. Embora as três cores sejam matematicamente equilibradas, elas não precisam ocupar áreas visuais iguais. Uma composição prática costuma deixar a base dominar, usar uma companheira em elementos de apoio e reservar a terceira para pequenos destaques.
Verifique separadamente o contraste do texto, pois harmonia de matiz não garante legibilidade. Como todas mantêm a mesma luminosidade HSL, o brilho percebido pode variar bastante, sobretudo entre amarelos e azuis. Assim, trate a tríade como ponto de partida e crie variações mais claras ou escuras para estados e superfícies.
Se a entrada for cinza, as companheiras também serão cinza, porque uma cor com saturação zero não possui matiz visível para girar.
Formatos aceitos, erros e automação
São aceitos exatamente três ou seis dígitos hexadecimais com cerquilha inicial opcional, como #f06, f06, #ff0066 ou FF0066. Espaços externos são removidos antes da validação. Nomes CSS, funções RGB e HSL, hexadecimais com alfa, prefixos 0x, strings vazias, números e caracteres não hexadecimais são rejeitados.
Essas regras rígidas evitam interpretações ambíguas. Após a geração, avalie contraste, significado cultural e hierarquia da marca conforme o sistema visual definitivo.
Casos de uso
Criar acentos para uma marca
Transforme uma cor hexadecimal já estabelecida em dois acentos equilibrados para campanhas, ilustrações e elementos de identidade.
Montar tokens de cor de interface
Gere candidatos determinísticos para tokens secundários e terciários a partir da cor principal durante a criação de temas.
Preparar cores para séries de gráficos
Crie uma paleta inicial de três matizes para painéis e depois valide o contraste e a acessibilidade da visualização.
Perguntas frequentes
O que é uma paleta de cores triádica?
É um conjunto de três matizes separados por 120 graus no círculo cromático, formando uma relação distribuída de maneira uniforme.
Quais formatos de cor são aceitos?
Use notação hexadecimal de três ou seis dígitos, com ou sem cerquilha inicial, como #369 ou 336699.
Por que entradas cinza produzem companheiras cinza?
O cinza tem saturação zero; portanto, girar seu matiz matemático não cria uma diferença de cor visível.
Posso digitar o nome de uma cor, como vermelho, em vez do código?
Não. Só são aceitos códigos hexadecimais de três ou seis dígitos, com ou sem cerquilha, como #f06 ou #ff0066. Nomes de cores, notações RGB ou HSL e códigos com transparência são recusados com um aviso claro.
Por que a paleta começa com a minha própria cor?
A cor base vem primeiro, normalizada, seguida das duas companheiras a 120 e 240 graus. Para #336699 a paleta completa é #336699, #993366 e #669933, e sua cor atual fica intacta.
Ferramentas relacionadas
Para desenvolvedores — acesso via API
Tudo nesta página está disponível via API. Esta seção é para equipes que querem integrar a ferramenta aos próprios sistemas; quem não precisa disso pode simplesmente usar a ferramenta acima.
Endpoint
Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.
Chame do seu código
curl -X POST https://api.kit.forhosting.com/color/triadic-palette \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#336699"}'const res = await fetch("https://api.kit.forhosting.com/color/triadic-palette", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#336699"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/triadic-palette",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#336699"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/triadic-palette", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#336699"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#336699"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/triadic-palette", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemplo de requisição
{
"color": "#336699"
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.triadic_palette",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}A API é assíncrona: cada chamada devolve um task_id na hora. Se preferir polling, consulte o status a até 1 requisição por segundo.
Preço
Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.
Erros
| HTTP | Código | O que significa |
|---|---|---|
401 | unauthorized | Token ausente ou inválido. Confira o header Authorization. |
402 | insufficient_balance | Saldo insuficiente para esta tarefa. Faça uma recarga e tente de novo. |
404 | unknown_type | Esse tipo de tarefa não existe. Confira o campo type no catálogo. |
429 | rate_limited | Muitas requisições em pouco tempo. Espere um instante e tente de novo. |
Notas técnicas
Como escolher e aplicar as cores geradas
Desenvolvedores podem copiar palette diretamente ou consultar triadic_colors quando o token-base não deve mudar.
Formatos aceitos, erros e automação
Forneça a base no campo color como uma string JSON. Uma resposta bem-sucedida retorna base_color, triadic_colors, palette e hue_offsets. A base é expandida e normalizada; triadic_colors contém exatamente as duas cores geradas; palette lista a base e depois as rotações de 120 e 240 graus. Valores inválidos recebem o código invalid_input, sem uma paleta inventada. O navegador facilita a exploração, enquanto cada item bem-sucedido pela API custa US$ 0,002 e usa o mesmo algoritmo determinístico.
Perguntas técnicas
O resultado inclui a cor-base?
Sim. palette contém a base normalizada e as duas companheiras; triadic_colors contém apenas as duas cores geradas.
Quanto custa uma chamada à API?
Cada item processado com sucesso custa US$ 0,002. A versão no navegador executa localmente o mesmo cálculo determinístico.