nielliesmons on Nostr: I needed a unique UI color for npubs that's actually readable / usable. I couldn't ...

I needed a unique UI color for npubs that's actually readable / usable.


I couldn't find any derivation scheme that gave me colors that work:
- Chat bubble profiles names
- Across themes (Light, Dark, Ivory, Gray, Sepia, ...)

So I thought up the absolute simplest thing that does work:

quoting
naddr1qv…8fyd

Colors as a fun and useful identifier

Nostr apps often use totally random colors for their default avatars, profiles names in chat bubbles, etc… That’s a missed opportunity. Why don’t we just we just derive a color from the npub and use that instead, interoperably across apps?

It gives us a fun and visual extra point of recognition, often without having to add anything extra to the UIs.

The only problem is that we cannot just allow for any color. The colors should be readable as text in Light and Dark modes and gray-scales should be avoided too.

This is the goal: Luckily, there’s a super simple solution.
(which was used to derive the colors above)

Deriving the Colors

You can find the simple spec here: naddr1qv…atyf

TLDR:

1. Convert HEX pubkey to Int
2. Calculate the Hue value: Int % 360
3. Set Saturation to 90 for Hues between 216 and 273, use 80 for the rest
4. Set Brightness to 65 for Hues between 32 and 212, use 85 for the rest

Convert HSB color to whatever format you need. Done.

Easy & Fun to integrate!