JS: need a css color code based on a string

Question

I need a function to generate a CSS color based on a string with a range of min: #000000 and max: #FFFFFF. If the length or any of the characters in the input string changes, the function should return a different color (but it must always return the same color on the same string input).

For Example:

f("Reddit") ==>#FF0000

f("Smith") ==>#FFC0CB   

f("Smixh")==>#F008FF

f("Smith") ==>#FFC0CB

f("foo")==>#FF00FF

f("Reddit") ==>#FF0000

And so on. Any idea how to do that?

this depends COMPLETELY on what kind of qualities of the string that you want to affect the colour. ex. length of string means darker colour. — Justin McDonald
– Justin McDonald, Commented Dec 9, 2012 at 6:13
Are color dupes for different strings okay? Unique strings are impossible to guarantee without some rules governing the strings themselves. What's minimum/maximum characters for instance? — Erik Reppen
– Erik Reppen, Commented Dec 9, 2012 at 6:39

leif.gruenwoldt · Accepted Answer · 2015-10-07 18:44:48Z

15

I'd hash the string and use the first six characters of the hex checksum as your hex color code:

function color(string) {
    return '#' + md5(string).slice(0, 6);
}

Demo: http://jsfiddle.net/4PMnA/48/

edited Oct 7, 2015 at 18:44

leif.gruenwoldt

14.1k5 gold badges63 silver badges67 bronze badges

answered Dec 9, 2012 at 6:18

Blender

300k55 gold badges462 silver badges511 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1233508 Over a year ago

CRC32 might be a better (faster) option than MD5.

Stefaan Over a year ago

jsfiddle demo did not work anymore (problem loading md5 lib). Fixed version: jsfiddle.net/4PMnA/48

Collectives™ on Stack Overflow

JS: need a css color code based on a string

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related