Color Palette Generator

Gera paletas de cores harmoniosas a partir de uma cor base

🔒 100% no browser🆓 Grátis pra sempre⚡ Sem sign-up
Nota: A interface da ferramenta abaixo por enquanto está só em inglês. Estamos traduzindo uma por uma. Ver essa ferramenta em inglês →

Click any value to copy.

Como funciona

  1. 1
    Escolha uma cor base

    Usa o color picker ou digita um HEX.

  2. 2
    Escolha uma harmonia

    Complementary, analogous, triadic, tetradic, split-complementary ou monochromatic.

  3. 3
    Copia qualquer cor

    One-click copy em HEX, RGB ou HSL pra usar direto em CSS, Figma ou Tailwind.

Sobre Color Palette Generator

Color palette generator grátis online. Digita qualquer cor base e sai uma paleta harmoniosa - complementary, analogous, triadic, tetradic ou monochromatic. Copia qualquer cor como HEX, RGB ou HSL. Ideal pra designers e devs montando sistemas de brand. Color Palette Generator no 712 Tools roda inteiro dentro do seu browser via APIs nativas de JavaScript - nenhum server vê seus dados. Isso significa resultado na hora, privacidade total e nenhum limite de upload.

Seja pra uma sessão de debug, uma checagem rápida ou um incidente em produção, essa ferramenta é grátis e sem limite de uso. Sem watermarks, sem sign-up e sem ads dentro da ferramenta.

Perguntas frequentes

'Complementary' vs 'analogous'?

Complementary pega a cor oposta no círculo cromático (alto contraste). Analogous pega as do lado (suave, coesa).

Que harmonia usar pra uma brand?

Analogous ou monochromatic lê como calma e coesão. Complementary ou triadic lê como bold e energia.

Checa contrast WCAG?

Ainda não - mas você pode copiar duas cores e colar num contrast checker tipo WebAIM.

Minha cor base é enviada?

Não. A matemática da paleta roda inteira no seu browser.

Leia mais

5 min de leitura

The WCAG color contrast checklist every designer should bookmark

AA vs AAA, the math behind the ratios, why gray-on-gray fails on retina screens, and the two-line HTML that makes a color contrast test run in seconds.

5 min de leitura

Glassmorphism, neumorphism, and where 2026 UI is actually heading

The design trends that shipped, the ones that flopped, and what makes modern UI actually feel modern - from frosted glass to soft shadows to conic gradients.

4 min de leitura

CSS box-shadow patterns that look professional (not cheap)

A single 5px shadow makes any UI look like a bootstrapped 2015 landing page. Here are the layered-shadow patterns that modern design systems use - Material, Tailwind, Apple.

4 min de leitura

CSS gradient patterns that actually look good (and the two that don't)

Two colors and a 45° angle is not a gradient - it's a shortcut to a design that looks like every SaaS site from 2018. Here's how to build ones that don't.

Ferramentas relacionadas

Color Converter

Converte entre HEX, RGB, HSL e CMYK com preview ao vivo

CSS Gradient

Desenha gradients CSS linear, radial e conic com preview ao vivo

Box Shadow

Desenha box-shadows CSS multi-layer com preview ao vivo

Contrast Checker

Checa contraste texto/background contra WCAG 2.1 AA e AAA - preview ao vivo

Glassmorphism

Desenha frosted-glass cards CSS com preview ao vivo e código copy-ready

Physics Editor

Editor de hitbox de sprites grátis online - auto-traceia collision polygons e exporta pra Phaser, Matter.js, Rapier ou qualquer engine 2D