Esquemas de cores para sites: 40 paletas em layouts reais

Um bom esquema de cores para site usa um fundo calmo na maior parte da página, uma cor de texto escura com contraste de pelo menos 4.5:1 e um único destaque da marca reservado para botões e links. Aqui estão 40 esquemas originais em layouts de página ao vivo, cada um com modo escuro, notas de contraste e código CSS e Tailwind para copiar.

Abaixo estão 40 esquemas de cores que criamos para esta página, cada um aplicado a uma pequena landing page com hero, botão e card de preço, para que você o avalie como um visitante o veria, e não como uma fileira de amostras. Cada esquema tem uma versão clara e uma escura, razões de contraste medidas e dois formatos prontos para copiar: variáveis CSS simples e um bloco @theme do Tailwind CSS v4, além de uma observação sobre como transformá-los em design tokens.

Como usar esta coleção

Como escolher um esquema de cores para o site

1. Comece pela cor da marca, não por uma paleta

Se a empresa já tem uma cor no logo, essa é a cor de destaque. Construa todo o resto em torno dela: um fundo, uma cor de texto, uma superfície mais clara para os cards, uma cor de texto suave para linhas secundárias e uma cor de texto que fica sobre o destaque. Escolher primeiro uma paleta bonita e depois forçar o logo dentro dela é como os sites acabam com dois azuis brigando entre si.

Se ainda não existe uma cor de marca, escolha uma pelo que a empresa precisa que o visitante sinta primeiro. Azuis e verdes profundos transmitem cuidado e solidez, vermelhos e laranjas quentes transmitem energia e apetite, tons terrosos suaves transmitem naturalidade e calma. São convenções, não regras; um encanador em verde-azulado pode se destacar justamente porque a concorrência é toda azul.

2. Use a divisão 60-30-10 como ponto de partida

A regra 60-30-10 vem do design de interiores: cerca de 60 por cento de um ambiente é a cor dominante, 30 por cento uma cor secundária e 10 por cento um destaque. Em um site, ela se traduz assim:

A ideia é usar o destaque com moderação. Se tudo tem a cor de destaque, nada é uma chamada para ação. Trate os números como uma verificação, não como uma medida: se você apertar os olhos diante da página e o destaque cobrir um quarto da tela, ele está exagerando.

3. Confira o contraste antes de se apaixonar

As Diretrizes de Acessibilidade para Conteúdo Web (WCAG 2.2) definem os limites de contraste que a maioria das leis e auditorias de acessibilidade usa:

Todos os esquemas desta página passam de 4.5:1 no texto corrido, no texto secundário e no rótulo do botão sobre o destaque, nas versões clara e escura. A regra do rótulo do botão é mais rígida do que a WCAG exige para rótulos grandes em negrito, mas o texto de botão costuma ser pequeno, então aplicamos o mesmo patamar do texto corrido.

Proporção	Papel na página web	Variável nestes esquemas
Cerca de 60%	Fundo da página e grandes áreas vazias	`--bg`
Cerca de 30%	Texto, cards, painéis, rodapé, bordas	`--text`, `--surface`, `--muted`
Cerca de 10%	Botões, links, estados ativos, um destaque por tela	`--accent`, `--on-accent`

O quê	Mínimo (AA)	Aprimorado (AAA)	Critério WCAG
Texto corrido	4.5:1	7:1	1.4.3 e 1.4.6
Texto grande (pelo menos 18pt, ou 14pt em negrito)	3:1	4.5:1	1.4.3 e 1.4.6
Botões, bordas de campos, ícones que carregam significado	3:1 em relação ao que está ao lado	Sem nível AAA	1.4.11

As razões foram calculadas com a fórmula de luminância relativa da WCAG, não estimadas a olho. Se você mudar um valor hex, confira de novo com o verificador de contraste de cores. Este é o mesmo cálculo em JavaScript:

4. Crie a versão escura de propósito

Inverter uma paleta clara raramente funciona. As versões escuras aqui seguem quatro hábitos:

5. Teste em um layout real

Cores que parecem equilibradas como amostras podem pesar em uma página inteira, e é por isso que cada esquema abaixo aparece em um hero e em um card de preço. Antes de se decidir, aplique o esquema na sua própria página inicial, olhe no celular ao ar livre e confira se o botão principal é a primeira coisa que seu olho encontra.

Os 40 esquemas num relance

As colunas de contraste mostram claro / escuro. Clique em um nome para ir à prévia.

Esquema	Grupo	Destaque	Contraste do texto	Contraste do botão
Midnight Launch	SaaS e tecnologia	`#3b4fe0`	16.3 / 16.0	6.2 / 4.6
Signal Mint	SaaS e tecnologia	`#0e7c66`	15.4 / 15.7	5.1 / 11.5
Graphite Volt	SaaS e tecnologia	`#c43d16`	16.2 / 15.9	5.2 / 6.2
Cloud Iris	SaaS e tecnologia	`#6a3fd1`	15.8 / 16.1	6.5 / 4.7
Dev Console	SaaS e tecnologia	`#13795b`	16.7 / 15.7	5.4 / 11.2
Ledger Navy	Finanças e jurídico	`#1d4f91`	15.8 / 15.9	8.1 / 6.0
Vault Green	Finanças e jurídico	`#1f6b3e`	15.0 / 15.7	6.5 / 9.5
Counsel Oxblood	Finanças e jurídico	`#8a2a2b`	16.7 / 16.1	8.6 / 5.3
Steady Slate	Finanças e jurídico	`#3e5f7d`	15.0 / 15.9	6.7 / 6.6
Brass Audit	Finanças e jurídico	`#8a6414`	16.1 / 15.7	5.4 / 9.6
Clinic Aqua	Saúde e bem-estar	`#0b7285`	14.2 / 15.8	5.6 / 9.8
Calm Sage	Saúde e bem-estar	`#4f7a3a`	14.7 / 15.8	5.0 / 8.6
Soft Lavender	Saúde e bem-estar	`#7445b0`	15.2 / 16.1	6.5 / 5.1
Dental Bright	Saúde e bem-estar	`#1769c2`	15.1 / 16.0	5.5 / 6.3
Studio Clay	Saúde e bem-estar	`#a4502a`	15.5 / 15.9	5.6 / 6.6
Tomato Table	Gastronomia e hospitalidade	`#c0381f`	16.5 / 16.0	5.5 / 5.8
Espresso Bar	Gastronomia e hospitalidade	`#7a4a2a`	15.6 / 15.8	7.4 / 7.0
Citrus Market	Gastronomia e hospitalidade	`#b45a00`	15.8 / 15.8	4.8 / 8.1
Bistro Olive	Gastronomia e hospitalidade	`#5c6b1f`	15.1 / 15.6	5.9 / 10.5
Berry Bakery	Gastronomia e hospitalidade	`#b0285a`	16.2 / 16.1	6.4 / 5.4
Gallery Ink	Criativo e portfólio	`#e0301e`	18.1 / 16.0	4.5 / 5.6
Poster Cobalt	Criativo e portfólio	`#2340d8`	16.6 / 16.1	7.5 / 4.7
Neon Studio	Criativo e portfólio	`#c0129a`	17.1 / 16.0	5.5 / 5.8
Paper Sketch	Criativo e portfólio	`#b5462a`	13.9 / 16.0	5.4 / 6.1
Film Teal	Criativo e portfólio	`#00756e`	15.0 / 15.7	5.6 / 11.6
Hardhat Orange	Serviços locais e para casa	`#c4520a`	16.1 / 15.9	4.6 / 7.3
Pipeline Blue	Serviços locais e para casa	`#0b5cad`	15.8 / 15.9	6.7 / 6.5
Roofline Charcoal	Serviços locais e para casa	`#b3261e`	15.6 / 16.0	6.5 / 5.4
Fresh Lawn	Serviços locais e para casa	`#2f7a1f`	15.5 / 15.7	5.3 / 9.9
Spark Electric	Serviços locais e para casa	`#a15c00`	16.7 / 15.8	5.2 / 8.7
Forest Trail	Natureza e ar livre	`#2d6a4f`	14.8 / 15.8	6.4 / 8.7
Desert Dusk	Natureza e ar livre	`#b04a28`	15.1 / 15.9	5.5 / 6.3
Glacier Lake	Natureza e ar livre	`#14708f`	15.0 / 15.8	5.6 / 8.8
Moss and Stone	Natureza e ar livre	`#5a6b3a`	14.7 / 15.9	5.8 / 8.5
Coastal Dune	Natureza e ar livre	`#1f6f8b`	14.6 / 15.8	5.7 / 8.3
Noir Gold	Luxo e moda	`#86651a`	17.3 / 15.7	5.4 / 9.4
Velvet Plum	Luxo e moda	`#6d2160`	16.5 / 16.0	10.3 / 5.8
Ivory Emerald	Luxo e moda	`#0f5f46`	15.7 / 15.7	7.7 / 11.2
Rose Atelier	Luxo e moda	`#9c3d4a`	15.9 / 16.1	6.6 / 5.6
Onyx Sapphire	Luxo e moda	`#24409a`	17.2 / 16.0	9.2 / 4.9

Mostrando todos os 40

Esquemas de cores para SaaS e tecnologia

Sites de produto precisam de um destaque claro para a ação principal e de neutros calmos para telas densas. Estes cinco mantêm o fundo perto do branco e gastam a cor em botões e links.

Midnight Launch

MidnightPreços · Contato

Notas de versão que sua equipe realmente lê

Texto secundário em #586eb6.

Começar

Inicial

$19

Escolher plano

Cor	Claro	Escuro
Fundo	#f7f8fc	#10121b
Superfície	#ffffff	#1a1b29
Texto	#141a2e	#ededf3
Suave	#586eb6	#81859c
Destaque	#3b4fe0	#5869e5
Sobre o destaque	#ffffff	#ffffff
Contraste
Texto	16.26:1 AAA	16.02:1 AAA
Suave	4.58:1 AA	5.13:1 AA
Botão	6.21:1 AA	4.60:1 AA

Variáveis CSS

:root {
  --bg: #f7f8fc;
  --surface: #ffffff;
  --text: #141a2e;
  --muted: #586eb6;
  --accent: #3b4fe0;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10121b;
    --surface: #1a1b29;
    --text: #ededf3;
    --muted: #81859c;
    --accent: #5869e5;
    --on-accent: #ffffff;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Signal Mint

SignalPreços · Contato

Alertas de disponibilidade que acordam a pessoa certa

Texto secundário em #357e70.

Começar

Equipe

$29

Escolher plano

Cor	Claro	Escuro
Fundo	#f4faf8	#101b19
Superfície	#ffffff	#1a2926
Texto	#0f2420	#edf3f2
Suave	#357e70	#7e9a95
Destaque	#0e7c66	#55e7ca
Sobre o destaque	#ffffff	#101b19
Contraste
Texto	15.37:1 AAA	15.68:1 AAA
Suave	4.55:1 AA	5.82:1 AA
Botão	5.13:1 AA	11.46:1 AAA

Variáveis CSS

:root {
  --bg: #f4faf8;
  --surface: #ffffff;
  --text: #0f2420;
  --muted: #357e70;
  --accent: #0e7c66;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b19;
    --surface: #1a2926;
    --text: #edf3f2;
    --muted: #7e9a95;
    --accent: #55e7ca;
    --on-accent: #101b19;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Graphite Volt

GraphitePreços · Contato

Faturas enviadas antes de o café esfriar

Texto secundário em #6e6e81.

Começar

Individual

$12

Escolher plano

Cor	Claro	Escuro
Fundo	#f5f5f2	#1b1310
Superfície	#ffffff	#291d1a
Texto	#18181a	#f3eeed
Suave	#6e6e81	#9a857e
Destaque	#c43d16	#e77655
Sobre o destaque	#ffffff	#1b1310
Contraste
Texto	16.23:1 AAA	15.92:1 AAA
Suave	4.57:1 AA	5.26:1 AA
Botão	5.22:1 AA	6.21:1 AA

Variáveis CSS

:root {
  --bg: #f5f5f2;
  --surface: #ffffff;
  --text: #18181a;
  --muted: #6e6e81;
  --accent: #c43d16;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1310;
    --surface: #291d1a;
    --text: #f3eeed;
    --muted: #9a857e;
    --accent: #e77655;
    --on-accent: #1b1310;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Cloud Iris

CloudPreços · Contato

Uma caixa de entrada para todas as dúvidas dos clientes

Texto secundário em #7367b2.

Começar

Crescimento

$49

Escolher plano

Cor	Claro	Escuro
Fundo	#f8f7fd	#13101b
Superfície	#ffffff	#1e1a29
Texto	#1e1a33	#eeedf3
Suave	#7367b2	#89819c
Destaque	#6a3fd1	#8c6bdc
Sobre o destaque	#ffffff	#13101b
Contraste
Texto	15.76:1 AAA	16.14:1 AAA
Suave	4.57:1 AA	5.09:1 AA
Botão	6.47:1 AA	4.70:1 AA

Variáveis CSS

:root {
  --bg: #f8f7fd;
  --surface: #ffffff;
  --text: #1e1a33;
  --muted: #7367b2;
  --accent: #6a3fd1;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #13101b;
    --surface: #1e1a29;
    --text: #eeedf3;
    --muted: #89819c;
    --accent: #8c6bdc;
    --on-accent: #13101b;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Dev Console

DevPreços · Contato

Previews de deploy para cada pull request

Texto secundário em #537768.

Começar

Pro

$24

Escolher plano

Cor	Claro	Escuro
Fundo	#f3f6f4	#101b18
Superfície	#ffffff	#1a2924
Texto	#101714	#edf3f1
Suave	#537768	#7e9a92
Destaque	#13795b	#58e5bb
Sobre o destaque	#ffffff	#101b18
Contraste
Texto	16.71:1 AAA	15.68:1 AAA
Suave	4.59:1 AA	5.81:1 AA
Botão	5.37:1 AA	11.19:1 AAA

Variáveis CSS

:root {
  --bg: #f3f6f4;
  --surface: #ffffff;
  --text: #101714;
  --muted: #537768;
  --accent: #13795b;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b18;
    --surface: #1a2924;
    --text: #edf3f1;
    --muted: #7e9a92;
    --accent: #58e5bb;
    --on-accent: #101b18;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Esquemas de cores para finanças e jurídico

Bancos, contadores e escritórios de advocacia são julgados pela confiança, então estes usam destaques profundos e pouco saturados e quase nenhuma decoração. O destaque ainda precisa funcionar como botão, e é por isso que cada um passa de 4.5:1 com o seu rótulo.

Ledger Navy

LedgerPreços · Contato

Contabilidade para empresas de cinco a cinquenta pessoas

Texto secundário em #3a70c5.

Começar

Fechamento mensal

$240

Escolher plano

Cor	Claro	Escuro
Fundo	#f6f7f9	#10151b
Superfície	#ffffff	#1a2029
Texto	#0f1d33	#edeff3
Suave	#3a70c5	#7e8a9a
Destaque	#1d4f91	#5e95df
Sobre o destaque	#ffffff	#10151b
Contraste
Texto	15.75:1 AAA	15.93:1 AAA
Suave	4.55:1 AA	5.23:1 AA
Botão	8.14:1 AAA	5.97:1 AA

Variáveis CSS

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #0f1d33;
  --muted: #3a70c5;
  --accent: #1d4f91;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10151b;
    --surface: #1a2029;
    --text: #edeff3;
    --muted: #7e8a9a;
    --accent: #5e95df;
    --on-accent: #10151b;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Vault Green

VaultPreços · Contato

Metas de economia que avançam sozinhas

Texto secundário em #417b59.

Começar

Plus

Escolher plano

Cor	Claro	Escuro
Fundo	#f5f7f3	#101b15
Superfície	#ffffff	#1a2920
Texto	#13241a	#edf3ef
Suave	#417b59	#7e9a8a
Destaque	#1f6b3e	#69d394
Sobre o destaque	#ffffff	#101b15
Contraste
Texto	15.04:1 AAA	15.69:1 AAA
Suave	4.64:1 AA	5.78:1 AA
Botão	6.50:1 AA	9.54:1 AAA

Variáveis CSS

:root {
  --bg: #f5f7f3;
  --surface: #ffffff;
  --text: #13241a;
  --muted: #417b59;
  --accent: #1f6b3e;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b15;
    --surface: #1a2920;
    --text: #edf3ef;
    --muted: #7e9a8a;
    --accent: #69d394;
    --on-accent: #101b15;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Counsel Oxblood

CounselPreços · Contato

Orientação em direito trabalhista sem juridiquês

Texto secundário em #a65c45.

Começar

Primeira consulta

$150

Escolher plano

Cor	Claro	Escuro
Fundo	#faf7f5	#1b1010
Superfície	#ffffff	#291a1a
Texto	#24140f	#f3eded
Suave	#a65c45	#9a7e7f
Destaque	#8a2a2b	#d26a6b
Sobre o destaque	#ffffff	#1b1010
Contraste
Texto	16.66:1 AAA	16.09:1 AAA
Suave	4.65:1 AA	5.02:1 AA
Botão	8.58:1 AAA	5.33:1 AA

Variáveis CSS

:root {
  --bg: #faf7f5;
  --surface: #ffffff;
  --text: #24140f;
  --muted: #a65c45;
  --accent: #8a2a2b;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1010;
    --surface: #291a1a;
    --text: #f3eded;
    --muted: #9a7e7f;
    --accent: #d26a6b;
    --on-accent: #1b1010;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Steady Slate

SteadyPreços · Contato

Folha de pagamento que roda no mesmo dia todo mês

Texto secundário em #59718d.

Começar

Essencial

$39

Escolher plano

Cor	Claro	Escuro
Fundo	#f4f6f8	#12161a
Superfície	#ffffff	#1c2127
Texto	#1a2129	#edf0f3
Suave	#59718d	#7e8d9a
Destaque	#3e5f7d	#7da0bf
Sobre o destaque	#ffffff	#12161a
Contraste
Texto	14.99:1 AAA	15.89:1 AAA
Suave	4.65:1 AA	5.33:1 AA
Botão	6.69:1 AA	6.62:1 AA

Variáveis CSS

:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --text: #1a2129;
  --muted: #59718d;
  --accent: #3e5f7d;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161a;
    --surface: #1c2127;
    --text: #edf0f3;
    --muted: #7e8d9a;
    --accent: #7da0bf;
    --on-accent: #12161a;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Brass Audit

BrassPreços · Contato

Declarações de imposto preparadas e entregues até abril

Texto secundário em #847048.

Começar

Pessoa física

$180

Escolher plano

Cor	Claro	Escuro
Fundo	#fbf9f4	#1b1810
Superfície	#ffffff	#29241a
Texto	#211c12	#f3f1ed
Suave	#847048	#9a917e
Destaque	#8a6414	#e6b856
Sobre o destaque	#ffffff	#1b1810
Contraste
Texto	16.10:1 AAA	15.71:1 AAA
Suave	4.54:1 AA	5.68:1 AA
Botão	5.37:1 AA	9.58:1 AAA

Variáveis CSS

:root {
  --bg: #fbf9f4;
  --surface: #ffffff;
  --text: #211c12;
  --muted: #847048;
  --accent: #8a6414;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1810;
    --surface: #29241a;
    --text: #f3f1ed;
    --muted: #9a917e;
    --accent: #e6b856;
    --on-accent: #1b1810;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Esquemas de cores para saúde e bem-estar

Clínicas, terapeutas e estúdios querem parecer limpos e tranquilizadores. Azuis e verdes frios predominam, com uma opção de argila quente para spas e clínicas de fisioterapia que querem parecer menos clínicas.

Clinic Aqua

ClinicPreços · Contato

Consultas com médico de família na mesma semana

Texto secundário em #267c8b.

Começar

Sem agendamento

Escolher plano

Cor	Claro	Escuro
Fundo	#f3f9fa	#10191b
Superfície	#ffffff	#1a2629
Texto	#0d2a2f	#edf2f3
Suave	#267c8b	#7e969a
Destaque	#0b7285	#55d0e7
Sobre o destaque	#ffffff	#10191b
Contraste
Texto	14.21:1 AAA	15.80:1 AAA
Suave	4.55:1 AA	5.71:1 AA
Botão	5.59:1 AA	9.82:1 AAA

Variáveis CSS

:root {
  --bg: #f3f9fa;
  --surface: #ffffff;
  --text: #0d2a2f;
  --muted: #267c8b;
  --accent: #0b7285;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10191b;
    --surface: #1a2629;
    --text: #edf2f3;
    --muted: #7e969a;
    --accent: #55d0e7;
    --on-accent: #10191b;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Calm Sage

CalmPreços · Contato

Aulas guiadas de respiração, de manhã e à noite

Texto secundário em #5a7a4d.

Começar

Avulsa

$15

Escolher plano

Cor	Claro	Escuro
Fundo	#f6f8f3	#141a11
Superfície	#ffffff	#1f271b
Texto	#1c2618	#eff3ed
Suave	#5a7a4d	#889a7e
Destaque	#4f7a3a	#92c17c
Sobre o destaque	#ffffff	#141a11
Contraste
Texto	14.66:1 AAA	15.78:1 AAA
Suave	4.54:1 AA	5.88:1 AA
Botão	5.03:1 AA	8.55:1 AAA

Variáveis CSS

:root {
  --bg: #f6f8f3;
  --surface: #ffffff;
  --text: #1c2618;
  --muted: #5a7a4d;
  --accent: #4f7a3a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141a11;
    --surface: #1f271b;
    --text: #eff3ed;
    --muted: #889a7e;
    --accent: #92c17c;
    --on-accent: #141a11;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Soft Lavender

SoftPreços · Contato

Sessões de aconselhamento num cantinho tranquilo de casa

Texto secundário em #7d65a8.

Começar

Sessão avulsa

$90

Escolher plano

Cor	Claro	Escuro
Fundo	#f9f7fc	#15101b
Superfície	#ffffff	#201a28
Texto	#251d33	#efedf3
Suave	#7d65a8	#8d819c
Destaque	#7445b0	#9974c8
Sobre o destaque	#ffffff	#15101b
Contraste
Texto	15.16:1 AAA	16.11:1 AAA
Suave	4.59:1 AA	5.13:1 AA
Botão	6.52:1 AA	5.07:1 AA

Variáveis CSS

:root {
  --bg: #f9f7fc;
  --surface: #ffffff;
  --text: #251d33;
  --muted: #7d65a8;
  --accent: #7445b0;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15101b;
    --surface: #201a28;
    --text: #efedf3;
    --muted: #8d819c;
    --accent: #9974c8;
    --on-accent: #15101b;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Dental Bright

DentalPreços · Contato

Limpezas, check-ups e horários à noite

Texto secundário em #3373bd.

Começar

Avaliação de novo paciente

$79

Escolher plano

Cor	Claro	Escuro
Fundo	#f4f8fd	#10151b
Superfície	#ffffff	#1a2129
Texto	#0f2238	#edf0f3
Suave	#3373bd	#7e8c9a
Destaque	#1769c2	#559be7
Sobre o destaque	#ffffff	#10151b
Contraste
Texto	15.08:1 AAA	16.03:1 AAA
Suave	4.55:1 AA	5.33:1 AA
Botão	5.47:1 AA	6.31:1 AA

Variáveis CSS

:root {
  --bg: #f4f8fd;
  --surface: #ffffff;
  --text: #0f2238;
  --muted: #3373bd;
  --accent: #1769c2;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10151b;
    --surface: #1a2129;
    --text: #edf0f3;
    --muted: #7e8c9a;
    --accent: #559be7;
    --on-accent: #10151b;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Studio Clay

StudioPreços · Contato

Massagem e fisioterapia sob o mesmo teto

Texto secundário em #9e6042.

Começar

60 minutos

$95

Escolher plano

Cor	Claro	Escuro
Fundo	#fbf6f2	#1b1410
Superfície	#ffffff	#291e1a
Texto	#2b1a12	#f3efed
Suave	#9e6042	#9a877e
Destaque	#a4502a	#d78865
Sobre o destaque	#ffffff	#1b1410
Contraste
Texto	15.54:1 AAA	15.93:1 AAA
Suave	4.65:1 AA	5.32:1 AA
Botão	5.59:1 AA	6.58:1 AA

Variáveis CSS

:root {
  --bg: #fbf6f2;
  --surface: #ffffff;
  --text: #2b1a12;
  --muted: #9e6042;
  --accent: #a4502a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1410;
    --surface: #291e1a;
    --text: #f3efed;
    --muted: #9a877e;
    --accent: #d78865;
    --on-accent: #1b1410;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Esquemas de cores para gastronomia e hospitalidade

Restaurantes e lojas de alimentos podem usar destaques mais quentes e chamativos porque o apetite responde ao calor. Os fundos são levemente creme para que as fotos de comida não pareçam frias contra o branco puro.

Tomato Table

TomatoPreços · Contato

Pizza no forno a lenha e uma mesa comprida para os amigos

Texto secundário em #b35944.

Começar

Banquete em família

$58

Escolher plano

Cor	Claro	Escuro
Fundo	#fff8f3	#1b1210
Superfície	#ffffff	#291c1a
Texto	#2a1510	#f3eeed
Suave	#b35944	#9a837e
Destaque	#c0381f	#e46e58
Sobre o destaque	#ffffff	#1b1210
Contraste
Texto	16.46:1 AAA	16.01:1 AAA
Suave	4.51:1 AA	5.19:1 AA
Botão	5.49:1 AA	5.85:1 AA

Variáveis CSS

:root {
  --bg: #fff8f3;
  --surface: #ffffff;
  --text: #2a1510;
  --muted: #b35944;
  --accent: #c0381f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1210;
    --surface: #291c1a;
    --text: #f3eeed;
    --muted: #9a837e;
    --accent: #e46e58;
    --on-accent: #1b1210;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Espresso Bar

EspressoPreços · Contato

Grãos de origem única torrados toda terça-feira

Texto secundário em #916548.

Começar

Pacote de 340 g

$18

Escolher plano

Cor	Claro	Escuro
Fundo	#f8f3ee	#1b1510
Superfície	#fffdfa	#29201a
Texto	#241912	#f3efed
Suave	#916548	#9a897e
Destaque	#7a4a2a	#cd956f
Sobre o destaque	#ffffff	#1b1510
Contraste
Texto	15.58:1 AAA	15.83:1 AAA
Suave	4.58:1 AA	5.38:1 AA
Botão	7.39:1 AAA	7.00:1 AAA

Variáveis CSS

:root {
  --bg: #f8f3ee;
  --surface: #fffdfa;
  --text: #241912;
  --muted: #916548;
  --accent: #7a4a2a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1510;
    --surface: #29201a;
    --text: #f3efed;
    --muted: #9a897e;
    --accent: #cd956f;
    --on-accent: #1b1510;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Citrus Market

CitrusPreços · Contato

Caixas de frutas entregues nas manhãs de sexta

Texto secundário em #82732f.

Começar

Caixa pequena

$32

Escolher plano

Cor	Claro	Escuro
Fundo	#fffbef	#1b1610
Superfície	#ffffff	#29211a
Texto	#24200d	#f3f0ed
Suave	#82732f	#9a8c7e
Destaque	#b45a00	#e79e55
Sobre o destaque	#ffffff	#1b1610
Contraste
Texto	15.77:1 AAA	15.83:1 AAA
Suave	4.57:1 AA	5.50:1 AA
Botão	4.77:1 AA	8.06:1 AAA

Variáveis CSS

:root {
  --bg: #fffbef;
  --surface: #ffffff;
  --text: #24200d;
  --muted: #82732f;
  --accent: #b45a00;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1610;
    --surface: #29211a;
    --text: #f3f0ed;
    --muted: #9a8c7e;
    --accent: #e79e55;
    --on-accent: #1b1610;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Bistro Olive

BistroPreços · Contato

Um cardápio curto que muda com a estação

Texto secundário em #6c743f.

Começar

Menu degustação

$65

Escolher plano

Cor	Claro	Escuro
Fundo	#f7f6ee	#191b10
Superfície	#ffffff	#26291a
Texto	#1f2112	#f2f3ed
Suave	#6c743f	#959a7e
Destaque	#5c6b1f	#bed369
Sobre o destaque	#ffffff	#191b10
Contraste
Texto	15.08:1 AAA	15.61:1 AAA
Suave	4.60:1 AA	5.97:1 AA
Botão	5.87:1 AA	10.54:1 AAA

Variáveis CSS

:root {
  --bg: #f7f6ee;
  --surface: #ffffff;
  --text: #1f2112;
  --muted: #6c743f;
  --accent: #5c6b1f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #191b10;
    --surface: #26291a;
    --text: #f2f3ed;
    --muted: #959a7e;
    --accent: #bed369;
    --on-accent: #191b10;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Berry Bakery

BerryPreços · Contato

Bolos de andar encomendados com dois dias de antecedência

Texto secundário em #b74e6a.

Começar

Bolo de seis polegadas

$42

Escolher plano

Cor	Claro	Escuro
Fundo	#fdf5f7	#1b1014
Superfície	#ffffff	#291a1f
Texto	#2c1219	#f3edef
Suave	#b74e6a	#9a7e89
Destaque	#b0285a	#db618e
Sobre o destaque	#ffffff	#1b1014
Contraste
Texto	16.21:1 AAA	16.07:1 AAA
Suave	4.54:1 AA	5.06:1 AA
Botão	6.37:1 AA	5.41:1 AA

Variáveis CSS

:root {
  --bg: #fdf5f7;
  --surface: #ffffff;
  --text: #2c1219;
  --muted: #b74e6a;
  --accent: #b0285a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1014;
    --surface: #291a1f;
    --text: #f3edef;
    --muted: #9a7e89;
    --accent: #db618e;
    --on-accent: #1b1014;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Esquemas de cores para criativos e portfólios

Portfólios e estúdios podem arriscar mais. Estes combinam texto quase preto com um destaque forte, como faria um cartaz impresso, e deixam o próprio trabalho fornecer o resto da cor.

Gallery Ink

GalleryPreços · Contato

Identidades visuais para lojas independentes

Texto secundário em #816d6d.

Começar

Kit de identidade

$2,400

Escolher plano

Cor	Claro	Escuro
Fundo	#fafafa	#1b1110
Superfície	#ffffff	#291b1a
Texto	#111111	#f3eded
Suave	#816d6d	#9a817e
Destaque	#e0301e	#e76355
Sobre o destaque	#ffffff	#1b1110
Contraste
Texto	18.09:1 AAA	16.00:1 AAA
Suave	4.63:1 AA	5.13:1 AA
Botão	4.55:1 AA	5.57:1 AA

Variáveis CSS

:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --text: #111111;
  --muted: #816d6d;
  --accent: #e0301e;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1110;
    --surface: #291b1a;
    --text: #f3eded;
    --muted: #9a817e;
    --accent: #e76355;
    --on-accent: #1b1110;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Poster Cobalt

PosterPreços · Contato

Serigrafias em tiragens de cinquenta

Texto secundário em #7d6a6a.

Começar

Pôster A2

$70

Escolher plano

Cor	Claro	Escuro
Fundo	#f6f4ef	#10121b
Superfície	#ffffff	#1a1c29
Texto	#151515	#edeef3
Suave	#7d6a6a	#7e839a
Destaque	#2340d8	#6077e6
Sobre o destaque	#ffffff	#10121b
Contraste
Texto	16.61:1 AAA	16.12:1 AAA
Suave	4.61:1 AA	4.98:1 AA
Botão	7.51:1 AAA	4.69:1 AA

Variáveis CSS

:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --text: #151515;
  --muted: #7d6a6a;
  --accent: #2340d8;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10121b;
    --surface: #1a1c29;
    --text: #edeef3;
    --muted: #7e839a;
    --accent: #6077e6;
    --on-accent: #10121b;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Neon Studio

NeonPreços · Contato

Motion graphics para lançamentos musicais

Texto secundário em #785ec7.

Começar

Lyric video

$900

Escolher plano

Cor	Claro	Escuro
Fundo	#f7f5ff	#1b1019
Superfície	#ffffff	#291a25
Texto	#160f2b	#f3edf1
Suave	#785ec7	#9a7e94
Destaque	#c0129a	#e755c7
Sobre o destaque	#ffffff	#1b1019
Contraste
Texto	17.11:1 AAA	16.03:1 AAA
Suave	4.61:1 AA	5.10:1 AA
Botão	5.53:1 AA	5.75:1 AA

Variáveis CSS

:root {
  --bg: #f7f5ff;
  --surface: #ffffff;
  --text: #160f2b;
  --muted: #785ec7;
  --accent: #c0129a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1019;
    --surface: #291a25;
    --text: #f3edf1;
    --muted: #9a7e94;
    --accent: #e755c7;
    --on-accent: #1b1019;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Paper Sketch

PaperPreços · Contato

Mapas ilustrados de cidades e trilhas

Texto secundário em #7b6f5e.

Começar

Mapa personalizado

$650

Escolher plano

Cor	Claro	Escuro
Fundo	#f9f6ef	#1b1210
Superfície	#fffdf8	#291d1a
Texto	#2a2620	#f3eeed
Suave	#7b6f5e	#9a847e
Destaque	#b5462a	#da7a62
Sobre o destaque	#ffffff	#1b1210
Contraste
Texto	13.93:1 AAA	16.01:1 AAA
Suave	4.55:1 AA	5.24:1 AA
Botão	5.42:1 AA	6.09:1 AA

Variáveis CSS

:root {
  --bg: #f9f6ef;
  --surface: #fffdf8;
  --text: #2a2620;
  --muted: #7b6f5e;
  --accent: #b5462a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1210;
    --surface: #291d1a;
    --text: #f3eeed;
    --muted: #9a847e;
    --accent: #da7a62;
    --on-accent: #1b1210;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Film Teal

FilmPreços · Contato

Documentários curtos para organizações sem fins lucrativos

Texto secundário em #45767d.

Começar

Filme de três minutos

$3,200

Escolher plano

Cor	Claro	Escuro
Fundo	#f2f6f6	#101b1a
Superfície	#ffffff	#1a2928
Texto	#142224	#edf3f2
Suave	#45767d	#7e9a98
Destaque	#00756e	#55e7de
Sobre o destaque	#ffffff	#101b1a
Contraste
Texto	15.02:1 AAA	15.67:1 AAA
Suave	4.66:1 AA	5.83:1 AA
Botão	5.57:1 AA	11.62:1 AAA

Variáveis CSS

:root {
  --bg: #f2f6f6;
  --surface: #ffffff;
  --text: #142224;
  --muted: #45767d;
  --accent: #00756e;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b1a;
    --surface: #1a2928;
    --text: #edf3f2;
    --muted: #7e9a98;
    --accent: #55e7de;
    --on-accent: #101b1a;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Esquemas de cores para serviços locais e para casa

Encanadores, telhadistas, eletricistas e paisagistas precisam de um botão de telefone que se destaque na tela do celular à luz do dia. Cada destaque aqui é uma cor de alta visibilidade com um rótulo que continua legível.

Hardhat Orange

HardhatPreços · Contato

Reformas de cozinha e banheiro, do início ao fim

Texto secundário em #736f62.

Começar

Visita técnica

Grátis

Escolher plano

Cor	Claro	Escuro
Fundo	#f8f6f2	#1b1410
Superfície	#ffffff	#291f1a
Texto	#1b1a17	#f3efed
Suave	#736f62	#9a897e
Destaque	#c4520a	#e78e55
Sobre o destaque	#ffffff	#1b1410
Contraste
Texto	16.12:1 AAA	15.93:1 AAA
Suave	4.66:1 AA	5.42:1 AA
Botão	4.61:1 AA	7.28:1 AAA

Variáveis CSS

:root {
  --bg: #f8f6f2;
  --surface: #ffffff;
  --text: #1b1a17;
  --muted: #736f62;
  --accent: #c4520a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1410;
    --surface: #291f1a;
    --text: #f3efed;
    --muted: #9a897e;
    --accent: #e78e55;
    --on-accent: #1b1410;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Pipeline Blue

PipelinePreços · Contato

Cano estourado? Um encanador na sua porta hoje à noite

Texto secundário em #3c71b1.

Começar

Chamado

$89

Escolher plano

Cor	Claro	Escuro
Fundo	#f3f6fa	#10161b
Superfície	#ffffff	#1a2129
Texto	#0f1c2c	#edf0f3
Suave	#3c71b1	#7e8c9a
Destaque	#0b5cad	#559ee7
Sobre o destaque	#ffffff	#10161b
Contraste
Texto	15.84:1 AAA	15.93:1 AAA
Suave	4.62:1 AA	5.30:1 AA
Botão	6.67:1 AA	6.45:1 AA

Variáveis CSS

:root {
  --bg: #f3f6fa;
  --surface: #ffffff;
  --text: #0f1c2c;
  --muted: #3c71b1;
  --accent: #0b5cad;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10161b;
    --surface: #1a2129;
    --text: #edf0f3;
    --muted: #7e8c9a;
    --accent: #559ee7;
    --on-accent: #10161b;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Roofline Charcoal

RooflinePreços · Contato

Consertos de telhado com fotos de cada telha

Texto secundário em #7f6c6c.

Começar

Inspeção

$120

Escolher plano

Cor	Claro	Escuro
Fundo	#f5f5f5	#1b1110
Superfície	#ffffff	#291a1a
Texto	#1c1c1c	#f3eded
Suave	#7f6c6c	#9a807e
Destaque	#b3261e	#e36059
Sobre o destaque	#ffffff	#1b1110
Contraste
Texto	15.63:1 AAA	16.00:1 AAA
Suave	4.52:1 AA	5.08:1 AA
Botão	6.54:1 AA	5.36:1 AA

Variáveis CSS

:root {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --text: #1c1c1c;
  --muted: #7f6c6c;
  --accent: #b3261e;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1110;
    --surface: #291a1a;
    --text: #f3eded;
    --muted: #9a807e;
    --accent: #e36059;
    --on-accent: #1b1110;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Fresh Lawn

FreshPreços · Contato

Corte de grama semanal e limpezas de primavera

Texto secundário em #4f7c47.

Começar

Visita semanal

$45

Escolher plano

Cor	Claro	Escuro
Fundo	#f4f8f1	#121b10
Superfície	#ffffff	#1c291a
Texto	#152113	#eef3ed
Suave	#4f7c47	#839a7e
Destaque	#2f7a1f	#79d864
Sobre o destaque	#ffffff	#121b10
Contraste
Texto	15.53:1 AAA	15.70:1 AAA
Suave	4.54:1 AA	5.79:1 AA
Botão	5.35:1 AA	9.93:1 AAA

Variáveis CSS

:root {
  --bg: #f4f8f1;
  --surface: #ffffff;
  --text: #152113;
  --muted: #4f7c47;
  --accent: #2f7a1f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121b10;
    --surface: #1c291a;
    --text: #eef3ed;
    --muted: #839a7e;
    --accent: #79d864;
    --on-accent: #121b10;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Spark Electric

SparkPreços · Contato

Troca de quadros elétricos e instalação de carregadores para carros elétricos

Texto secundário em #737359.

Começar

Instalação de carregador

$650

Escolher plano

Cor	Claro	Escuro
Fundo	#fbfaf2	#1b1610
Superfície	#ffffff	#29221a
Texto	#1a1a14	#f3f0ed
Suave	#737359	#9a8e7e
Destaque	#a15c00	#e7a855
Sobre o destaque	#ffffff	#1b1610
Contraste
Texto	16.69:1 AAA	15.83:1 AAA
Suave	4.64:1 AA	5.60:1 AA
Botão	5.19:1 AA	8.67:1 AAA

Variáveis CSS

:root {
  --bg: #fbfaf2;
  --surface: #ffffff;
  --text: #1a1a14;
  --muted: #737359;
  --accent: #a15c00;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1610;
    --surface: #29221a;
    --text: #f3f0ed;
    --muted: #9a8e7e;
    --accent: #e7a855;
    --on-accent: #1b1610;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Esquemas de cores para natureza e ar livre

Marcas outdoor, fazendas, operadoras de turismo e produtos ecológicos. Destaques terrosos sobre fundos quase brancos, com modos escuros que lembram o entardecer, e não um editor de código.

Forest Trail

ForestPreços · Contato

Trilhas guiadas para grupos pequenos

Texto secundário em #4a7958.

Começar

Meio período

$55

Escolher plano

Cor	Claro	Escuro
Fundo	#f3f6f2	#111a16
Superfície	#ffffff	#1a2822
Texto	#16241a	#edf3f0
Suave	#4a7958	#7e9a8e
Destaque	#2d6a4f	#77c5a3
Sobre o destaque	#ffffff	#111a16
Contraste
Texto	14.81:1 AAA	15.79:1 AAA
Suave	4.63:1 AA	5.83:1 AA
Botão	6.39:1 AA	8.71:1 AAA

Variáveis CSS

:root {
  --bg: #f3f6f2;
  --surface: #ffffff;
  --text: #16241a;
  --muted: #4a7958;
  --accent: #2d6a4f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111a16;
    --surface: #1a2822;
    --text: #edf3f0;
    --muted: #7e9a8e;
    --accent: #77c5a3;
    --on-accent: #111a16;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Desert Dusk

DesertPreços · Contato

Passeios pelo cânion ao nascer e ao pôr do sol

Texto secundário em #976646.

Começar

Passeio do pôr do sol

$75

Escolher plano

Cor	Claro	Escuro
Fundo	#fbf5ee	#1b1310
Superfície	#ffffff	#291d1a
Texto	#2b1d14	#f3eeed
Suave	#976646	#9a857e
Destaque	#b04a28	#db8061
Sobre o destaque	#ffffff	#1b1310
Contraste
Texto	15.05:1 AAA	15.92:1 AAA
Suave	4.51:1 AA	5.26:1 AA
Botão	5.45:1 AA	6.34:1 AA

Variáveis CSS

:root {
  --bg: #fbf5ee;
  --surface: #ffffff;
  --text: #2b1d14;
  --muted: #976646;
  --accent: #b04a28;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1310;
    --surface: #291d1a;
    --text: #f3eeed;
    --muted: #9a857e;
    --accent: #db8061;
    --on-accent: #1b1310;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Glacier Lake

GlacierPreços · Contato

Aluguel de caiaque por hora

Texto secundário em #37749a.

Começar

Duas horas

$40

Escolher plano

Cor	Claro	Escuro
Fundo	#f1f6f9	#10181b
Superfície	#ffffff	#1a2529
Texto	#10222d	#edf1f3
Suave	#37749a	#7e939a
Destaque	#14708f	#55c2e7
Sobre o destaque	#ffffff	#10181b
Contraste
Texto	14.97:1 AAA	15.81:1 AAA
Suave	4.67:1 AA	5.59:1 AA
Botão	5.61:1 AA	8.78:1 AAA

Variáveis CSS

:root {
  --bg: #f1f6f9;
  --surface: #ffffff;
  --text: #10222d;
  --muted: #37749a;
  --accent: #14708f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10181b;
    --surface: #1a2529;
    --text: #edf1f3;
    --muted: #7e939a;
    --accent: #55c2e7;
    --on-accent: #10181b;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Moss and Stone

MossPreços · Contato

Jardins de plantas nativas que precisam de pouca água

Texto secundário em #68725a.

Começar

Projeto de jardim

$300

Escolher plano

Cor	Claro	Escuro
Fundo	#f4f5f0	#171912
Superfície	#ffffff	#23261c
Texto	#1f221b	#f1f3ed
Suave	#68725a	#909a7e
Destaque	#5a6b3a	#a7bb81
Sobre o destaque	#ffffff	#171912
Contraste
Texto	14.71:1 AAA	15.86:1 AAA
Suave	4.63:1 AA	6.00:1 AA
Botão	5.84:1 AA	8.50:1 AAA

Variáveis CSS

:root {
  --bg: #f4f5f0;
  --surface: #ffffff;
  --text: #1f221b;
  --muted: #68725a;
  --accent: #5a6b3a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171912;
    --surface: #23261c;
    --text: #f1f3ed;
    --muted: #909a7e;
    --accent: #a7bb81;
    --on-accent: #171912;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Coastal Dune

CoastalPreços · Contato

Chalés de praia a uma curta caminhada da água

Texto secundário em #5c727c.

Começar

Por noite

$210

Escolher plano

Cor	Claro	Escuro
Fundo	#f9f6ef	#10181b
Superfície	#ffffff	#1a2529
Texto	#1d2427	#edf1f3
Suave	#5c727c	#7e939a
Destaque	#1f6f8b	#61bcdc
Sobre o destaque	#ffffff	#10181b
Contraste
Texto	14.59:1 AAA	15.81:1 AAA
Suave	4.68:1 AA	5.59:1 AA
Botão	5.67:1 AA	8.33:1 AAA

Variáveis CSS

:root {
  --bg: #f9f6ef;
  --surface: #ffffff;
  --text: #1d2427;
  --muted: #5c727c;
  --accent: #1f6f8b;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10181b;
    --surface: #1a2529;
    --text: #edf1f3;
    --muted: #7e939a;
    --accent: #61bcdc;
    --on-accent: #10181b;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Esquemas de cores para luxo e moda

Joalherias, hotéis boutique e grifes de moda costumam querer contenção: um fundo discreto, texto escuro e um único destaque rico usado com parcimônia.

Noir Gold

NoirPreços · Contato

Anéis cravejados à mão sob encomenda

Texto secundário em #7a6e62.

Começar

Consulta

Grátis

Escolher plano

Cor	Claro	Escuro
Fundo	#f8f6f1	#1b1810
Superfície	#ffffff	#29241a
Texto	#141210	#f3f1ed
Suave	#7a6e62	#9a927e
Destaque	#86651a	#e0b85d
Sobre o destaque	#ffffff	#1b1810
Contraste
Texto	17.30:1 AAA	15.71:1 AAA
Suave	4.59:1 AA	5.73:1 AA
Botão	5.40:1 AA	9.44:1 AAA

Variáveis CSS

:root {
  --bg: #f8f6f1;
  --surface: #ffffff;
  --text: #141210;
  --muted: #7a6e62;
  --accent: #86651a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1810;
    --surface: #29241a;
    --text: #f3f1ed;
    --muted: #9a927e;
    --accent: #e0b85d;
    --on-accent: #1b1810;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Velvet Plum

VelvetPreços · Contato

Roupas de festa alugadas para o fim de semana

Texto secundário em #a5538e.

Começar

Aluguel de fim de semana

$120

Escolher plano

Cor	Claro	Escuro
Fundo	#f9f5f8	#1b1019
Superfície	#ffffff	#291a26
Texto	#24121f	#f3edf2
Suave	#a5538e	#9a7e95
Destaque	#6d2160	#d26ac0
Sobre o destaque	#ffffff	#1b1019
Contraste
Texto	16.46:1 AAA	16.04:1 AAA
Suave	4.60:1 AA	5.10:1 AA
Botão	10.31:1 AAA	5.78:1 AA

Variáveis CSS

:root {
  --bg: #f9f5f8;
  --surface: #ffffff;
  --text: #24121f;
  --muted: #a5538e;
  --accent: #6d2160;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1019;
    --surface: #291a26;
    --text: #f3edf2;
    --muted: #9a7e95;
    --accent: #d26ac0;
    --on-accent: #1b1019;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Ivory Emerald

IvoryPreços · Contato

Um hotel de doze quartos acima do antigo porto

Texto secundário em #3e7c65.

Começar

Quarto com jardim

$340

Escolher plano

Cor	Claro	Escuro
Fundo	#f8f7f2	#101b18
Superfície	#ffffff	#1a2924
Texto	#10201a	#edf3f1
Suave	#3e7c65	#7e9a91
Destaque	#0f5f46	#58e5b9
Sobre o destaque	#ffffff	#101b18
Contraste
Texto	15.74:1 AAA	15.68:1 AAA
Suave	4.58:1 AA	5.80:1 AA
Botão	7.65:1 AAA	11.18:1 AAA

Variáveis CSS

:root {
  --bg: #f8f7f2;
  --surface: #ffffff;
  --text: #10201a;
  --muted: #3e7c65;
  --accent: #0f5f46;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b18;
    --surface: #1a2924;
    --text: #edf3f1;
    --muted: #7e9a91;
    --accent: #58e5b9;
    --on-accent: #101b18;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Rose Atelier

RosePreços · Contato

Ajustes de vestido de noiva com duas provas incluídas

Texto secundário em #a65b57.

Começar

Pacote de provas

$280

Escolher plano

Cor	Claro	Escuro
Fundo	#fcf6f5	#1b1012
Superfície	#ffffff	#281a1c
Texto	#2a1716	#f3eded
Suave	#a65b57	#9a7e82
Destaque	#9c3d4a	#c9747f
Sobre o destaque	#ffffff	#1b1012
Contraste
Texto	15.93:1 AAA	16.07:1 AAA
Suave	4.62:1 AA	5.03:1 AA
Botão	6.60:1 AA	5.57:1 AA

Variáveis CSS

:root {
  --bg: #fcf6f5;
  --surface: #ffffff;
  --text: #2a1716;
  --muted: #a65b57;
  --accent: #9c3d4a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1012;
    --surface: #281a1c;
    --text: #f3eded;
    --muted: #9a7e82;
    --accent: #c9747f;
    --on-accent: #1b1012;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Onyx Sapphire

OnyxPreços · Contato

Relógios revisados por um relojoeiro certificado

Texto secundário em #586db6.

Começar

Revisão completa

$450

Escolher plano

Cor	Claro	Escuro
Fundo	#f5f6f8	#10131b
Superfície	#ffffff	#1a1d29
Texto	#0e1220	#edeef3
Suave	#586db6	#7e859a
Destaque	#24409a	#627eda
Sobre o destaque	#ffffff	#10131b
Contraste
Texto	17.25:1 AAA	16.03:1 AAA
Suave	4.54:1 AA	5.05:1 AA
Botão	9.23:1 AAA	4.88:1 AA

Variáveis CSS

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --text: #0e1220;
  --muted: #586db6;
  --accent: #24409a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10131b;
    --surface: #1a1d29;
    --text: #edeef3;
    --muted: #7e859a;
    --accent: #627eda;
    --on-accent: #10131b;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Usando os blocos de código

Variáveis CSS simples

O bloco CSS define seis variáveis em :root e as redefine dentro de @media (prefers-color-scheme: dark), para que a página siga a configuração do sistema do visitante sem JavaScript. Use-as em qualquer lugar:

Se você também quiser um botão manual, copie os valores escuros para uma segunda regra como :root[data-theme="dark"] { ... } e defina esse atributo a partir do seu botão de alternância.

Tailwind CSS v4

No Tailwind v4, os valores do tema ficam no CSS dentro de um bloco @theme, e qualquer variável chamada --color-* vira um utilitário de cor, então --color-accent gera bg-accent, text-accent e border-accent. O bloco Tailwind de cada esquema mapeia esses nomes para as variáveis CSS acima dele com @theme inline, a opção que o Tailwind documenta para valores de tema que referenciam outras variáveis. Cole primeiro as variáveis CSS, depois o bloco @theme, após @import "tailwindcss";. O modo escuro continua funcionando porque os utilitários apontam para as mesmas variáveis que a media query altera:

Usa Tailwind v3? Coloque os mesmos valores hex claros em theme.extend.colors no tailwind.config.js. Se preferir gerar uma escala completa de tons de 50 a 950 a partir de um destaque, o gerador de paleta de cores Tailwind faz isso.

Design tokens

Para levar um esquema a uma ferramenta de design tokens, mapeie os seis papéis para tokens no formato JSON do Design Tokens Community Group, com $type igual a color e o hex como $value, em um grupo light e um grupo dark:

Ferramentas que leem esse formato, como o Style Dictionary, podem convertê-lo em valores CSS, iOS ou Android.

Erros comuns em esquemas de cores

Ferramentas para criar o seu

Perguntas frequentes

O que é um bom esquema de cores para um site?

Um com um fundo calmo que cobre a maior parte da página, uma cor de texto escura que alcança pelo menos 4.5:1 de contraste com ele e uma cor de destaque reservada para botões e links. O destaque deve combinar com a marca, e o rótulo do botão sobre ele também deve passar de 4.5:1.

Quantas cores um site deve ter?

A maioria dos sites funciona com cinco ou seis papéis: fundo, superfície para cards, texto principal, texto secundário, um destaque e a cor de texto usada sobre o destaque. Acrescente vermelho, âmbar e verde apenas para mensagens de erro, aviso e sucesso.

O que é a regra 60-30-10 no web design?

É um guia de proporção emprestado do design de interiores: cerca de 60 por cento de cor dominante (o fundo da página), 30 por cento de cor secundária (texto, cards e painéis) e 10 por cento de destaque (botões, links e realces). Ela mantém o destaque raro o bastante para chamar a atenção.

Que razão de contraste a WCAG exige para texto?

A WCAG 2.2 nível AA exige pelo menos 4.5:1 para texto normal e 3:1 para texto grande, ou seja, pelo menos 18 pontos ou 14 pontos em negrito. O nível AAA eleva esses valores para 7:1 e 4.5:1. Botões, bordas de campos e ícones com significado precisam de 3:1 em relação ao entorno.

Posso usar estes esquemas de cores em um site comercial?

Sim. Criamos estas paletas para esta página e você pode usá-las em qualquer projeto pessoal ou comercial sem dar crédito.

Como criar uma versão em modo escuro de um esquema de cores?

Não basta inverter. Use um fundo bem escuro tingido com a matiz da marca, uma cor de texto quase branca e uma versão mais clara do destaque para que ele continue visível. Depois confira de novo o contraste do texto e do rótulo do botão, que pode precisar trocar de branco para escuro.

Esquemas de cores para sites: 40 paletas em layouts de página reais

Como usar esta coleção

Como escolher um esquema de cores para o site

1. Comece pela cor da marca, não por uma paleta

2. Use a divisão 60-30-10 como ponto de partida

3. Confira o contraste antes de se apaixonar

4. Crie a versão escura de propósito

5. Teste em um layout real

Os 40 esquemas num relance

Esquemas de cores para SaaS e tecnologia

Midnight Launch

Signal Mint

Graphite Volt

Cloud Iris

Dev Console

Esquemas de cores para finanças e jurídico

Ledger Navy

Vault Green

Counsel Oxblood

Steady Slate

Brass Audit

Esquemas de cores para saúde e bem-estar

Clinic Aqua

Calm Sage

Soft Lavender

Dental Bright

Studio Clay

Esquemas de cores para gastronomia e hospitalidade

Tomato Table

Espresso Bar

Citrus Market

Bistro Olive

Berry Bakery

Esquemas de cores para criativos e portfólios

Gallery Ink

Poster Cobalt

Neon Studio

Paper Sketch

Film Teal

Esquemas de cores para serviços locais e para casa

Hardhat Orange

Pipeline Blue

Roofline Charcoal

Fresh Lawn

Spark Electric

Esquemas de cores para natureza e ar livre

Forest Trail

Desert Dusk

Glacier Lake

Moss and Stone

Coastal Dune

Esquemas de cores para luxo e moda

Noir Gold

Velvet Plum

Ivory Emerald

Rose Atelier

Onyx Sapphire

Usando os blocos de código

Variáveis CSS simples

Tailwind CSS v4

Design tokens

Erros comuns em esquemas de cores

Ferramentas para criar o seu

Perguntas frequentes

O que é um bom esquema de cores para um site?

Quantas cores um site deve ter?

O que é a regra 60-30-10 no web design?

Que razão de contraste a WCAG exige para texto?

Posso usar estes esquemas de cores em um site comercial?

Como criar uma versão em modo escuro de um esquema de cores?

Relacionados: Guias

Produto

Para quem é

Recursos

Recursos

Empresa