Dopamine colors

Why bright color works

After years of safe, muted palettes, dopamine color is a deliberate jolt of joy. Saturated hues grab attention, feel optimistic and youthful, and make a brand instantly memorable — perfect for lifestyle, fashion, food, and Gen-Z brands.

The dopamine palette

Pick 4–5 highly saturated hues that energize each other. Define them as tokens so the whole UI sings in the same key.

:root {
  --pink: #ff5fa2; --yellow: #ffd000; --mint: #00d9a3;
  --blue: #3a86ff; --violet: #7b61ff; --orange: #ff7a00;
}
body { background: var(--yellow); color: #1d1d1f; }
.btn { background: var(--pink); color: #fff; }

Color blocking

Big, solid fields of color sitting right next to each other — no gradients, no images, just confident blocks.

<div class="blocks">
  <div class="big">Hello</div>
  <div>Bold</div><div>Bright</div><div>Joyful</div><div>!</div>
</div>

.blocks { display: grid; grid-template-columns: 2fr 1fr; grid-auto-rows: 80px; gap: 10px; }
.blocks > div { border-radius: 14px; display: grid; place-items: center; font-weight: 800; }
.blocks .big  { grid-row: span 2; }   /* one hero block */

Gradient mesh

Layer several soft radial gradients of different colors for that juicy, modern, multi-color glow — great for hero backgrounds.

.mesh {
  background:
    radial-gradient(circle at 15% 20%, #ff5fa2 0, transparent 40%),
    radial-gradient(circle at 85% 15%, #ffd000 0, transparent 40%),
    radial-gradient(circle at 70% 80%, #00d9a3 0, transparent 45%),
    radial-gradient(circle at 25% 85%, #3a86ff 0, transparent 45%),
    #f8f8f8;   /* base color shows through the gaps */
}

Candy buttons

Fully-rounded, saturated, playful. Use one color per action, or a two-color gradient for the star button.

.candy { border-radius: 999px; padding: 14px 28px; font-weight: 800; color: #fff; border: none; }
.candy.c1 { background: #ff5fa2; }
.candy.c2 { background: #ffd000; color: #5a4a00; }
.candy.c3 { background: #00d9a3; color: #054b3a; }
.candy.c4 { background: #7b61ff; }
.candy.grad { background: linear-gradient(135deg, #ff5fa2, #7b61ff); }

A whole page in this style

Here's everything assembled into one mini landing page — nav, hero, stats, feature cards with real photos, and a CTA — so you can see the dopamine aesthetic in context. Hover the cards.

FunFest LineupTicketsAboutGet tickets

The brightest weekend
of the year.

Three days of music, color, and pure good vibes. Grab your crew and go.

Buy passesSee lineup

3

days

60+

artists

20k

friends

Music

Main stage

Vibes

Color party

Art

Light show

Ready for the most fun you'll have all year?

Get your passes 🎉

© 2026 FunFestInstagram · Contact

<div class="page">
  <nav class="nav">…logo, links, button…</nav>
  <header class="hero">
    <h1>The brightest weekend of the year.</h1>
    <a class="btn primary">Buy passes</a><a class="btn ghost">See lineup</a>
  </header>
  <section class="stats">…3 numbers…</section>
  <section class="features">
    <article class="card"><img src="crowd.jpg" alt=""><h3>Main stage</h3></article>
  </section>
  <section class="cta">…</section>
  <footer>…</footer>
</div>

/* 1. mesh-gradient hero */
.hero { background:
  radial-gradient(circle at 15% 20%, #ff5fa2 0, transparent 42%),
  radial-gradient(circle at 85% 12%, #ffd000 0, transparent 42%),
  radial-gradient(circle at 72% 88%, #00d9a3 0, transparent 46%),
  radial-gradient(circle at 22% 92%, #3a86ff 0, transparent 46%), #fff; }

/* 2. pill buttons in saturated brand colors */
.btn { border-radius: 999px; font-weight: 800; padding: 12px 24px; }
.btn.primary { background: #7b61ff; color: #fff; }

/* 3. cards lift on hover */
.card { border-radius: 16px; overflow: hidden; transition: transform .2s; }
.card:hover { transform: translateY(-6px); }
.card img { width: 100%; height: 110px; object-fit: cover; }

/* 4. a loud gradient CTA band */
.cta { background: linear-gradient(135deg,#ff5fa2,#7b61ff); color: #fff; text-align: center; }

Characteristics & components

The signals that make a design read as dopamine-driven:

Bright, energetic colors Fun interactions Playful layouts

Components to build

A colorful card, an animated button, a playful hover, and a confetti burst — live first, then the code. Tap Celebrate:

<div class="card">Colorful card</div>
<button class="btn anim">Animated ★</button>
<div class="hoverable">Hover me</div>
<button id="confetti">Celebrate 🎉</button>

.card { background: linear-gradient(135deg,#ff5fa2,#7b61ff); color:#fff; border-radius:18px; padding:22px; }

/* animated button — a gentle wiggle */
@keyframes wiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-3deg)} 75%{transform:rotate(3deg)} }
.btn.anim:hover { animation: wiggle .4s ease; }

/* playful hover — lift + grow */
.hoverable { transition: transform .2s, box-shadow .2s; }
.hoverable:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 14px 30px rgba(0,217,163,.4); }

/* confetti piece */
.confetti { position: fixed; width: 10px; height: 10px; border-radius: 2px;
  animation: fall 1.2s ease-out forwards; }
@keyframes fall { to { transform: translateY(180px) rotate(360deg); opacity: 0; } }

const colors = ['#ff5fa2','#ffd000','#00d9a3','#3a86ff','#7b61ff'];
confetti.addEventListener('click', e => {
  for (let i = 0; i < 24; i++) {
    const p = document.createElement('div');
    p.className = 'confetti';
    p.style.left = e.clientX + 'px';
    p.style.top  = e.clientY + 'px';
    p.style.background = colors[i % colors.length];
    p.style.transform = `translateX(${(Math.random()-0.5)*200}px)`;
    document.body.appendChild(p);
    setTimeout(() => p.remove(), 1200);
  }
});

Do & don't

The takeaway

Dopamine color = a tight set of highly saturated, joyful hues used through color blocking, gradient meshes, and candy buttons. Lead with one color, keep contrast safe, give it space, and reuse the palette — bright on purpose, not chaotic.