Gerador de paleta de cores

Escolha uma cor e uma harmonia e copie a paleta em hex ou como CSS variables.

Roda no seu navegador. Nada do que você digita sai desta página.

Cor base Hex da cor base Harmonia

Onde usar cada cor

Claro Escuro

Fundo #f6f5f9

Fundo da página.
Superfície #e8e6f0

Card, modal, menu e campo de formulário.
Borda #c8c4d4

Contorno de card e campo, divisória.
Texto #1a1726 AA 16.2:1

Título e corpo do texto.
Texto secundário #5e5775 AA 6.2:1

Legenda, data, dica e placeholder.
Primária #5b3cc4

Botão principal, item ativo e logo.
Texto sobre a primária #ffffff AA 7.3:1

Texto e ícone dentro do botão principal.
Destaque #637624 AA 4.7:1

Link, botão secundário, foco e selo.

Fonte do título

Fonte do texto

Combinam: estilos diferentes dão contraste entre título e texto.

Mais vale um bebadis conhecidiss, que um alcoolatra anonimiss

16 de outubro de 2026

Mussum Ipsum, cacilds vidis litro abertis. Mé faiz elementum girarzis, nisi eros vermeio. Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis.

Si num tem leite então bota uma pinga aí cumpadi! Cacilds Forevis

A fonte muda só a prévia. Vem do Google Fonts.

CSS das fontes

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;700&display=swap');

:root {
	--fonte-titulo: 'Playfair Display', serif;
	--fonte-texto: 'Inter', sans-serif;
}

body {
	font-family: var(--fonte-texto);
}

h1,
h2,
h3 {
	font-family: var(--fonte-titulo);
}

Sugestão a partir da cor base. Texto e destaque já passam no contraste mínimo do WCAG AA (4,5:1).

CSS variables dos papéis

:root {
	--cor-fundo: #f6f5f9;
	--cor-superficie: #e8e6f0;
	--cor-borda: #c8c4d4;
	--cor-texto: #1a1726;
	--cor-texto-secundario: #5e5775;
	--cor-primaria: #5b3cc4;
	--cor-texto-primaria: #ffffff;
	--cor-destaque: #637624;
}

CSS variables

:root {
	--cor-1: #5b3cc4;
	--cor-2: #9d8adc;
	--cor-3: #a5c43c;
	--cor-4: #637624;
}