20 paletas de colores neobrutalistas con códigos hex (listas para copiar y pegar)

Seamos sinceros: elegir los colores de un diseño neobrutalista puede resultar abrumador.

Sabes que necesitas colores atrevidos y de alto contraste. ¿Pero cuáles? ¿Cuántos? ¿Y cuáles combinan entre sí sin parecer un proyecto de manualidades de guardería salido mal?

He construido docenas de sitios neobrutalistas, y es en la elección del color donde la mayoría de la gente se atasca. Así que te entrego 20 paletas de colores listas para usar, cada una con sus códigos hex exactos, sus pautas de uso y su contexto real.

Nada de teoría. Nada de sermones sobre el círculo cromático. Solo copia los códigos hex y ponte a construir.

Entremos en materia.

Cómo usar estas paletas

Antes de llegar a los colores, así hay que pensar los sistemas cromáticos neobrutalistas:

Estructura de una paleta neobrutalista:

• Base: negro o muy oscuro (para bordes, texto, sombras)
• Fondo: blanco o muy claro (para tarjetas, fondo principal)
• Primario: tu color de acento principal (CTA, encabezados, énfasis)
• Secundario: acento de apoyo (normalmente 1 o 2 colores más)
• Acentos: toques de color adicionales (opcional, con moderación)

Principios clave:

1. El alto contraste es obligatorio - el negro y el blanco deben anclar tu paleta
2. Saturación antes que sutileza - nada de pasteles, nada de tonos apagados (salvo en los fondos)
3. Limita los colores de acento - de 1 a 3 acentos vibrantes como máximo
4. No temas la audacia - si se siente demasiado seguro, no es lo bastante brutal

Ahora, vamos con las paletas.

Paletas neobrutalistas clásicas

Son las combinaciones atemporales que definen la estética.

1. Electric Yellow

La paleta neobrutalista original. Si solo aprendes una, que sea esta.

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

Cuándo usarla:

• Productos tech y SaaS
• Cualquier cosa que necesite atención y energía
• Tu primer proyecto neobrutalista

Por qué funciona: El amarillo sobre blanco ofrece la máxima visibilidad. Los bordes y el texto negros aportan la estructura. Si es la paleta por defecto de Neobrutalism, es por algo: es casi imposible de arruinar.

Ejemplo 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>

Ejemplo real: Gumroad usa una variación de esta paleta en toda su interfaz.

2. Hot Pink Punch

Para marcas con actitud y energía.

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

Cuándo usarla:

• Agencias creativas
• Marcas de moda y streetwear
• Productos orientados a los jóvenes
• Cualquier cosa anticorporativa

Por qué funciona: El rosa intenso exige atención. Combinado con cian crea un aire retrofuturista. El acento amarillo añade una tercera dimensión sin saturar.

Estrategia 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 visibilidad con un toque digital.

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

Cuándo usarla:

• Gaming y esports
• Startups tech
• Herramientas para desarrolladores
• Cualquier cosa futurista o digital-first

Por qué funciona: El verde lima grita «digital» mientras que el rosa magenta aporta el contraste. Esta paleta se siente como una ventana de terminal cruzada con un póster de rave.

Ejemplo:

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

Cuando quieres neobrutalismo sin el arcoíris.

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

Cuándo usarla:

• Neobrutalismo minimalista (sí, existe)
• Portafolios de arquitectura y diseño
• Cuando el color distraería del contenido
• Contextos profesionales que necesitan carácter

Por qué funciona: Demuestra que el neobrutalismo no va de color, sino de estructura. Bordes gruesos, sombras duras y tipografía contundente sostienen la estética sin un solo matiz.

Consejo de pro: Añade un acento sutil para los estados de hover:

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

Paletas vibrantes y enérgicas

Para marcas que no susurran.

5. Sunset Riot

La calidez se encuentra con la rebeldía.

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

Cuándo usarla:

• Marcas de comida y bebida
• Sitios de eventos y festivales
• Productos de lifestyle y bienestar
• Cualquier cosa que deba sentirse cálida y acogedora

Por qué funciona: El rojo y el amarillo generan energía y apetito (literalmente: son colores de comida). El acento azul claro refresca justo lo necesario.

Estrategia de fondo: El fondo crema (#FCFFE7) es más suave que el blanco puro, lo que hace resaltar los rojos y amarillos sin que resulten agresivos.

6. Lavender Dream

El neobrutalismo se encuentra con la fantasía.

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

Cuándo usarla:

• Portafolios creativos
• Proyectos de arte e ilustración
• Belleza y cosmética
• Marcas de la generación Z que buscan un toque desenfadado

Por qué funciona: El morado lavanda es atrevido pero no agresivo. Combinado con el amarillo lima y el rosa magenta, crea una paleta desenfadada, casi de golosina, que aun así mantiene la estructura neobrutalista.

Ejemplo:

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

Energía alta, calidez máxima.

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

Cuándo usarla:

• Marcas de deporte y fitness
• Campañas de verano
• Productos centrados en la energía y la acción
• Páginas cargadas de llamadas a la acción

Por qué funciona: El naranja está infrautilizado en el diseño web, lo que lo vuelve distintivo al instante. Varios matices de naranja crean profundidad sin necesitar más colores.

8. Forest Fresh

Neobrutalismo terroso, ¿quién lo diría?

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

Cuándo usarla:

• Marcas sostenibles y ecológicas
• Salud y bienestar
• Productos de aire libre y centrados en la naturaleza
• Cuando necesitas un neobrutalismo que se sienta con los pies en la tierra

Por qué funciona: El verde no tiene por qué ser suave. Esta paleta usa verdes saturados de alto contraste, manteniendo la estética brutal a la vez que se siente orgánica.

Particularidad: El fondo de tarjeta crema (#F9F5F2) aporta una calidez que el blanco puro no daría.

Paletas experimentales y atrevidas

Para diseñadores que quieren empujar los límites.

9. Neon Midnight

El neobrutalismo en modo oscuro en su máxima expresión.

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

Cuándo usarla:

• Plataformas de gaming
• Herramientas de desarrollo y apps de programación
• Experiencias en modo noche
• Estéticas cyberpunk

Por qué funciona: Los colores neón sobre fondos oscuros crean ese aire de terminal/hacker. Los bordes blancos en lugar de negros le dan la vuelta al guion sin perder el contraste.

Consejo de implementación:

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

El maximalismo se encuentra con el neobrutalismo.

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

Cuándo usarla:

• Música y entretenimiento
• Marcas de juguetes y productos para niños
• Campañas de marketing de vida corta
• Cuando la sutileza sería un error

Por qué funciona: Cuatro colores vibrantes suenan a caos, pero los bordes negros y las tarjetas blancas lo contienen. Es la filosofía «más es más» del neobrutalismo llevada a su extremo lógico.

Atención: Esta paleta es RUIDOSA. Úsala solo si tu marca aguanta una energía máxima.

11. Electric Violet

El poder del morado con un toque moderno.

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

Cuándo usarla:

• Productos SaaS
• Apps fintech
• Software creativo
• Herramientas de productividad modernas

Por qué funciona: El morado se siente premium sin ser pretencioso. El amarillo secundario aporta calidez. Esta paleta se mueve a la perfección entre lo profesional y lo desenfadado.

Variante en modo oscuro:

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

12. Blood Orange

Agresiva y cálida.

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

Cuándo usarla:

• Equipos deportivos
• Bebidas energéticas y marcas de comida atrevidas
• Productos orientados a la acción
• Campañas de Halloween u otoño

Por qué funciona: El rojo anaranjado es enérgico y apetitoso. El acento dorado añade un toque premium. El negro secundario ancla esa calidez.

Paletas brutales y sofisticadas

El neobrutalismo puede ser refinado. Aquí está la prueba.

13. Teal & Coral

Colores complementarios bien hechos.

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

Cuándo usarla:

• Apps de salud y bienestar
• Plataformas educativas
• Marcas de lifestyle
• Cuando necesitas equilibrio entre lo enérgico y lo relajante

Por qué funciona: El verde azulado y el coral son complementarios, lo que crea un interés visual natural. El acento amarillo añade una tercera dimensión. Esta paleta se siente fresca y moderna.

14. Indigo & Gold

Brutalismo de lujo.

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

Cuándo usarla:

• Productos premium
• Moda de alta gama
• Membresías exclusivas
• Cuando el neobrutalismo debe sentirse caro

Por qué funciona: El índigo profundo transmite calidad y exclusividad. El oro aporta lujo. Juntos crean una estética neobrutalista premium que se distingue de los colores primarios de siempre.

15. Mint & Charcoal

Fresca y serena.

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

Cuándo usarla:

• Finanzas y banca (edición neobrutalista)
• Servicios profesionales
• SaaS B2B
• Cuando la confianza importa pero lo aburrido no es una opción

Por qué funciona: El verde menta es atrevido pero no agresivo. El gris carbón en lugar del negro puro suaviza un poco la dureza sin perder el contraste.

Experimentales y a la última

Estas son para los valientes.

16. Dopamine Overload

Todos los colores. A la vez.

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

Cuándo usarla:

• Festivales de música
• Apps y juegos para niños
• Golpes de efecto de marketing
• Cuando el «demasiado» es justamente el objetivo

Por qué funciona (por los pelos): Esta paleta rompe la regla de los «3 colores máximo» a propósito. Los bordes negros y los fondos blancos contienen el caos. Úsala con moderación.

Consejo de pro: Asigna a cada color un propósito concreto:

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

La nostalgia de los 90 se encuentra con el brutalismo moderno.

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

Cuándo usarla:

• Gaming retro
• Estéticas vaporwave
• Marcas nostálgicas
• Cualquier cosa desfasada con ironía

Por qué funciona: El magenta, el cian y el amarillo puros evocan los gráficos de ordenador de los 90. El fondo azul claro suaviza la intensidad.

18. Rust & Cream

Neobrutalismo industrial.

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

Cuándo usarla:

• Construcción e industria
• Marcas artesanales y hechas a mano
• Café y comida (ambiente terroso)
• Cuando el neobrutalismo necesita calidez y textura

Por qué funciona: El naranja óxido y el crema crean una sensación terrosa y orgánica. El marrón oscuro en lugar del negro añade calidez sin perder el contraste.

19. Cyber Grape

Morado, pero en versión digital.

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

Cuándo usarla:

• Criptomonedas y blockchain
• Productos de IA y machine learning
• SaaS futuristas
• Experiencias en modo oscuro

Por qué funciona: Un fondo morado profundo con acentos vibrantes crea una sensación high-tech. Los bordes claros sobre fondo oscuro le dan la vuelta al neobrutalismo tradicional sin perder la estructura.

20. Sunshine & Shadow

Contraste máximo, colores mínimos.

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

Cuándo usarla:

• Cuando necesitas una simplicidad brutal
• Sitios con mucha lectura
• Blogs y publicaciones
• Cuando dos colores (más el negro y el blanco) bastan

Por qué funciona: El naranja es el único color. El negro y el blanco hacen el trabajo pesado. Las tarjetas crema añaden una calidez sutil. Esta paleta demuestra que menos puede ser más, incluso en el neobrutalismo.

Cómo implementar estas paletas

Elige tu paleta favorita y colócala en tu CSS:

Para Tailwind CSS v4

Añádelo a tu 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;
}

Luego úsalo en tu marcado:

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

Para CSS normal

Define variables 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',
  },
}

Cómo elegir la paleta adecuada para tu proyecto

¿Sigues abrumado? Usa este árbol de decisión:

Si estás construyendo un SaaS o un producto tech: → Empieza con Electric Yellow (#1) o Electric Violet (#11)

Si te diriges a creativos o diseñadores: → Prueba Lavender Dream (#6) o Hot Pink Punch (#2)

Si necesitas algo profesional pero atrevido: → Usa Mint & Charcoal (#15) o Teal & Coral (#13)

Si tu marca rebosa energía: → Opta por Cyber Lime (#3) o Orange Burst (#7)

Si construyes en modo oscuro: → Empieza con Neon Midnight (#9) o Cyber Grape (#19)

Si quieres jugar a lo seguro: → Brutal Monochrome (#4) o Sunshine & Shadow (#20)

Si quieres ser diferente: → Bubblegum Chaos (#10) o Dopamine Overload (#16)

Combinaciones de colores que evitar

No todo color atrevido funciona en el neobrutalismo. Aquí tienes combinaciones que conviene descartar:

1. Pasteles + bordes negros El rosa suave (#FFB6C1) y el lavanda (#E6E6FA) no tienen suficiente saturación. Chocan con la estructura rígida.

2. Demasiados primarios Rojo + azul + amarillo + verde + morado = caos visual. Cíñete a 1 primario y 1 o 2 secundarios como máximo.

3. Acentos de bajo contraste Amarillo claro (#FFFFE0) sobre fondos blancos. Gris (#808080) sobre blanco. Si entornas los ojos y no lo ves, no lo uses.

4. Marrones apagados El marrón (#8B4513) puede funcionar (mira Rust & Cream), pero la mayoría de los marrones se sienten demasiado orgánicos para la energía geométrica del neobrutalismo.

5. Varios neones Rosa neón + verde neón + azul neón = migraña. Elige UN solo neón y ánclalo con negro y blanco.

Consejos de pro para usar estas paletas

1. Empieza en monocromo, añade color con estrategia

Construye primero tu maqueta en blanco y negro. Luego añade color solo donde necesites énfasis:

• los CTA reciben el color primario
• las secciones importantes reciben el secundario
• todo lo demás se queda neutro

2. Aplica la regla 60-30-10

Incluso en el neobrutalismo, las proporciones importan:

• 60 % neutro (blanco, negro, grises)
• 30 % color primario
• 10 % secundario/acento

3. Prueba la accesibilidad

Pasa tu paleta por un verificador de contraste. ¿Texto negro sobre amarillo? Suele pasar. ¿Texto rosa sobre blanco? A menudo no.

Herramienta: usa el WebAIM Contrast Checker

4. Crea estados de hover

Reduce la saturación u oscurece tu color primario para el hover:

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

5. No olvides el modo oscuro

La mayoría de estas paletas tienen variantes en modo oscuro. Solo invierte los fondos y ajusta el brillo:

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

Descarga todas las paletas

¿Quieres las 20 paletas en un formato listo para usar?

Configuración de Tailwind: Las 20 paletas como configuraciones de tema de Tailwind → Descargar JSON

Variables CSS: Las 20 paletas como conjuntos de variables CSS → Descargar CSS

Figma: Las 20 paletas como estilos de color de Figma → Obtener el archivo de Figma

Reflexiones finales

El color es subjetivo, pero el color neobrutalista no tiene complicación:

La fórmula:

1. Empieza por el negro y el blanco (innegociable)
2. Elige UN color primario atrevido (amarillo, rosa, lima, naranja, morado)
3. Añade UN acento secundario si hace falta (opcional)
4. Úsalo con moderación: deja que el negro y el blanco hagan el trabajo

Las paletas de esta guía cubren de todo, desde opciones de inicio seguras (Electric Yellow, Brutal Monochrome) hasta locuras experimentales (Bubblegum Chaos, Dopamine Overload).

Empieza con una. Úsala. Ajústala. Hazla tuya.

Y recuerda: la mejor paleta neobrutalista es aquella con la que te comprometes. Las medias tintas no funcionan en esta estética. O a lo grande o a casa.

Ahora elige tus colores y construye algo imposible de ignorar. 🎨

¿Usas Neobrutalism? Estas paletas ya vienen integradas en la biblioteca. Solo cambia el tema y listo → neobrutalism.com

¿Quieres más? Deja un comentario con tu paleta favorita o comparte tus propias combinaciones de colores brutales.