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!

fn-ui-avatars

Stop random colors. Initials avatars with deterministic UI

Stop random colors. Initials avatars with deterministic UI