javascript - texto - font color html

Crear un color hexadecimal basado en una cadena con JavaScript

Question

Quiero crear una función que acepte cualquier cadena antigua (generalmente será una sola palabra) y de ahí de alguna manera generar un valor hexadecimal entre #000000 y #FFFFFF , por lo que puedo usarlo como un color para un elemento HTML.

Tal vez incluso un valor hexadecimal hexadecimal (por ejemplo: #FFF ) si eso es menos complicado. De hecho, un color de una paleta ''web-safe'' sería ideal.

Answer 1

Acabo de crear una función que se ajusta a la factura en Please.js, todavía no está fusionada con el repositorio principal, pero puedes verla aquí:

https://github.com/ibarrajo/PleaseJS

Puede asignar la cadena a un color como ese:

var color = Please.make_color({from_hash: ''any string goes here''});

"any string goes here" retornará como "#47291b"
y "another!" regresa como "#1f0c3d"

Answer 2

Aquí hay otro intento:

function stringToColor(str){
  var hash = 0;
  for(var i=0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 3) - hash);
  }
  var color = Math.abs(hash).toString(16).substring(0, 6);

  return "#" + ''000000''.substring(0, 6 - color.length) + color;
}

Answer 3

Aquí hay una adaptación de la respuesta de CD Sánchez que consistentemente devuelve un código de color de 6 dígitos:

var stringToColour = function(str) {
  var hash = 0;
  for (var i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }
  var colour = ''#'';
  for (var i = 0; i < 3; i++) {
    var value = (hash >> (i * 8)) & 0xFF;
    colour += (''00'' + value.toString(16)).substr(-2);
  }
  return colour;
}

Uso:

stringToColour("greenish");
// -> #9bc63b

Ejemplo:

http://jsfiddle.net/sUK45/

(Una solución alternativa / más simple podría implicar devolver un código de color de estilo ''rgb (...)''.)

Answer 4

Aquí hay una solución que surgió para generar colores pastel estéticamente agradables basados ​​en una cadena de entrada. Utiliza los dos primeros caracteres de la cadena como una semilla aleatoria, luego genera R / G / B en base a esa semilla.

Podría extenderse fácilmente para que la semilla sea el XOR de todos los caracteres en la cadena, en lugar de solo los dos primeros.

Inspirado por la respuesta de David Crow aquí: Algoritmo para generar aleatoriamente una paleta de colores estéticamente agradable

//magic to convert strings to a nice pastel colour based on first two chars
//
// every string with the same first two chars will generate the same pastel colour
function pastel_colour(input_str) {

    //TODO: adjust base colour values below based on theme
    var baseRed = 128;
    var baseGreen = 128;
    var baseBlue = 128;

    //lazy seeded random hack to get values from 0 - 256
    //for seed just take bitwise XOR of first two chars
    var seed = input_str.charCodeAt(0) ^ input_str.charCodeAt(1);
    var rand_1 = Math.abs((Math.sin(seed++) * 10000)) % 256;
    var rand_2 = Math.abs((Math.sin(seed++) * 10000)) % 256;
    var rand_3 = Math.abs((Math.sin(seed++) * 10000)) % 256;

    //build colour
    var red = Math.round((rand_1 + baseRed) / 2);
    var green = Math.round((rand_2 + baseGreen) / 2);
    var blue = Math.round((rand_3 + baseBlue) / 2);

    return { red: red, green: green, blue: blue };
}

GIST está aquí: https://gist.github.com/ro-sharp/49fd46a071a267d9e5dd

Answer 5

Encuentro que generar colores aleatorios tiende a crear colores que no tienen suficiente contraste para mi gusto. La forma más fácil que he encontrado para evitar eso es rellenar previamente una lista de colores muy diferentes. Para cada cadena nueva , asigne el siguiente color en la lista:

// Takes any string and converts it into a #RRGGBB color.
var StringToColor = (function(){
    var instance = null;

    return {
    next: function stringToColor(str) {
        if(instance === null) {
            instance = {};
            instance.stringToColorHash = {};
            instance.nextVeryDifferntColorIdx = 0;
            instance.veryDifferentColors = ["#000000","#00FF00","#0000FF","#FF0000","#01FFFE","#FFA6FE","#FFDB66","#006401","#010067","#95003A","#007DB5","#FF00F6","#FFEEE8","#774D00","#90FB92","#0076FF","#D5FF00","#FF937E","#6A826C","#FF029D","#FE8900","#7A4782","#7E2DD2","#85A900","#FF0056","#A42400","#00AE7E","#683D3B","#BDC6FF","#263400","#BDD393","#00B917","#9E008E","#001544","#C28C9F","#FF74A3","#01D0FF","#004754","#E56FFE","#788231","#0E4CA1","#91D0CB","#BE9970","#968AE8","#BB8800","#43002C","#DEFF74","#00FFC6","#FFE502","#620E00","#008F9C","#98FF52","#7544B1","#B500FF","#00FF78","#FF6E41","#005F39","#6B6882","#5FAD4E","#A75740","#A5FFD2","#FFB167","#009BFF","#E85EBE"];
        }

        if(!instance.stringToColorHash[str])
            instance.stringToColorHash[str] = instance.veryDifferentColors[instance.nextVeryDifferntColorIdx++];

            return instance.stringToColorHash[str];
        }
    }
})();

// Get a new color for each string
StringToColor.next("get first color");
StringToColor.next("get second color");

// Will return the same color as the first time
StringToColor.next("get first color");

Si bien esto tiene un límite de solo 64 colores, la mayoría de los humanos no pueden ver la diferencia después de eso de todos modos. Supongo que siempre puedes agregar más colores.

Si bien este código utiliza colores codificados, al menos se garantiza que durante el desarrollo se sepa exactamente cuánto contraste se verá entre los colores en producción.

La lista de colores se ha eliminado de esta respuesta SO , hay otras listas con más colores.

Answer 6

Esta función hace el truco. Es una adaptación de esta implementación, bastante más larga, este informe ...

const color = (str) => {
    let rgb = [];
    // Changing non-hexadecimal characters to 0
    str = [...str].map(c => (/[0-9A-Fa-f]/g.test(c)) ? c : 0).join('''');
    // Padding string with zeroes until it adds up to 3
    while (str.length % 3) str += ''0'';

    // Dividing string into 3 equally large arrays
    for (i = 0; i < str.length; i += str.length / 3)
        rgb.push(str.slice(i, i + str.length / 3));

    // Formatting a hex color from the first two letters of each portion
    return `#${rgb.map(string => string.slice(0, 2)).join('''')}`;
}

Answer 7

Otra solución para colores aleatorios:

function colorize(str) {
    for (var i = 0, hash = 0; i < str.length; hash = str.charCodeAt(i++) + ((hash << 5) - hash));
    color = Math.floor(Math.abs((Math.sin(hash) * 10000) % 1 * 16777216)).toString(16);
    return ''#'' + Array(6 - color.length + 1).join(''0'') + color;
}

Es una mezcla de cosas que hace el trabajo por mí. Usé la función JFreeman Hash (también una respuesta en este hilo) y la función pseudo aleatoria de Asykäri desde here y algunos rellenos y matemáticos de mí mismo.

Dudo que la función produzca colores distribuidos uniformemente, aunque se vea bien y eso haga lo que debería hacer.

Answer 8

Quería una riqueza de colores similar para los elementos HTML. Me sorprendió descubrir que CSS ahora admite colores hsl (), por lo que una solución completa para mí es la siguiente:

También vea ¿Cómo generar automáticamente N colores "distintos"? para más alternativas más similares a esto.

function colorByHashCode(value) {
    return "<span style=''color:" + value.getHashCode().intToHSL() + "''>" + value + "</span>";
}
String.prototype.getHashCode = function() {
    var hash = 0;
    if (this.length == 0) return hash;
    for (var i = 0; i < this.length; i++) {
        hash = this.charCodeAt(i) + ((hash << 5) - hash);
        hash = hash & hash; // Convert to 32bit integer
    }
    return hash;
};
Number.prototype.intToHSL = function() {
    var shortened = this % 360;
    return "hsl(" + shortened + ",100%,30%)";
};

En HSL es Hue, Saturation, Lightness. Así que el tono entre 0-359 obtendrá todos los colores, la saturación es la riqueza que desea el color, el 100% funciona para mí. Y la luminosidad determina la profundidad, el 50% es normal, el 25% es de colores oscuros, el 75% es de color pastel. Tengo 30% porque encaja mejor con mi esquema de color.

Answer 9

Si sus entradas no son lo suficientemente diferentes para que un hash simple use todo el espectro de color, puede usar un generador de números aleatorios en lugar de una función de hash.

Estoy usando el codificador de color de la respuesta de Joe Freeman y el generador de números aleatorios de David Bau .

function stringToColour(str) {
    Math.seedrandom(str);
    var rand = Math.random() * Math.pow(255,3);
    Math.seedrandom(); // don''t leave a non-random seed in the generator
    for (var i = 0, colour = "#"; i < 3; colour += ("00" + ((rand >> i++ * 8) & 0xFF).toString(16)).slice(-2));
    return colour;
}

Answer 10

Simplemente transfiriendo Java desde el código de color hexadecimal de Compute para una cadena arbitraria a Javascript:

function hashCode(str) { // java String#hashCode
    var hash = 0;
    for (var i = 0; i < str.length; i++) {
       hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }
    return hash;
} 

function intToRGB(i){
    var c = (i & 0x00FFFFFF)
        .toString(16)
        .toUpperCase();

    return "00000".substring(0, 6 - c.length) + c;
}

Para convertir, harías:

intToRGB(hashCode(your_string))

Answer 11

Usando hashCode como en la respuesta de Cristian Sánchez con hsl y javascript moderno, puedes crear un selector de color con un buen contraste como este:

function hashCode(str) {
  let hash = 0;
  for (var i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }
  return hash;
}

function pickColor(str) {
  return `hsl(${hashCode(str) % 360}, 100%, 80%)`;
}

one.style.backgroundColor = pickColor(one.innerText)
two.style.backgroundColor = pickColor(two.innerText)

div {
  padding: 10px;
}

<div id="one">One</div>
<div id="two">Two</div>

Como es hsl, puede escalar la luminancia para obtener el contraste que está buscando.

function hashCode(str) {
  let hash = 0;
  for (var i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }
  return hash;
}

function pickColor(str) {
  // Note the last value here is now 50% instead of 80%
  return `hsl(${hashCode(str) % 360}, 100%, 50%)`;
}

one.style.backgroundColor = pickColor(one.innerText)
two.style.backgroundColor = pickColor(two.innerText)

div {
  color: white;
  padding: 10px;
}

<div id="one">One</div>
<div id="two">Two</div>