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

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

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

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

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

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

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

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 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

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

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

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

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

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

[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