32 esquemas de cores para sites com códigos hex, extraídos de designs de modelos da We.Inc, mais como criar uma paleta que converte: base tranquila com um único destaque reservado às ações, exemplos por setor e verificações de acessibilidade.
Nenhuma cor vence em todos os casos. A melhor cor de botão é aquela que contrasta com força com a sua página e não é usada em nenhum outro elemento, para que o olhar vá diretamente para ela.
Uma abordagem comum é usar uma base neutra (branco ou quase branco e texto escuro), uma cor principal da marca e um destaque para chamadas à ação, além de cores semânticas para mensagens de sucesso e erro. Mais cores costumam enfraquecer a hierarquia visual.
Existem associações com cores, mas elas variam conforme cultura, setor e contexto, e muitas afirmações populares são exageradas. O que afeta conversões de forma confiável é o contraste, a legibilidade e a clareza visual da ação desejada.
Compradores industriais valorizam clareza e confiança. Azul-marinho, carvão e cinza-aço com um único destaque forte, geralmente laranja de segurança, amarelo ou azul vivo, combinam com o setor. Use o destaque em fichas técnicas, botões para pedir orçamento e números de telefone para que sejam fáceis de encontrar.
Use uma ferramenta de contraste, como a da WebAIM. O nível AA da WCAG 2.2 exige contraste de pelo menos 4.5:1 para texto normal e 3:1 para texto grande e elementos importantes da interface, como bordas de botões e campos de formulário.
Não existe uma cor única que converta mais. Botões vermelhos, verdes e laranjas já “venceram” testes A/B individuais, quase sempre pelo mesmo motivo: o botão vencedor se destacava melhor naquela página. As paletas que convertem têm uma base tranquila e consistente e um único destaque de alto contraste, reservado às ações que você quer que as pessoas realizem.
Em vez de perguntar “qual cor?”, pergunte “meu botão mais importante parece diferente de tudo na página?”. Este guia mostra como criar uma paleta a partir dessa ideia.
Estas paletas foram extraídas dos designs de modelos próprios da We.Inc (as quatro cores mais usadas na prévia de cada design, excluindo os cinzas simples do quadro de prévia). São designs de modelos, não sites de clientes, e não fazemos nenhuma afirmação sobre como qualquer um deles converte. Copie um código hex no seletor de cores hex para visualizá-lo e obter valores RGB/HSL, e verifique qualquer par texto-fundo no verificador de contraste de cores antes de usar.
| Design de modelo da We.Inc | Estilo | Cores (hex) | Esquema |
|---|---|---|---|
| Atlas Builders | Construção e obras | #101d2c #0b1521 #f2a614 #d18f0a | Base azul-marinho profundo, cor de ação âmbar |
| Summit Trades | Obras | #0e2436 #e4671e #16222e #f6eeec | Azul-marinho com laranja de segurança |
| Ironpeak Roofing | Telhados | #e4671e #0e2436 #17415f #16222e | Laranja em destaque, estrutura azul-marinho |
| Ridgewater Plumbing | Encanamento | #b08544 #d8401f #f2ede3 #c9a063 | Bronze e vermelho em creme quente |
| Sunward Solar | Energia solar | #0b1f3a #f5a524 #d98a0b #fff6e6 | Azul meia-noite e ouro solar |
| Hookline Towing | Guincho | #0e0e0e #ffc400 #f4f1ea #161616 | Preto e amarelo de alta visibilidade |
| Redline Auto Group | Revendedora | #e3262e #0e0f11 #eeeeee #17191c | Vermelho de corrida em quase-preto |
| Maple Street Motors | Oficina mecânica | #1f4d3a #1b1b1b #f2b134 #e6efe9 | Verde-floresta com mostarda |
| Freshpile Carpet Cleaning | Limpeza | #ffd23f #0d1b52 #1d3fd8 #dbe2ff | Amarelo vivo em azul-marinho real |
| Tideline Pressure Washing | Limpeza externa | #0b1b2b #3fd0c9 #f3f6f5 #020617 | Azul-marinho escuro com água-marinha |
| Mowline Lawn Care | Jardins | #eef3e6 #c6f24e #0f1410 #1a2a17 | Base verde-claro, destaque limão |
| Fairway Lawn Co. | Paisagismo | #f6f1e7 #1d2b1f #e8c872 #2f5d3a | Creme, verde-escuro e dourado suave |
| Brightside Dental | Odontologia | #10312e #3f605c #0e5f57 #0a4841 | Tons de verde-azulado tranquilos |
| Meadowpaw Veterinary | Veterinária | #2f6e6a #e9f0ef #c9d7d4 #f7f9f8 | Verde-azulado suave em hortelã pálido |
| Vibrant Wellness | Clínica de bem-estar | #25382c #eef2e6 #7c9a7e #3f6b4a | Sálvia e floresta |
| Kinfolk Home Care | Cuidados domiciliares | #0f3d2e #f4c542 #fffdf6 #0a2e22 | Verde-pinheiro com amarelo quente |
| Lumora | Saúde | #c8a97e #182c41 #0b1220 #0e1a26 | Azul-marinho meia-noite com ouro areia |
| Sterling & Vance LLP | Escritório de advocacia | #8a93a2 #b08a4f #0b0e14 #f6eeec | Ardósia, bronze e tinta |
| Harborview Wealth Partners | Assessoria financeira | #102a43 #b08d57 #d9bf8f #faf8f4 | Azul-marinho e ouro em marfim |
| Harborline Insurance Agency | Seguradora | #0f2742 #5fd3c9 #17a398 #0b1e33 | Azul-marinho com verde-azulado |
| Larkfield Partners | Consultoria | #1f4d3f #f4f1ea #14181c #4a5560 | Verde-garrafa em papel |
| Keystone Realty | Imóveis | #f6eeec #7a2e2a #59606b #e9f0ef | Base rosada com bordô |
| Lucia Trattoria | Restaurante | #e9c9a8 #f7f1e6 #efe6d4 #23301f | Areia quente com preto-oliva |
| Ember & Roast | Café e restaurante | #ede6dc #c9642f #14100d #f6eeec | Aveia, laranja queimado e espresso |
| Kilnhouse Coffee | Cafeteria | #2b1d16 #c65d3b #f3ebe0 #fff8ef | Marrom torrado e terracota |
| Parcel No. 9 Wines | Vinícola | #3a0a15 #fbe9e3 #b8324b #f4a7a0 | Clarete com rosé |
| Petalry Florist | Floricultura | #3e1f2b #b4546c #fbf5f2 #f3e3dd | Ameixa e rosa antigo |
| Hollow Oak Farm Shop | Loja agrícola | #24301f #f6f1e4 #5e7f3a #e3a33b | Musgo, creme e mel |
| Suds & Scruff | Banho e tosa | #3b1740 #ffd84d #ff8fab #fff8e7 | Berinjela, amarelo e rosa |
| Datacore SaaS Hero | SaaS | #7b39fc #a484d7 #6a2ce0 #f87b52 | Violeta com coral |
| Mast Security | Segurança | #1e2628 #34e0a1 #e7ede9 #8d9a97 | Grafite com hortelã |
| Afterglow Sound | Eventos e música | #efeaff #f472b6 #ec4899 #8b5cf6 | Lavanda, rosa e roxo |
Um padrão que você vai notar em todos eles: a maioria combina uma base escura ou clara com um destaque saturado (âmbar, laranja, amarelo, limão ou coral). É a mesma estrutura de “base tranquila, uma cor de ação” descrita abaixo.
Artigos sobre psicologia das cores costumam afirmar que azul transmite confiança, vermelho cria urgência e verde significa crescimento. Há alguma verdade nessas associações gerais, mas elas dependem muito de cultura, setor e contexto. O vermelho pode ser um alerta em uma situação e uma celebração em outra. Verde pode significar “siga”, “ecológico” ou “dinheiro”.
O que tem bom respaldo é o efeito de isolamento, também chamado de efeito Von Restorff: algo diferente do ambiente ao redor tem mais chances de ser notado e lembrado. Um botão na única área laranja de uma página azul e branca chama atenção. O mesmo laranja em uma página cheia dessa cor, não.
Isso dá duas regras válidas em qualquer setor:
Designers de interiores usam uma proporção 60-30-10, que também funciona bem em sites:
| Proporção | Função | Escolha típica |
|---|---|---|
| ~60% | Fundo e base | Branco, quase branco, cinza muito claro ou um tom escuro em temas escuros |
| ~30% | Marca e estrutura | Cor principal da marca em cabeçalhos, navegação e fundos de seções |
| ~10% | Destaque e ação | Botões, links importantes e o elemento que você quer que as pessoas cliquem |
Adicione uma cor escura para o texto (costuma-se usar preto suave ou cinza escuro em vez de preto puro) e cores semânticas: verde para sucesso, vermelho para erro e âmbar para alerta. Mantenha essas cores semânticas longe dos botões principais para que um botão “Comprar agora” não seja confundido com um erro.
Se você tem logotipo, escolha a cor principal como base. Se não, escolha uma cor que combine com seu setor (veja a tabela abaixo) e que você goste de usar.
Observe o círculo cromático. Cores complementares (opostas no círculo) criam o maior contraste: azul e laranja, roxo e amarelo, verde-azulado e coral. Se a marca usa azul, um destaque laranja ou amarelo quente se sobressai muito mais do que outro tom de azul.
Escolha uma cor de fundo, uma cor de superfície para cartões, um cinza para bordas e uma cor para o texto. Esses elementos fazem a maior parte do trabalho e devem ser discretos.
Teste todas as combinações de texto e botões em uma ferramenta de contraste (a da WebAIM é gratuita). O nível AA da WCAG 2.2 exige:
Texto cinza com pouco contraste em fundo branco é um dos problemas de legibilidade mais comuns na web. Se as pessoas tiverem dificuldade para ler sua oferta, a cor do botão pouco importa.
Confira a paleta em um celular ao ar livre, em uma tela de notebook simples e no modo escuro, se seu site oferecer essa opção. Cores que parecem refinadas no monitor de um designer podem ficar apagadas em outras telas.
São bons pontos de partida, não regras. Cada exemplo usa uma base discreta e um único destaque contrastante.
| Setor | Base e cor principal | Destaque para ações | Por que funciona |
|---|---|---|---|
| Manufatura e indústria | Azul-marinho, carvão e cinza-aço | Laranja de segurança ou amarelo | Visual sério e confiável, com “Solicitar orçamento” em evidência |
| Saúde e odontologia | Branco, azul suave ou verde-azulado | Coral quente ou verde | Visual limpo e tranquilo, com botão de agendamento destacado |
| Direito e finanças | Azul-marinho profundo ou verde-floresta, creme | Dourado ou azul vivo | Sinais tradicionais de confiança e uma ação de contato clara |
| Restaurantes e alimentação | Tons neutros quentes, vermelho escuro ou verde-oliva | Amarelo vivo ou laranja | Aparência apetitosa, com “Pedir” ou “Reservar” em evidência |
| SaaS e tecnologia | Branco ou quase preto, índigo ou azul | Verde vivo, laranja ou rosa | Visual definido, com “Comece grátis” em alto contraste |
| Beleza e bem-estar | Rosa suave, verde-sálvia e creme | Ameixa escuro ou preto | Marca delicada e botão de agendamento confiante |
| Serviços residenciais (encanamento, HVAC, telhados) | Branco e azul escuro | Vermelho ou laranja | Botão de chamada com senso de urgência para emergências |
| Comércio eletrônico e moda | Predominantemente branco e preto | Um único destaque da marca | Deixa as fotos dos produtos trazerem a cor |
No caso de fabricantes, em especial, os compradores costumam chegar a uma página de produto ou capacidades e procurar uma ficha técnica ou orçamento. Use a cor de destaque apenas em “Solicitar orçamento”, “Baixar ficha técnica” e no telefone dessas páginas.
Imagine o site de uma empresa de paisagismo com logotipo verde, títulos verdes, ícones verdes, fundo principal verde e botão verde “Peça um orçamento grátis”. Tudo combina com a marca, e o botão desaparece.
A solução:
A marca não mudou, mas agora a ação é o elemento mais visível da tela.
Se o site recebe tráfego suficiente, faça um teste A/B da cor do botão ou do destaque, alterando uma coisa por vez e deixando o teste rodar tempo suficiente para gerar um resultado útil. Sites com pouco tráfego muitas vezes não conseguem chegar a um resultado confiável; para eles, estes testes simples funcionam:
A cor é apenas um dos fatores que fazem uma página converter; nosso guia de exemplos de landing pages que convertem aborda os demais. Com a We.Inc, você pode descrever no chat o visual desejado, como “azul-marinho e cinza com botão laranja para pedir orçamento”, explorar modelos e depois ajustar as cores visualmente ou no código.
Comece grátis · Sem cartão de crédito