DEV Community

blanco
blanco

Posted on

I reverse-engineered Discord's profile banner color blend (and built a tool around it)

The problem

Discord Nitro lets you set a profile theme color. Simple enough — except the banner Discord actually shows you isn't the hex you picked. It's blended roughly 40% toward black or white depending on the color's brightness, and there's no documentation on the exact formula and no in-client preview.

So people were doing the obvious thing: pick a color, upload, check, adjust, re-upload, repeat.

Figuring out the blend

I sampled a range of theme colors against their rendered banners and worked backward to the blend ratio and direction (toward black for brighter colors, toward white for darker ones, roughly a 40% mix). Once I had that matched, the rest was just wrapping it in something usable.

What I built

A small browser tool:

  • Paste a hex → see the real banner color live
  • Pull a color suggestion from an avatar
  • Look up a user ID against public bot data
  • Download a matched solid PNG banner

React + Vite frontend, no backend accounts, self-hosted on a small VPS. No signup, no paywall.

Try it: https://blancodagoat.dev/discord/

Would love feedback, especially from anyone who's dealt with reverse-engineering undocumented platform behavior before — curious how close my approximation is to Discord's actual formula.

Top comments (1)

Collapse
 
frank_signorini profile image
Frank

How did you handle edge cases where the user's theme color is very dark or very light, and the blended color becomes hard to read? I'd love to swap ideas on this, been struggling with similar issues in my own projects.