Create a hexadecimal colour based on a string with JavaScript

Question

I want to create a function that will accept any old string  will usually be a single word  and from that somehow generate a hexadecimal value between  000000 and  FFFFFF  so I can use it as a colour for a HTML element    Maybe even a shorthand hex value  e g   FFF  if that s less complicated  In fact  a colour from a  web-safe  palette would be ideal

User · Answer

I find that generating random colors tends to create colors that do not have enough contrast for my taste. The easiest way I have found to get around that is to pre-populate a list of very different colors. For every new string, assign the next color in the list:

// 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");

While this has a limit to only 64 colors, I find most humans can't really tell the difference after that anyway. I suppose you could always add more colors.

While this code uses hard-coded colors, you are at least guaranteed to know during development exactly how much contrast you will see between colors in production.

Color list has been lifted from this SO answer, there are other lists with more colors.

User · Answer

I wanted similar richness in colors for HTML elements  I was surprised to find that CSS now supports hsl   colors  so a full solution for me is below   Also see How to automatically generate N  quot distinct quot  colors  for more alternatives more similar to this    x000D   x000D  function colorByHashCode value    x000D      return   lt span style  color     value getHashCode   intToHSL        gt     value     lt  span gt    x000D    x000D  String prototype getHashCode   function     x000D      var hash   0  x000D      if  this length    0  return hash  x000D      for  var i   0  i  lt  this length  i      x000D          hash   this charCodeAt i      hash  lt  lt  5  - hash   x000D          hash   hash  amp  hash     Convert to 32bit integer x000D        x000D      return hash  x000D     x000D  Number prototype intToHSL   function     x000D      var shortened   this   360  x000D      return  hsl     shortened     100  30     x000D     x000D   x000D  document body innerHTML     x000D     javascript   x000D     is   x000D     nice   x000D    map colorByHashCode  join   lt br  gt     x000D  span   x000D    font-size  50px  x000D    font-weight  800  x000D    x000D   x000D   x000D    In HSL its Hue  Saturation  Lightness   So the hue between 0-359 will get all colors  saturation is how rich you want the color  100  works for me   And Lightness determines the deepness  50  is normal  25  is dark colors  75  is pastel   I have 30  because it fit with my color scheme best

User · Answer

I have opened a pull request to Please js that allows generating a color from a hash   You can map the string to a color like so   const color   Please make color       from hash   any string goes here        For example   any string goes here  will return as   47291b  and  another   returns as   1f0c3d

User · Answer

Here s an adaptation of CD Sanchez  answer that consistently returns a 6-digit colour code   var stringToColour   function str      var hash   0    for  var i   0  i  lt  str length  i          hash   str charCodeAt i      hash  lt  lt  5  - hash         var colour          for  var i   0  i  lt  3  i          var value    hash  gt  gt   i   8    amp  0xFF      colour      00    value toString 16   substr -2         return colour      Usage   stringToColour  greenish       - gt   9bc63b   Example   http   jsfiddle net sUK45    An alternative simpler solution might involve returning an  rgb      -style colour code

User · Answer

Here s a solution I came up with to generate aesthetically pleasing pastel colours based on an input string  It uses the first two chars of the string as a random seed  then generates R G B based on that seed   It could be easily extended so that the seed is the XOR of all chars in the string  rather than just the first two   Inspired by David Crow s answer here  Algorithm to randomly generate an aesthetically-pleasing color palette    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 is here  https   gist github com ro-sharp 49fd46a071a267d9e5dd

User · Answer

Just porting over the Java from Compute hex color code for an arbitrary string to Javascript   function hashCode str       java String hashCode     var hash   0      for  var i   0  i  lt  str length  i             hash   str charCodeAt i      hash  lt  lt  5  - hash             return hash      function intToRGB i       var c    i  amp  0x00FFFFFF           toString 16           toUpperCase         return  00000  substring 0  6 - c length    c      To convert you would do   intToRGB hashCode your string

User · Answer

Using the hashCode as in Cristian Sanchez s answer with hsl and modern javascript  you can create a color picker with good contrast like this    x000D   x000D  function hashCode str    x000D    let hash   0  x000D    for  var i   0  i  lt  str length  i      x000D      hash   str charCodeAt i      hash  lt  lt  5  - hash   x000D      x000D    return hash  x000D    x000D   x000D  function pickColor str    x000D    return  hsl   hashCode str    360   100   80     x000D    x000D   x000D  one style backgroundColor   pickColor one innerText  x000D  two style backgroundColor   pickColor two innerText  x000D  div   x000D    padding  10px  x000D    x000D   lt div id  one  gt One lt  div gt  x000D   lt div id  two  gt Two lt  div gt  x000D   x000D   x000D    Since it s hsl  you can scale luminance to get the contrast you re looking for    x000D   x000D  function hashCode str    x000D    let hash   0  x000D    for  var i   0  i  lt  str length  i      x000D      hash   str charCodeAt i      hash  lt  lt  5  - hash   x000D      x000D    return hash  x000D    x000D   x000D  function pickColor str    x000D       Note the last value here is now 50  instead of 80  x000D    return  hsl   hashCode str    360   100   50     x000D    x000D   x000D  one style backgroundColor   pickColor one innerText  x000D  two style backgroundColor   pickColor two innerText  x000D  div   x000D    color  white  x000D    padding  10px  x000D    x000D   lt div id  one  gt One lt  div gt  x000D   lt div id  two  gt Two lt  div gt  x000D   x000D   x000D

User · Answer

I convert this for Java   Tanks for all   public static int getColorFromText String text                if text    null    text length    lt  1              return Color BLACK           int hash   0           for  int i   0  i  lt  text length    i                          hash   text charAt i      hash  lt  lt  5  - hash                      int c    hash  amp  0x00FFFFFF           c   c - 16777216           return c

User · Answer

This function does the trick  It s an adaptation of this  fairly longer implementation this repo     const color    str    gt        let rgb              Changing non-hexadecimal characters to 0     str       str  map c   gt     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  lt  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   gt  string slice 0  2   join

User · Answer

Here is another try   function stringToColor str     var hash   0    for var i 0  i  lt  str length  i          hash   str charCodeAt i      hash  lt  lt  3  - hash         var color   Math abs hash  toString 16  substring 0  6      return        000000  substring 0  6 - color length    color

User · Answer

If your inputs are not different enough for a simple hash to use the entire color spectrum  you can use a seeded random number generator instead of a hash function   I m using the color coder from Joe Freeman s answer  and David Bau s seeded random number generator   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  lt  3  colour      00      rand  gt  gt  i     8   amp  0xFF  toString 16   slice -2        return colour

User · Answer

Yet another solution for random colors   function colorize str        for  var i   0  hash   0  i  lt  str length  hash   str charCodeAt i        hash  lt  lt  5  - hash        color   Math floor Math abs  Math sin hash    10000    1   16777216   toString 16       return       Array 6 - color length   1  join  0     color      It s a mixed of things that does the job for me   I used  JFreeman Hash function  also an answer in this thread  and Asyk  ri pseudo random function from here and some padding and math from myself   I doubt the function produces evenly distributed colors  though it looks nice and does that what it should do

User · Answer

All you really need is a good hash function  On node  I just use  const crypto   require  crypto    function strToColor str        return       crypto createHash  md5   update str  digest  hex   substr 0  6

[javascript] Create a hexadecimal colour based on a string with JavaScript

Examples related to javascript

Examples related to string

Examples related to colors

Examples related to hex