Angular Avatar Component | ng-hub-ui-avatar

The automatic palette, as it paints today

Eight names, one per palette slot. Each avatar writes black or white on the colour its name hashed to, and the first ratio below it is read back from the two colours the browser actually painted. The second is what white initials would have scored on that same colour — what the component forced before 22.14.0, and what six of these eight would still be doing.

Those six are stated rather than shown on purpose: a row of white-on-yellow initials would be a page about readable labels printing six unreadable ones. An explicit fgColor does still win, contrast or not — that is how you pin the old look, and the snippet below is all it takes.

A palette the library has never seen

#ffcc00, #cccccc and #004080 — three colours the library ships no knowledge of. An application hands them to provideAvatar({ colors }) once at bootstrap; this demo scopes the same palette to its own avatars so it does not repaint the rest of the page. Either way the ink is derived from whatever colour ends up behind the text, so the guarantee travels with the background rather than with a list of approved pairings.