Como escolher uma cor de destaque que não seja o azul do Tailwind (2026)

Abra a documentação do Tailwind, role até o blue-500 e você está olhando para o #3b82f6. Esse código hex é a cor de destaque mais entregue na web neste momento. É a cor de link padrão em mil botões do shadcn, o focus ring de todo formulário gerado no v0, a âncora do gradiente em metade dos templates do Framer publicados este ano. Quando a ação principal de um site é bg-blue-600 hover:bg-blue-700, você já sabe como ele foi construído antes de ler uma única palavra do texto.

Escolher uma cor de destaque diferente é o movimento mais barato que existe para fazer um site parar de soar como saída de máquina. Não custa nada — uma variável CSS — e sobrevive a todos os outros atalhos que você toma. Este é o guia prático: onde tirar uma cor, como controlá-la, como garantir que ela passe no contraste, e oito cores de destaque específicas com os setores em que elas realmente se encaixam.

Por que o #3b82f6 grita "isso foi feito por IA"

O azul não é o problema. O azul é a cor de marca mais usada do planeta por um bom motivo: confiável, legível, seguro. O problema é *esse azul específico*, aplicado com *zero desvio*, ao lado do seu primo violet-500 (#8b5cf6) num gradiente de 135 graus. Já escrevi sobre o gradiente azul-roxo como assinatura de IA — o accent padrão é a mesma doença, só que em forma de cor única.

O indício é esse. Um designer de verdade escolhe um accent e depois o *ajusta*: empurra a matiz dois graus para o quente, baixa a saturação para ela não vibrar contra o fundo, monta uma rampa de tons sob medida. Uma ferramenta de IA agarra o token nomeado porque é exatamente do token nomeado que os dados de treinamento dela estão saturados. blue-600 é uma decisão que ninguém tomou. E é justamente isso que o olho capta: a ausência de uma decisão. É a mesma monocultura que você vê quando toda instalação do shadcn entrega os mesmos defaults do registry: a configuração de fábrica da ferramenta vira a cara da indústria inteira.

Dá para verificar isso em qualquer site em trinta segundos. Abra o DevTools, inspecione o botão principal e, se o background-color computado for rgb(37, 99, 235), você está olhando para um blue-600 intocado. Se for rgb(59, 130, 246), é o blue-500. O método de auditoria de CSS trata esses valores exatos como impressões digitais, porque é o que eles são.

Passo 1: derive a cor de algo real

Não abra um seletor de cores para "achar um azul bonitinho". Derive o accent de um fato sobre o projeto. Essa é a diferença entre uma cor que significa alguma coisa e uma cor que é só *não-o-padrão*.

Três fontes confiáveis:

O domínio ou o nome do produto. terre aponta para tons de terra. forge aponta para o laranja de metal quente. marine, slate, harbor te dão o óbvio. Uma fintech chamada Cobalt não devia ser o azul do Tailwind — devia ser cobalto de verdade, que é mais esverdeado e mais profundo (oklch(0.45 0.13 250)). O nome é um briefing; leia ele.

O produto físico ou o material. Vendendo máquinas de espresso? Tire o accent do marrom do grão torrado e do dourado do crema, não de uma paleta SaaS genérica. O accent de um ateliê de cerâmica está no esmalte. O de uma marca de escalada está no branco do magnésio e no cinza do granito. Fotografe a coisa de verdade, pegue a cor com o conta-gotas e depois limpe o resultado em OKLCH.

**O conjunto de concorrentes — para fugir *dele*.** Se todo concorrente do seu setor é azul (e em fintech, dev tools e SaaS B2B eles são), esse é o argumento mais forte possível para não ser azul. A Stripe é dona do índigo (o primário deles é #635bff). A Linear é dona de um quase-preto frio contra um accent azul-arroxeado discreto (#5e6ad2). Ir de azul em dev tools significa disputar um território que três gigantes já ocupam. Pegue a brecha que eles deixaram.

Escreva o raciocínio numa frase só: "O accent é siena queimada porque o produto é artigo de couro feito à mão e a hero fotografa como marrom quente." Se você não consegue escrever essa frase, é porque ainda não escolheu uma cor — escolheu um código hex.

Passo 2: trabalhe em OKLCH, não em hex

A maioria das pessoas pula esse passo, e é justamente ele que separa uma paleta amadora e sem graça de uma que se sustenta de pé. Pare de raciocinar sobre cor em hex ou HSL. Use OKLCH.

OKLCH é oklch(lightness chroma hue):

• Lightness de 0 a 1 — perceptual, então 0.5 realmente parece metade do brilho. (A lightness do HSL mente: amarelo HSL e azul HSL na mesma "lightness" têm brilhos completamente diferentes.)
• Chroma de 0 a ~0.37 — o quanto a cor é colorida. 0 é cinza, 0.15 é vívido.
• Hue de 0 a 360 — o ângulo, exatamente como você esperaria.

O suporte nos navegadores é universal desde 2023. Você escreve direto no CSS:

:root {
  --accent: oklch(0.62 0.19 35);        /* a burnt orange */
  --accent-hover: oklch(0.56 0.19 35);  /* same hue/chroma, darker */
  --accent-subtle: oklch(0.95 0.04 35); /* same hue, washed out for backgrounds */
}

Por que isso importa na prática: para montar uma rampa de tons, você segura a matiz e a chroma mais ou menos fixas e caminha pela lightness. Tenta fazer isso em hex e você ganha um lixo enlameado que muda de matiz no caminho — arrasta o slider hex para escurecer e seu laranja vira marrom, seu azul vira roxo. Em OKLCH a rampa continua *a mesma cor*, só mais clara e mais escura. Seu estado de hover é L - 0.06. Seu estado disabled é a mesma matiz em chroma 0.04. Seu fundo levemente tingido é L 0.96, chroma 0.03. Uma decisão, um sistema inteiro.

O segundo motivo: o OKLCH torna trivial montar uma paleta em que toda cor é *igualmente* saturada e *igualmente* brilhante. Quer uma paleta categórica de seis cores para um gráfico em que nenhuma cor grita mais alto que as outras? Trave L 0.65 C 0.15, gire a matiz em passos de 60 graus — 35, 95, 155, 215, 275, 335 — e você ganha seis cores de peso uniforme. Isso é uma coisa que você não consegue fazer no olho num seletor hex.

Passo 3: oito cores de destaque que não são azuis, e onde elas encaixam

Cada uma destas é um ponto de partida real, com o setor e o raciocínio. Ajuste a lightness para o seu fundo. Estes são os valores *âncora* — o equivalente ao 500.

1. Siena queimada / terracota — `oklch(0.62 0.15 40)` (~`#c2613a`)

Quente e terrosa, o sinal de algo feito à mão. Encaixa em qualquer coisa física: cerâmica, couro, móveis, café especial, skincare natural — o sinal exatamente oposto ao do azul SaaS frio. Combina com um off-white quente (oklch(0.97 0.01 80)), não com branco puro. Evite em medicina ou fintech, onde pode ser lida como "alerta".

2. Verde floresta / pinho — `oklch(0.48 0.10 155)` (~`#2f6b4f`)

Profundo e calmo, crível sem virar corporativão. Encaixa em sustentabilidade, equipamento outdoor, finanças que querem sinalizar "estável" em vez de "disruptivo", e qualquer coisa do universo wellness que já enjoou do bege-de-spa. Repare na *chroma baixa* — mantenha o verde dessaturado ou ele vira "logo de reciclagem". Esse é o não-azul mais seguro para um produto B2B que ainda precisa parecer sério.

3. Sangue de boi / vermelho profundo — `oklch(0.45 0.15 25)` (~`#9b3a35`)

Editorial e com cara de caro. Encaixa em escritórios de advocacia, publicações premium, whisky e vinho, consultoria de alto padrão. É vermelho sem o alarme — a lightness mais baixa o afasta do "estado de erro". Use com parcimônia, como um accent de verdade (um botão, os links, um filete embaixo do logo); uma parede inteira dessa cor fica agressiva. Genial para sites que querem gravidade.

4. Mostarda / ocre — `oklch(0.75 0.14 85)` (~`#d4a017`)

Distinto e levemente retrô. Encaixa em agências criativas, comida, editorial, qualquer coisa com personalidade que queira parecer escolhida a dedo. É difícil acertar o contraste — accents amarelados falham contra o branco (veja o passo 4) — então em geral ele pede texto escuro sobre o accent, e o accent usado sobre superfícies escuras. Recompensa alta, exige cuidado.

5. Teal / ciano profundo — `oklch(0.58 0.10 200)` (~`#2a8c9c`)

A saída de emergência para quem realmente precisa de uma cor fria, com cara de tech, mas quer sair do azul. Encaixa em health tech, produtos de dados, fintech que quer ser acessível. *Atenção*: o teal está virando rápido o novo default seguro — é para onde as pessoas correm quando percebem que o azul está saturado, o que significa que em dois anos ele vai ser a coisa da qual você tenta fugir. Use, mas empurre a matiz na direção do verde (190-200) para se distinguir do token cyan-500 (oklch(0.71 0.13 215), #06b6d4).

6. Ameixa / berinjela — `oklch(0.42 0.11 330)` (~`#7a3d6b`)

Rico e inesperado. Encaixa em beleza, DTC premium, ferramentas criativas, qualquer coisa voltada a um público sofisticado. Esse *não* é o roxo violet-500 do gradiente de IA — é mais escuro, mais avermelhado e muito mais baixo em chroma, e é justamente isso que o tira do radar do slop. O roxo-de-gradiente fica em oklch(0.6 0.23 295); este vive a 35 graus de distância e com mais ou menos metade da saturação.

7. Cinza-azulado / slate — `oklch(0.50 0.04 250)` (~`#5a6478`)

Para quando o briefing realmente pede contenção: enterprise, infraestrutura, segurança, dev tools que querem parecer a Linear e não uma startup pré-seed. O truque é a *chroma quase zero* (0.04). Tecnicamente está na família do azul, mas tão dessaturado que lê como um neutro pensado, não como um default. É assim que se faz "profissional e frio" sem blue-600.

8. Coral / salmão — `oklch(0.70 0.14 25)` (~`#e8745f`)

Amigável e cheio de energia sem forçar a barra. Encaixa em apps de consumo, produtos de comunidade, educação, qualquer coisa que queira calor e proximidade. É a resposta quente para o "precisamos de um accent convidativo" que todo mundo resolve com azul ou com aquele roxo estilo Stripe. Combina lindamente com um texto azul-marinho profundo para garantir contraste.

Passo 4: o teste de contraste não é negociável

Um accent fora do padrão que ninguém consegue ler é pior do que azul. Rode dois testes antes de publicar.

Texto sobre o accent. Seu botão principal é texto branco (ou escuro) sobre o preenchimento do accent. Ele precisa do WCAG AA: 4.5:1 para texto normal, 3:1 para texto grande. O assassino aqui são os accents claros — mostarda e coral com lightness alta vão *falhar* com texto branco. Duas correções: baixe a lightness do accent até o branco passar, ou use texto escuro sobre o accent. A mostarda quase sempre pede texto escuro:

.btn-primary {
  background: var(--accent);     /* oklch(0.75 0.14 85) mustard */
  color: oklch(0.20 0.02 85);    /* near-black, warm-tinted — passes AA */
}

Accent como texto/links sobre o fundo da página. Links e texto pequeno em accent sobre branco precisam de 4.5:1. É aqui que o seu accent claro costuma falhar e você precisa de uma variante *mais escura* da mesma matiz só para o texto:

:root {
  --accent: oklch(0.70 0.14 25);       /* coral — for fills */
  --accent-text: oklch(0.52 0.16 25);  /* darker coral — for links on white, passes AA */
}

Ferramentas: cole o seu OKLCH ou hex no contrast checker do WebAIM, ou use a lente de contraste do seletor do oklch.com (ela mostra a razão ao vivo enquanto você arrasta a lightness). Não confie no olho. Coral em oklch(0.70 0.14 25) sobre branco fica por volta de 2.9:1 — parece ok e reprova no AA. "Tá ok no meu monitor" é exatamente como você publica um link invisível para um terço dos seus visitantes.

Mais uma, frequentemente esquecida: confira o accent contra a sua superfície de *dark mode* também. Uma cor calibrada para o branco com frequência morre sobre oklch(0.20 0 0). Você normalmente precisa de uma variante mais clara e um pouco menos saturada para fundos escuros — mesma matiz, L + 0.1, chroma - 0.03.

Passo 5: amarre tudo numa variável só e assuma

A graça toda é que isso é barato. Defina o accent e suas derivações uma vez, referencie a variável em todo lugar e nunca mais digite um hex cru dentro de um componente:

:root {
  --accent:        oklch(0.62 0.15 40);
  --accent-hover:  oklch(0.56 0.15 40);
  --accent-text:   oklch(0.50 0.16 40);
  --accent-subtle: oklch(0.96 0.03 40);
}

No Tailwind, registre a cor para você parar de buscar o blue-600 por reflexo:

// tailwind.config — or @theme in v4
colors: {
  accent: {
    DEFAULT: 'oklch(0.62 0.15 40)',
    hover:   'oklch(0.56 0.15 40)',
    subtle:  'oklch(0.96 0.03 40)',
  },
}

Agora bg-accent hover:bg-accent-hover é tão fácil de digitar quanto o default do slop, e na próxima vez que o Cursor ou o Copilot autocompletarem bg-blue-600 você vai perceber e sobrescrever. Esse reflexo — pegar o default antes de ele cair — é a maior parte da batalha. Se você faz isso em trabalho de cliente, deixe embutido no seu starter para que a *baseline* já seja fora do padrão; o playbook de agência sobre sites feitos com IA que não parecem feitos com IA trata a variável de accent como uma entrega por cliente, não como algo de última hora.

A versão de trinta segundos

Se você não guardar mais nada: derive o accent de um fato real sobre o projeto, monte ele em OKLCH para a rampa de tons se sustentar, confira o contraste tanto para texto-sobre-accent quanto para accent-sobre-fundo, e amarre tudo numa única variável. Os oito pontos de partida estão acima — siena queimada para o feito à mão, verde floresta para o sério-mas-não-corporativão, sangue de boi para gravidade, slate para contenção.

A régua é constrangedoramente baixa. A web está tão saturada de #3b82f6 que *qualquer* accent escolhido de propósito — definido por um motivo, calibrado para contraste, aplicado com consistência — instantaneamente lê como "uma pessoa tomou decisões aqui". É esse o jogo inteiro. O azul não está errado. O blue-600 intocado é só o anúncio mais alto possível de que ninguém o escolheu.