20 paletas de cores neobrutalistas com códigos hex (prontas para copiar e colar)

Vamos ser sinceros: escolher as cores de um design neobrutalista pode ser sufocante.

Você sabe que precisa de cores ousadas e de alto contraste. Mas quais? Quantas? E quais combinam entre si sem parecer um trabalho de artesanato de creche que deu errado?

Já construí dezenas de sites neobrutalistas, e é na escolha da cor que a maioria das pessoas empaca. Por isso entrego a você 20 paletas de cores prontas para usar, cada uma com seus códigos hex exatos, suas diretrizes de uso e seu contexto real.

Nada de teoria. Nada de sermões sobre o círculo cromático. Só copie os códigos hex e comece a construir.

Vamos direto ao assunto.

Como usar essas paletas

Antes de chegar às cores, veja como pensar os sistemas cromáticos neobrutalistas:

Estrutura de uma paleta neobrutalista:

• Base: preto ou muito escuro (para bordas, texto, sombras)
• Fundo: branco ou muito claro (para cards, fundo principal)
• Primária: sua cor de acento principal (CTAs, cabeçalhos, ênfase)
• Secundária: acento de apoio (normalmente 1 ou 2 cores a mais)
• Acentos: toques de cor adicionais (opcional, com moderação)

Princípios-chave:

1. O alto contraste é obrigatório - o preto e o branco devem ancorar a sua paleta
2. Saturação antes de sutileza - nada de pastéis, nada de tons apagados (exceto nos fundos)
3. Limite as cores de acento - de 1 a 3 acentos vibrantes no máximo
4. Não tema a ousadia - se parece seguro demais, não está brutal o bastante

Agora, vamos às paletas.

Paletas neobrutalistas clássicas

São as combinações atemporais que definem a estética.

1. Electric Yellow

A paleta neobrutalista original. Se você aprender só uma, que seja esta.

Copiar--background: #FFFFFF
--foreground: #000000
--primary: #FFDB33
--primary-hover: #FFCC00
--border: #000000
--card: #FFFFFF

Quando usar:

• Produtos de tecnologia e SaaS
• Qualquer coisa que precise de atenção e energia
• Seu primeiro projeto neobrutalista

Por que funciona: O amarelo sobre branco oferece a máxima visibilidade. As bordas e o texto pretos dão a estrutura. Se é a paleta padrão do Neobrutalism, é por um motivo: é quase impossível de estragar.

Exemplo de uso:

Copiar// Primary CTA button
<button className="bg-[#FFDB33] text-[#000000] border-4 border-[#000000]
                   shadow-[6px_6px_0_0_#000000] px-8 py-4 font-bold">
  Get Started
</button>

Exemplo real: o Gumroad usa uma variação desta paleta em toda a sua interface.

2. Hot Pink Punch

Para marcas com atitude e energia.

Copiar--background: #FFFFFF
--foreground: #000000
--primary: #FF006E
--secondary: #00F0FF
--border: #000000
--card: #FFFFFF
--accent: #FFDB33

Quando usar:

• Agências criativas
• Marcas de moda e streetwear
• Produtos voltados aos jovens
• Qualquer coisa anticorporativa

Por que funciona: O rosa intenso exige atenção. Combinado com ciano, cria um ar retrofuturista. O acento amarelo adiciona uma terceira dimensão sem saturar.

Estratégia de color blocking:

Copiar// Three-color feature grid
<div className="grid grid-cols-3 gap-6">
  <div className="bg-[#FF006E] border-4 border-[#000000] p-8">
    <h3 className="text-white">Feature 1</h3>
  </div>
  <div className="bg-[#00F0FF] border-4 border-[#000000] p-8">
    <h3 className="text-black">Feature 2</h3>
  </div>
  <div className="bg-[#FFDB33] border-4 border-[#000000] p-8">
    <h3 className="text-black">Feature 3</h3>
  </div>
</div>

3. Cyber Lime

Máxima visibilidade com um toque digital.

Copiar--background: #FFFFFF
--foreground: #000000
--primary: #AAFC3D
--primary-hover: #97F819
--secondary: #FF4FD8
--border: #000000
--accent: #00F0FF

Quando usar:

• Gaming e esports
• Startups de tecnologia
• Ferramentas para desenvolvedores
• Qualquer coisa futurista ou digital-first

Por que funciona: O verde-limão grita "digital", enquanto o rosa magenta dá o contraste. Esta paleta parece uma janela de terminal cruzada com um pôster de rave.

Exemplo:

Copiar// Hero section with lime background
<section className="bg-[#AAFC3D] min-h-screen">
  <h1 className="text-8xl font-black text-[#000000]">
    LEVEL UP
  </h1>
  <button className="bg-[#FF4FD8] border-4 border-[#000000]
                     shadow-[8px_8px_0_0_#000000]">
    Start Playing
  </button>
</section>

4. Brutal Monochrome

Quando você quer neobrutalismo sem o arco-íris.

Copiar--background: #FFFFFF
--foreground: #000000
--primary: #000000
--secondary: #E5E5E5
--border: #000000
--card: #FFFFFF
--accent: #666666

Quando usar:

• Neobrutalismo minimalista (sim, existe)
• Portfólios de arquitetura e design
• Quando a cor distrairia do conteúdo
• Contextos profissionais que precisam de caráter

Por que funciona: Prova que o neobrutalismo não é sobre cor, e sim sobre estrutura. Bordas grossas, sombras duras e tipografia marcante sustentam a estética sem um único matiz.

Dica de profissional: Adicione um acento sutil para os estados de hover:

Copiar--hover-accent: #FFDB33  /* Yellow appears only on interaction */

Paletas vibrantes e enérgicas

Para marcas que não sussurram.

5. Sunset Riot

O calor encontra a rebeldia.

Copiar--background: #FCFFE7
--foreground: #000000
--primary: #EA435F
--primary-hover: #D00000
--secondary: #FFDA5C
--border: #000000
--accent: #CEEBFC
--card: #FFFFFF

Quando usar:

• Marcas de comida e bebida
• Sites de eventos e festivais
• Produtos de lifestyle e bem-estar
• Qualquer coisa que deva parecer calorosa e acolhedora

Por que funciona: O vermelho e o amarelo geram energia e apetite (literalmente: são cores de comida). O acento azul-claro refresca na medida certa.

Estratégia de fundo: O fundo creme (#FCFFE7) é mais suave que o branco puro, o que faz os vermelhos e amarelos saltarem sem ficar agressivos.

6. Lavender Dream

O neobrutalismo encontra a fantasia.

Copiar--background: #F9F5F2
--foreground: #000000
--primary: #C4A1FF
--primary-hover: #9678FF
--secondary: #E7F193
--accent: #FE91E9
--border: #000000
--card: #FFFFFF

Quando usar:

• Portfólios criativos
• Projetos de arte e ilustração
• Beleza e cosméticos
• Marcas da geração Z que buscam um toque descontraído

Por que funciona: O roxo-lavanda é ousado, mas não agressivo. Combinado com o amarelo-limão e o rosa magenta, cria uma paleta descontraída, quase de bala, que ainda assim mantém a estrutura neobrutalista.

Exemplo:

Copiar// Testimonial card with lavender accent
<div className="bg-[#C4A1FF] border-4 border-[#000000] shadow-[6px_6px_0_0_#000000] p-8">
  <p className="text-black font-bold text-lg">
    "This product changed my workflow completely!"
  </p>
  <div className="bg-[#E7F193] border-2 border-[#000000] inline-block px-4 py-2 mt-4">
    <span className="font-bold text-black">Sarah K., Designer</span>
  </div>
</div>

7. Orange Burst

Energia alta, calor máximo.

Copiar--background: #FFFFFF
--foreground: #000000
--primary: #F07200
--primary-hover: #FF8011
--secondary: #EF8C27
--accent: #FF6B6B
--border: #000000
--muted: #FFE1C7

Quando usar:

• Marcas de esporte e fitness
• Campanhas de verão
• Produtos focados em energia e ação
• Páginas cheias de chamadas à ação

Por que funciona: O laranja é subutilizado no design web, o que o torna distintivo na hora. Vários matizes de laranja criam profundidade sem precisar de mais cores.

8. Forest Fresh

Neobrutalismo terroso, quem diria?

Copiar--background: #FFFFFF
--foreground: #000000
--primary: #599D77
--primary-hover: #39654C
--secondary: #A3D9B1
--accent: #FFE75A
--border: #000000
--card: #F9F5F2

Quando usar:

• Marcas sustentáveis e ecológicas
• Saúde e bem-estar
• Produtos de ar livre e focados na natureza
• Quando você precisa de um neobrutalismo com os pés no chão

Por que funciona: O verde não precisa ser suave. Esta paleta usa verdes saturados de alto contraste, mantendo a estética brutal ao mesmo tempo que parece orgânica.

Particularidade: O fundo de card creme (#F9F5F2) traz um calor que o branco puro não daria.

Paletas experimentais e ousadas

Para designers que querem empurrar os limites.

9. Neon Midnight

O neobrutalismo em modo escuro na sua máxima expressão.

Copiar--background: #0F0F0F
--foreground: #F5F5F5
--primary: #00FF88
--secondary: #FF0066
--accent: #00D4FF
--border: #F5F5F5
--card: #1A1A1A

Quando usar:

• Plataformas de gaming
• Ferramentas de desenvolvimento e apps de programação
• Experiências em modo noturno
• Estéticas cyberpunk

Por que funciona: As cores neon sobre fundos escuros criam aquele ar de terminal/hacker. As bordas brancas em vez de pretas viram o jogo sem perder o contraste.

Dica de implementação:

Copiar// Dark background with neon accents
<div className="bg-[#0F0F0F] min-h-screen p-8">
  <h1 className="text-[#00FF88] text-7xl font-black
                 [-webkit-text-stroke:3px_#F5F5F5]">
    GAME ON
  </h1>
  <button className="bg-[#FF0066] text-[#F5F5F5] border-4 border-[#F5F5F5]
                     shadow-[6px_6px_0_0_#00D4FF]">
    Play Now
  </button>
</div>

10. Bubblegum Chaos

O maximalismo encontra o neobrutalismo.

Copiar--background: #FFF5F8
--foreground: #000000
--primary: #FF3FE0
--secondary: #00E5FF
--accent-1: #FFE600
--accent-2: #00FF94
--border: #000000
--card: #FFFFFF

Quando usar:

• Música e entretenimento
• Marcas de brinquedos e produtos para crianças
• Campanhas de marketing de vida curta
• Quando a sutileza seria um erro

Por que funciona: Quatro cores vibrantes soam a caos, mas as bordas pretas e os cards brancos o contêm. É a filosofia "mais é mais" do neobrutalismo levada ao seu extremo lógico.

Atenção: Esta paleta é BARULHENTA. Use apenas se a sua marca aguenta uma energia máxima.

11. Electric Violet

O poder do roxo com um toque moderno.

Copiar--background: #F5F5F5
--foreground: #1A1A1A
--primary: #7B6DF5
--primary-hover: #5F4FE6
--secondary: #FED13B
--border: #3A3A3A
--card: #FFFFFF
--muted: #CFCCEA

Quando usar:

• Produtos SaaS
• Apps de fintech
• Software criativo
• Ferramentas de produtividade modernas

Por que funciona: O roxo parece premium sem ser pretensioso. O amarelo secundário traz calor. Esta paleta transita com perfeição entre o profissional e o descontraído.

Variante em modo escuro:

Copiar--background: #0F0F12
--foreground: #F5F5F5
--primary: #7B6DF5
--card: #1A1A1D
--border: #2E2E32

12. Blood Orange

Agressiva e calorosa.

Copiar--background: #FFF8F0
--foreground: #000000
--primary: #FF4500
--secondary: #000000
--accent: #FFD700
--border: #000000
--card: #FFFFFF

Quando usar:

• Times esportivos
• Bebidas energéticas e marcas de comida ousadas
• Produtos orientados à ação
• Campanhas de Halloween ou outono

Por que funciona: O vermelho-alaranjado é enérgico e apetitoso. O acento dourado adiciona um toque premium. O preto secundário ancora esse calor.

Paletas brutais e sofisticadas

O neobrutalismo pode ser refinado. Aqui está a prova.

13. Teal & Coral

Cores complementares bem feitas.

Copiar--background: #FAFAFA
--foreground: #000000
--primary: #00BFA6
--secondary: #FF6B6B
--accent: #FFE66D
--border: #000000
--card: #FFFFFF

Quando usar:

• Apps de saúde e bem-estar
• Plataformas educacionais
• Marcas de lifestyle
• Quando você precisa de equilíbrio entre o enérgico e o relaxante

Por que funciona: O verde-azulado e o coral são complementares, o que cria um interesse visual natural. O acento amarelo adiciona uma terceira dimensão. Esta paleta parece fresca e moderna.

14. Indigo & Gold

Brutalismo de luxo.

Copiar--background: #F8F9FA
--foreground: #000000
--primary: #4B0082
--secondary: #FFD700
--accent: #FFFFFF
--border: #000000
--card: #FFFFFF

Quando usar:

• Produtos premium
• Moda de alto padrão
• Assinaturas exclusivas
• Quando o neobrutalismo precisa parecer caro

Por que funciona: O índigo profundo transmite qualidade e exclusividade. O ouro traz luxo. Juntos criam uma estética neobrutalista premium que se distingue das cores primárias de sempre.

15. Mint & Charcoal

Fresca e serena.

Copiar--background: #FFFFFF
--foreground: #2D3748
--primary: #48BB78
--secondary: #4A5568
--accent: #F6E05E
--border: #2D3748
--card: #F7FAFC

Quando usar:

• Finanças e bancos (edição neobrutalista)
• Serviços profissionais
• SaaS B2B
• Quando a confiança importa mas o entediante não é uma opção

Por que funciona: O verde-menta é ousado, mas não agressivo. O cinza-carvão em vez do preto puro suaviza um pouco a dureza sem perder o contraste.

Experimentais e antenadas

Estas são para os corajosos.

16. Dopamine Overload

Todas as cores. De uma vez.

Copiar--background: #FFFFFF
--foreground: #000000
--primary: #FF006E
--secondary: #8338EC
--accent-1: #FFBE0B
--accent-2: #00F5FF
--accent-3: #3A86FF
--border: #000000
--card: #FFFFFF

Quando usar:

• Festivais de música
• Apps e jogos para crianças
• Golpes de efeito de marketing
• Quando o "demais" é justamente o objetivo

Por que funciona (por pouco): Esta paleta quebra a regra dos "3 cores no máximo" de propósito. As bordas pretas e os fundos brancos contêm o caos. Use com moderação.

Dica de profissional: Atribua a cada cor um propósito específico:

Copiar// Each section gets its own accent
<section className="bg-[#FF006E]">Hero</section>
<section className="bg-[#8338EC]">Features</section>
<section className="bg-[#FFBE0B]">Pricing</section>
<section className="bg-[#00F5FF]">Testimonials</section>

17. Acid Wash

A nostalgia dos anos 90 encontra o brutalismo moderno.

Copiar--background: #E0F7FF
--foreground: #000000
--primary: #FF00FF
--secondary: #00FFFF
--accent: #FFFF00
--border: #000000
--card: #FFFFFF

Quando usar:

• Gaming retrô
• Estéticas vaporwave
• Marcas nostálgicas
• Qualquer coisa datada com ironia

Por que funciona: O magenta, o ciano e o amarelo puros evocam os gráficos de computador dos anos 90. O fundo azul-claro suaviza a intensidade.

18. Rust & Cream

Neobrutalismo industrial.

Copiar--background: #FFF9F0
--foreground: #2B1F1F
--primary: #C1502E
--secondary: #686463
--accent: #E8C547
--border: #2B1F1F
--card: #FFFFFF

Quando usar:

• Construção e indústria
• Marcas artesanais e feitas à mão
• Café e comida (clima terroso)
• Quando o neobrutalismo precisa de calor e textura

Por que funciona: O laranja-ferrugem e o creme criam uma sensação terrosa e orgânica. O marrom-escuro em vez do preto adiciona calor sem perder o contraste.

19. Cyber Grape

Roxo, mas em versão digital.

Copiar--background: #0D0221
--foreground: #F0F0F0
--primary: #8B5CF6
--secondary: #EC4899
--accent: #10B981
--border: #F0F0F0
--card: #1A0B2E

Quando usar:

• Criptomoedas e blockchain
• Produtos de IA e machine learning
• SaaS futuristas
• Experiências em modo escuro

Por que funciona: Um fundo roxo profundo com acentos vibrantes cria uma sensação high-tech. As bordas claras sobre fundo escuro viram o neobrutalismo tradicional sem perder a estrutura.

20. Sunshine & Shadow

Contraste máximo, cores mínimas.

Copiar--background: #FFFFFF
--foreground: #000000
--primary: #FFA500
--secondary: #000000
--accent: #FFFFFF
--border: #000000
--card: #FFF8DC

Quando usar:

• Quando você precisa de uma simplicidade brutal
• Sites com muita leitura
• Blogs e publicações
• Quando duas cores (mais o preto e o branco) bastam

Por que funciona: O laranja é a única cor. O preto e o branco fazem o trabalho pesado. Os cards creme adicionam um calor sutil. Esta paleta prova que menos pode ser mais, mesmo no neobrutalismo.

Como implementar essas paletas

Escolha a sua paleta favorita e coloque-a no seu CSS:

Para Tailwind CSS v4

Adicione ao seu styles.css:

Copiar@theme {
  --color-background: #FFFFFF;
  --color-foreground: #000000;
  --color-primary: #FFDB33;
  --color-secondary: #000000;
  --color-border: #000000;
  --color-card: #FFFFFF;
}
 
:root {
  --background: #FFFFFF;
  --foreground: #000000;
  --primary: #FFDB33;
  --border: #000000;
}

Depois use no seu markup:

Copiar<button className="bg-primary text-foreground border-4 border-border">
  Click Me
</button>

Para CSS comum

Defina variáveis CSS:

Copiar:root {
  --background: #FFFFFF;
  --foreground: #000000;
  --primary: #FFDB33;
  --border: #000000;
}
 
.btn-primary {
  background-color: var(--primary);
  color: var(--foreground);
  border: 4px solid var(--border);
  box-shadow: 6px 6px 0 0 var(--border);
}

Para React/Styled Components

Copiarexport const theme = {
  colors: {
    background: '#FFFFFF',
    foreground: '#000000',
    primary: '#FFDB33',
    border: '#000000',
  },
  shadows: {
    brutal: '6px 6px 0 0 #000000',
  },
}

Como escolher a paleta certa para o seu projeto

Ainda sufocado? Use esta árvore de decisão:

Se você está construindo um SaaS ou um produto de tecnologia: → Comece com Electric Yellow (#1) ou Electric Violet (#11)

Se você mira em criativos ou designers: → Experimente Lavender Dream (#6) ou Hot Pink Punch (#2)

Se você precisa de algo profissional mas ousado: → Use Mint & Charcoal (#15) ou Teal & Coral (#13)

Se a sua marca transborda energia: → Vá de Cyber Lime (#3) ou Orange Burst (#7)

Se você constrói em modo escuro: → Comece com Neon Midnight (#9) ou Cyber Grape (#19)

Se você quer jogar seguro: → Brutal Monochrome (#4) ou Sunshine & Shadow (#20)

Se você quer ser diferente: → Bubblegum Chaos (#10) ou Dopamine Overload (#16)

Combinações de cores a evitar

Nem toda cor ousada funciona no neobrutalismo. Aqui estão combinações que convém descartar:

1. Pastéis + bordas pretas O rosa suave (#FFB6C1) e o lavanda (#E6E6FA) não têm saturação suficiente. Brigam com a estrutura rígida.

2. Primárias demais Vermelho + azul + amarelo + verde + roxo = caos visual. Fique com 1 primária e 1 ou 2 secundárias no máximo.

3. Acentos de baixo contraste Amarelo-claro (#FFFFE0) sobre fundos brancos. Cinza (#808080) sobre branco. Se você aperta os olhos e não enxerga, não use.

4. Marrons apagados O marrom (#8B4513) pode funcionar (veja Rust & Cream), mas a maioria dos marrons parece orgânica demais para a energia geométrica do neobrutalismo.

5. Vários neons Rosa neon + verde neon + azul neon = enxaqueca. Escolha UM neon só e ancore-o com preto e branco.

Dicas de profissional para usar essas paletas

1. Comece em monocromático, adicione cor com estratégia

Construa primeiro a sua maquete em preto e branco. Depois adicione cor só onde você precisa de ênfase:

• os CTAs recebem a cor primária
• as seções importantes recebem a secundária
• todo o resto fica neutro

2. Aplique a regra 60-30-10

Mesmo no neobrutalismo, as proporções importam:

• 60% neutro (branco, preto, cinzas)
• 30% cor primária
• 10% secundária/acento

3. Teste a acessibilidade

Passe a sua paleta por um verificador de contraste. Texto preto sobre amarelo? Costuma passar. Texto rosa sobre branco? Muitas vezes não.

Ferramenta: use o WebAIM Contrast Checker

4. Crie estados de hover

Reduza a saturação ou escureça a sua cor primária para o hover:

Copiar--primary: #FFDB33;
--primary-hover: #FFCC00; /* Slightly darker */

5. Não esqueça o modo escuro

A maioria dessas paletas tem variantes em modo escuro. Basta inverter os fundos e ajustar o brilho:

Copiar/* Light mode */
--background: #FFFFFF;
--foreground: #000000;
--primary: #FFDB33;
 
/* Dark mode */
.dark {
  --background: #1A1A1A;
  --foreground: #F5F5F5;
  --primary: #FFDB33; /* Often stays the same */
}

Baixe todas as paletas

Quer as 20 paletas em um formato pronto para usar?

Configuração de Tailwind: As 20 paletas como configurações de tema do Tailwind → Baixar JSON

Variáveis CSS: As 20 paletas como conjuntos de variáveis CSS → Baixar CSS

Figma: As 20 paletas como estilos de cor do Figma → Obter o arquivo do Figma

Considerações finais

A cor é subjetiva, mas a cor neobrutalista não é complicada:

A fórmula:

1. Comece pelo preto e o branco (inegociável)
2. Escolha UMA cor primária ousada (amarelo, rosa, lima, laranja, roxo)
3. Adicione UM acento secundário se precisar (opcional)
4. Use com moderação: deixe o preto e o branco fazerem o trabalho

As paletas deste guia cobrem de tudo, desde opções iniciais seguras (Electric Yellow, Brutal Monochrome) até loucuras experimentais (Bubblegum Chaos, Dopamine Overload).

Comece com uma. Use. Ajuste. Faça sua.

E lembre-se: a melhor paleta neobrutalista é aquela com a qual você se compromete. Meias medidas não funcionam nesta estética. Ou vai grande, ou vai para casa.

Agora escolha as suas cores e construa algo impossível de ignorar. 🎨

Usa o Neobrutalism? Estas paletas já vêm integradas na biblioteca. Basta trocar o tema e pronto → neobrutalism.com

Quer mais? Deixe um comentário com a sua paleta favorita ou compartilhe as suas próprias combinações de cores brutais.