Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Avatar: getAvatarColor collides on anagrams; add color seed + palette subset

Cerrado
  • ¿Algo no está bien?
#850 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 2 días

@Shreyag02 ya está trabajando en esto.

Desde el 1/10/2026.

  • #933 de @Shreyag02 — abierto

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
52/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
react, typescript
Área
design, frontend

Línea de trabajo

Comienza leyendo components/avatar/utils.tsx y siguiendo la ruta de color automático de Avatar. Confirma las decisiones de la API para una semilla de color opcional y un subconjunto de la paleta; después, verifica que el hash distinga los cambios de orden y conserve el comportamiento de fallback. El trabajo estará terminado cuando los colores automáticos admitan semillas independientes estables y paletas restringidas sin afectar al trabajo sobre colores explícitos descrito en #650.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Summary

getAvatarColor picks an avatar color from a name using a char-code sum, which collides on anagrams and clusters on similar strings. There is also no way to seed the color independently of the display name, and no way to restrict the palette to a subset. Consumers with a specific color language end up re-implementing the whole function.

The hashing bug

components/avatar/utils.tsx:

export function getAvatarColor(str: string): AVATAR_COLORS {
  const hash = str.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
  const index = hash % COLORS.length;
  return COLORS[index];
}

Summing char codes is order-insensitive, so any anagram maps to the same color — "Ravi" and "Vira", "Amy Lee" and "Ely Mae" collide. Names that differ by one adjacent-letter swap also collide, and sequences like "User 1" / "User 2" / "User 3" land on adjacent (often visually close) palette entries instead of spreading out.

A small change fixes the distribution — a polynomial (order-sensitive) hash:

let hash = 0;
for (let i = 0; i < str.length; i++) {
  hash = (hash * 31 + str.charCodeAt(i)) | 0;
}
const index = Math.abs(hash) % COLORS.length;

Two API gaps

1. No color seed. The color is derived from the string passed in — which is the display name — so a rename changes a person's color, and two people with the same name always share one. A separate, stable seed (e.g. an id) would keep colors stable across renames and distinct for namesakes. Suggest an optional colorSeed/seed prop on Avatar (falling back to the name today).

2. No palette subset. COLORS is a fixed 13-entry list including warm tones (orange, crimson, gold) and neutral. A product with a cooler or brand-restricted identity language can't say "only pick from these." Suggest letting getAvatarColor (and Avatar's auto-color) accept an optional palette subset.

Relationship to #650

#650 (item 3) proposes propagating an explicit color prop to Avatar. This issue is about the automatic color path — hash quality and seeding — which is orthogonal: even with an explicit-color prop, the auto-assigned fallback should distribute well and stay stable.

Willing to contribute

Happy to open a PR — the hash change alone is a one-liner, and the seed/palette props are additive.

Lenguaje dominante
TypeScript
Estrellas
69
Forks
13
Merge medio
3 d 15 h
PR fusionados (30 d)
24

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de raystack/apsara

Todos los issues de raystack/apsara

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.