Visual hash

Avatar

• https://boringavatars.com/ ↗
• https://github.com/drhus/awesome-identicons ↗
  • https://github.com/Debrief-BC/hash-avataaars ↗
  • https://github.com/download13/blockies ↗
  • https://github.com/Zapper-fi/opepen-standard ↗
• https://dl.acm.org/doi/10.5555/3489212.3489338 ↗
• https://github.com/microlinkhq/unavatar ↗

Gradient

• https://www.markmiro.com/projects/hash-gradient ↗
• https://github.com/vercel/avatar/blob/main/pages/api/avatar/%5Bname%5D.tsx ↗

Color

• https://www.npmjs.com/package/color-hash ↗

Related

Dominant color

const context = document.createElement("canvas").getContext("2d");
context.drawImage(imageObject, 0, 0, 1, 1);
const i = context.getImageData(0, 0, 1, 1).data;

const rgba = `rgba(${i[0]},${i[1]},${i[2]},${i[3]})`;
// OR
const HEX =
  "#" + ((1 << 24) + (i[0] << 16) + (i[1] << 8) + i[2]).toString(16).slice(1);

source ↗

Other: color-thief ↗