Gerador de Paletas de Cores
Create cohesive color palettes for UI, branding, and design systems without leaving the browser.
Sobre o Gerador de Paletas de Cores
Create cohesive color palettes for UI, branding, and design systems without leaving the browser. Pick a base HEX color and a harmony - complementary, analogous, triadic, tetradic, split-complementary, monochromatic, or fully random - then copy HEX lists, comma-separated swatches, or ready CSS custom properties. Pair it with the CSS Gradient Generator or HEX to RGB Converter. Nothing is uploaded.
Como usar o Gerador de Paletas de Cores
- Choose a harmony (analogous, complementary, triadic, and more) or Random for unrelated swatches.
- Set a base color with the picker or HEX field, or click Shuffle for a random base.
- For random, analogous, and monochromatic modes, adjust how many colors you want (3-8).
- Click Generate, review HEX / RGB / HSL on each swatch, then copy a HEX list or CSS variables. Everything stays on your device.
Exemplos de Gerador de Paletas de Cores
Analogous UI accents
Base #3b82f6 with Analogous and 5 colors - neighboring blues and teals for soft UI accents.
Complementary contrast
Base #ef4444 with Complementary - a red and its opposite for high-contrast CTAs.
Triadic brand set
Base #22c55e with Triadic - three evenly spaced hues for a lively brand trio.
Monochrome scale
Base #0f172a with Monochromatic and 6 colors - a light-to-dark slate scale for backgrounds and text.
Casos de uso comuns
- Build brand and marketing color systems
- Prototype UI accent and neutral scales
- Export CSS custom properties for design tokens
- Explore complementary and triadic contrast
- Generate random moodboards for inspiration
Guias relacionadas
Perguntas frequentes sobre o Gerador de Paletas de Cores
- Which color harmonies are supported?
- Random, complementary (2), analogous (3-8), triadic (3), tetradic (4), split-complementary (3), and monochromatic (3-8). Fixed harmonies return their natural swatch count even if you set a higher target.
- What formats can I copy?
- Each swatch shows HEX, RGB, and HSL. Use Copy HEX list (one per line), Copy HEX row (comma-separated), or Copy CSS for a :root block with --color-1 style variables.
- Can I start from my brand color?
- Yes. Paste a HEX value like #3b82f6 or use the color picker. Shuffle picks a fresh random base while keeping the selected harmony.
- Does this check WCAG contrast?
- No. This tool focuses on harmony palettes and export formats. Pair swatches with a contrast checker when you need AA/AAA text verification.
- Does my palette leave the device?
- No. The Color Palette Generator runs entirely in your browser. Colors are not uploaded or stored on a server.
Ferramentas relacionadas
Gerador de Gradientes CSS
Crie gradientes CSS lineares, radiais e conicos com preview ao vivo. Escolha color stops, copie o CSS de background e cole na sua folha de estilos. Roda no navegador.
Conversor de HEX para RGB
Converta HEX para RGB (e o inverso) com HSL, CMYK, escala de tons, cartões de contraste WCAG e snippet de tokens CSS - conversor de cores grátis online.
Conversor de RGB para HSL
Converta RGB para HSL e HSL para RGB na hora. Conversor de cores grátis com amostra ao vivo e CSS rgb() e hsl() prontos para copiar.
Gerador de favicon
Gerador de favicon gratis no navegador. Carregue um logo, obtenha PNG 16, 32, 48, 180, 192 e 512, e descarregue um ZIP. Nada e enviado.
Gerador de Numeros Aleatorios
Gerador de numeros aleatorios gratis no navegador. Defina minimo e maximo, quantidade, unicos ou decimais e copie o resultado. Usa aleatoriedade criptografica - nada e enviado.