Gerador de paleta de cores
Aperte espaço para uma nova paleta; trave as cores de que gostar.
ou aperte a barra de espaço
- rgb(237, 221, 187)hsl(41, 58%, 83%)
- Texto branco
- 1.34:1AAAAA
- Texto preto
- 15.66:1AAAAA
- rgb(143, 173, 255)hsl(224, 100%, 78%)
- Texto branco
- 2.19:1AAAAA
- Texto preto
- 9.59:1AAAAA
- rgb(92, 123, 230)hsl(227, 73%, 63%)
- Texto branco
- 3.87:1AAAAA
- Texto preto
- 5.43:1AAAAA
- rgb(59, 91, 219)hsl(228, 69%, 55%)
- Texto branco
- 5.67:1AAAAA
- Texto preto
- 3.71:1AAAAA
- rgb(60, 52, 31)hsl(43, 32%, 18%)
- Texto branco
- 12.33:1AAAAA
- Texto preto
- 1.70:1AAAAA
Nada sai do seu dispositivo
Esta ferramenta funciona inteiramente no seu navegador. O que você digita, toca ou grava aqui fica no seu dispositivo: nada é enviado nem guardado em um servidor.
Como funciona
- Clique em Gerar ou aperte a barra de espaço para uma nova paleta — ou digite uma cor base e escolha uma harmonia, como complementares ou tríade.
- Trave as cores de que gostar; a próxima paleta as mantém e monta o resto em volta delas. Clique numa cor para copiar o código hex.
- Confira os selos de contraste, veja como uma pessoa daltônica enxerga a paleta e copie as variáveis CSS ou baixe em PNG ou SVG.
Perguntas frequentes
- Quais são as harmonias de cores?
- Regras do círculo cromático: análogas usa as vizinhas (±30°), complementares a cor oposta, complementares divididas as duas ao lado da oposta, tríade três cores a 120°, quadrado quatro a 90°, monocromática um só matiz em tons claros e escuros, e pastel cores suaves e claras em todo o círculo.
- Por que as cores parecem equilibradas?
- Elas são calculadas em OKLCH, um espaço de cor que acompanha o brilho que o olho percebe, então os passos de claro e escuro parecem regulares; cores que a tela não consegue mostrar são suavizadas até caber.
- O que significam os selos de contraste?
- A razão de contraste WCAG do texto branco e do preto sobre cada cor: o nível AA pede 4,5 para texto normal, o AAA pede 7. O rótulo aparece na cor que se lê melhor.
- Dá para tirar uma paleta de uma foto?
- Dá — a ferramenta Paleta de cores de uma imagem pega as cores principais de uma foto. Esta aqui cria combinações novas.
- Alguma coisa é enviada?
- Não. As paletas são feitas no seu navegador; o link para compartilhar leva as próprias cores.
Ferramentas relacionadas
◉ Paleta de cores de uma imagem As cores principais da imagem, em códigos hex. ◒ Ferramentas para desenvolvedores Conversor de cor HEX, RGB, HSL e CMYK — mais a razão de contraste que decide a legibilidade. ◒ Ferramentas para desenvolvedores Gerador de gradiente CSS Cores de um lado, uma declaração do outro. ◐ Ferramentas para desenvolvedores Verificador de contraste Se alguém consegue mesmo ler.