Hi everyone,

I wanted to share a side project I've been working on recently: fn-ui-avatars.

The Problem

If you’ve ever built a dashboard, a chat application, or a simple user list, you’ve probably used initials-based avatar placeholders (like ui-avatars.com). They are great, but most developers end up setting background=random.

This creates a chaotic and messy UI because the exact same user changes colors on every single page render, framework mount, or device. If you try to avoid this by using a fixed color, then your entire user list looks like a boring, gray wall. On top of that, text contrast accessibility is rarely handled correctly out of the box.

The Solution

I built a lightweight, open-source ecosystem (Vanilla JS core library + official React wrapper) that completely solves this without any database or backend state.

Here is how it works under the hood:

1. Deterministic Hashing: It passes the user's name through a fast djb2 bitwise algorithm to generate a unique integer, which is masked into a valid hex color. This means the exact same name will always yield the exact same color, across sessions and devices.
2. Smart Contrast: It analyzes the generated background using the YIQ luminance formula to automatically flip the text color between crisp white or black, making sure your app is always compliant with accessibility standards (WCAG).

Features

• Super Light: Zero third-party dependencies.
• Universal: Drop it via CDN in a legacy HTML site or import it natively into modern bundlers.
• Interactive Playground: I built a fully responsive demo app so you can type names and watch the contrast and colors map in real-time.

It’s 100% free, MIT licensed, and completely open source.

• Live Playground: https://fn-ui-avatars-docs.vercel.app/
• GitHub Repository: https://github.com/fnasciment0/fn-ui-avatars
• React users can check out the wrapper here: https://github.com/fnasciment0/fn-ui-avatars-react

I’d love to get your feedback on the live playground experience, the use case, or any feature requests you think would be useful (like native Vue/Svelte wrappers).

Let me know what you think!