hash - google - html color hexadecimal rgb

Hash string en color RGB

Question

¿Existe una mejor práctica sobre cómo hash una cadena arbitraria en un valor de color RGB? O para ser más general: a 3 bytes.

Usted está preguntando: ¿Cuándo necesitaré esto alguna vez? No me importa, pero imagine esos gráficos de tubos en cualquier página de red de GitHub. Ahí puedes ver algo como esto:

Donde cada línea coloreada significa una rama distinta de git. El enfoque de baja tecnología para colorear estas ramas sería un CLUT (tabla de búsqueda de colores). La versión más sofisticada sería:

$branchColor = hashStringToColor(concat($username,$branchname));

Porque quiere un color estático cada vez que ve la representación de ramas. Y para los puntos de bonificación: ¿cómo se asegura una distribución uniforme del color de esa función hash?

Entonces, la respuesta a mi pregunta se reduce a la implementación de hashStringToColor() .

Answer 1

Acabo de crear una biblioteca de JavaScript llamada color-hash, que puede generar color en función de la cadena dada (utilizando el espacio de color HSL y BKDRHash).

Repo: https://github.com/zenozeng/color-hash
Demostración: https://zenozeng.github.io/color-hash/demo/

Answer 2

Como ejemplo, así es como Java calcula el código de hash de una cadena (línea 1494 y siguientes). Devuelve un int . A continuación, puede calcular el módulo de ese int con 16.777.216 (2 ^ 24 = 3 bytes) para obtener un número "compatible con RGB".

Es un cálculo determinista por lo que la (s) misma (s) palabra (s) siempre tendrán el mismo color. La probabilidad de colisión hash (2 cadenas que tienen el mismo color) es pequeña. No estoy seguro sobre la distribución del color, pero probablemente bastante al azar.

Answer 3

Para cualquier usuario de Javascript que haya, combiné la respuesta aceptada de @ jeff-foster con la función hash erlycoder de erlycoder .

El resultado por la pregunta:

function djb2(str){
  var hash = 5381;
  for (var i = 0; i < str.length; i++) {
    hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */
  }
  return hash;
}

function hashStringToColor(str) {
  var hash = djb2(str);
  var r = (hash & 0xFF0000) >> 16;
  var g = (hash & 0x00FF00) >> 8;
  var b = hash & 0x0000FF;
  return "#" + ("0" + r.toString(16)).substr(-2) + ("0" + g.toString(16)).substr(-2) + ("0" + b.toString(16)).substr(-2);
}

ACTUALIZACIÓN : Se corrigió la cadena de retorno para devolver siempre una cadena hexadecimal de formato # 000000 basada en una edición de @alexc (¡gracias!).

Answer 4

Probé todas las soluciones que otros proporcionaron pero descubrí que cadenas similares (cadena1 frente a cadena2) producen colores que son demasiado similares para mi gusto. Por lo tanto, construí el mío influenciado por la información y las ideas de los demás.

Éste calculará la suma de comprobación MD5 de la cadena y tomará los primeros 6 dígitos hexadecimales para definir el código RGB de 24 bits.

La funcionalidad MD5 es un plug-in JQuery de código abierto. La función JS es la siguiente:

function getRGB(str){
    var hash = $.md5(str);
    var rgb = ''#'' + hash.substring(0,2) + hash.substring(2,4) + hash.substring(4,6);
    return rgb;
}

Un enlace a este ejemplo de trabajo está en jsFiddle . Simplemente ingrese una cadena en el campo de entrada y presione enter, y repita una y otra vez para comparar sus hallazgos.

Answer 5

Una buena función hash proporcionará una distribución casi uniforme sobre el espacio clave. Esto reduce la pregunta de cómo convierto un número aleatorio de 32 bits a un espacio RGB de 3 bytes. No veo nada malo con solo tomar los 3 bytes bajos.

int hash = string.getHashCode();
int r = (hash & 0xFF0000) >> 16;
int g = (hash & 0x00FF00) >> 8;
int b = hash & 0x0000FF;