Como montar uma paleta de tons de bege que funciona na prática
A paleta tons de bege é mais complicada do que parece. Não porque bege seja difícil, mas porque todo mundo escolhe o mesmo bege e depois se pergunta por que o projeto parece sem graça. Já vi dezenas de designers cometerem o mesmo erro: usar bege como cor de fundo genérica, sem entender que bege puro raramente funciona em interface. O segredo não é pegar o primeiro tom marrom-claro que aparece no color picker. É entender o que faz aquele bege funcionar ou falhar no contexto dele. Eu montei a minha paleta de referência há alguns anos, depois de refazer o sistema visual de um dashboard corporativo que tinha ficado completamente ilegível. O problema não era a cor em si. Era que o bege escolhido tinha um subtom azulado que colidia com os elementos de alerta e com o branco puro do conteúdo. A solução foi simples, mas demorei pra perceber: usar bege com subtom quente e adicionar uma camada intermediária de cinza muito claro para criar profundidade. Sem isso, tudo parecia plano.
Como escolher a paleta tons de bege certa
Primeiro, pare de confiar no olho nu em telas diferentes. A cor que parece neutra no seu monitor pode ter um tom completamente diferente num celular ou numa projeção. Pegue o Bege Clássico #F5F0E8, que é um dos mais usados, e testei ele em três displays diferentes antes de aprová-lo. O resultado foi que um deles mostrava um leve rosa no fundo. Não é algo que você perceba assistindo a tela, mas quando você passa a imagem para impressão ou para outra tela, bate um problema. Depois disso, você precisa de pelo menos quatro variações do mesmo bege, não três. Eu geralmente começo com:
- Bege Ultra-claro: algo em torno de #FAF7F2. Serve como fundo geral, quase branco mas com personalidade. - Bege Médio: cerca de #EDE6D8. Esse é o seu principal, o tom que aparece em cards e seções.
👉 Clique no botão abaixo para saber mais sobre o assunto!
- Bege Escuro: algo como #D4C9B5. Usado para bordas sutis, divisórias e hover states. - Bege Terroso: por volta de #BFAE96. Aqui é onde a paleta tons de bege ganha carácter. Usa-se em destaques, ícones e elementos que precisam de peso visual sem sair da harmonia.
Tem um ponto que quase ninguém leva em conta: o bege reage diferente dependendo do que está ao redor. Se você colocar um bege médio sobre branco puro, ele parece amarelado. Se colocar sobre cinza quente, ele parece neutro. Por isso eu sempre monto o contexto antes de validar a cor. Coloco os tons lado a lado com branco, cinza e preto em proporções reais do layout. Assim evita aquela surpresa desagradável no meio do desenvolvimento. Outro detalhe importante é a saturação. Tons de bege funcionam melhor quando a saturação fica entre 5% e 15%. Acima disso, você já está entrando no território do camelo ou areia, o que quebra a elegância que a paleta tons de bege propõe. Abaixo de 5%, ela perde identidade e vira um cinza com preguiça. Na prática, fica difícil justificar o uso de bege se a diferença entre ele e um cinza for mínima.
Uma coisa que aprendi na marra: não use bege para texto. Já vi muita gente usando bege escuro em cima de bege médio para criar contraste, e o resultado é texto que ninguém lê direito. Use cinza escuro ou preto suave (#2E2A26 ou similar) sobre qualquer variação de bege. O contraste é maior e a legibilidade não sofre. Se você precisa de uma paleta pronta pra testar, recomendo começar com os códigos que listei acima e ajustar conforme a luz do seu ambiente. Monitor usado em escritório com luz quente pede um bege mais frio. Tela usada em casa com luz natural pede um bege mais quente. Não existe valor hex universa
