fn-ui-avatars - Stop random colors. Initials avatars with deterministic UI
by•
A lightweight, zero-dependency library and React wrapper to generate consistent, colorful initials avatars with Smart Contrast using the UI-Avatars API.
Replies
Best
Maker
📌
Hello!
I'm Fábio, and I've been a software engineer for over 10 years, mostly focused on the backend and .NET ecosystem. Recently, I’ve been exploring frontend development and decided to tackle a small but real UI frustration I noticed in many web applications.
The Problem:
When building user lists, many developers rely on initials avatar APIs using `background=random`. The result? A chaotic UI where the same user gets a totally different color on every single render or device. If you avoid randomness, everyone gets a boring gray background. To top it off, text color contrast is rarely accessible.
The Solution:
I built fn-ui-avatars — a lightweight, zero-dependency ecosystem (Vanilla JS core + React wrapper component).
By using a quick djb2 hashing algorithm, it guarantees:
Absolute consistency: The same name always yields the exact same background color across devices.
Smart Contrast: It automatically calculates background YIQ luminance to flip the text between black and white for perfect WCAG accessibility.
Zero overhead: No state or database required.
I’ve deployed a live interactive playground so you can see it in action! I would absolutely love to get your feedback on the API design, code, or any features you think are missing. It’s fully open-source and ready for contributors.
Thank you for checking it out!
Replies