Tratamento de cor

Duas cores

Duotone-inspired

Limita a direção visual a duas cores dominantes e suas relações de contraste.

DOIS TONSContraste
com intenção.Ver projeto ↗

Exemplo didático · Representação visual do padrão

Quando usar

Dar identidade a uma composição gráfica com uma paleta reduzida.

Cuidados e acessibilidade

Tenha cores funcionais suficientes para indicar estados sem confusão.

Como reconhecer

Duas cores dominantes, contraste planejado e equilíbrio entre grandes áreas.

Não confunda

O duotone de imagens é uma técnica específica; uma interface com duas cores é uma adaptação.

Exemplo de código

:root {
  --base: #182c49;
  --acento: #f7b06c;
}

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

Crie uma interface no estilo Duas cores (Duotone-inspired) em português do Brasil. Limita a direção visual a duas cores dominantes e suas relações de contraste. Contexto de uso: Dar identidade a uma composição gráfica com uma paleta reduzida. Estrutura: Duas cores dominantes, contraste planejado e equilíbrio entre grandes áreas. Características visuais: two-color palette. Requisito: Tenha cores funcionais suficientes para indicar estados sem confusão. Considere também: O duotone de imagens é uma técnica específica; uma interface com duas cores é uma adaptação. Adapte cores e tipografia ao projeto. Cubra estados inicial, foco, ativo, indisponível, carregamento, vazio e erro quando aplicáveis. Garanta contraste legível, comportamento responsivo, movimento reduzido e acesso por teclado. Use textos em PT-BR, valores em reais e datas no formato brasileiro quando houver. Explique quais partes exigem integração real e não simule sucesso sem concluir a operação.

Aprofundar a referência ↗Copiar link deste termo ↗