Generate a random color from string in JavaScript

Today we’ll show you how to generate a random color from string in JavaScript. Here we will create a rgb color based on the first character of a string using JavaScript.

Why do we need it?

Sometimes we need to implement a functionality where we have to create an icon based on the user name. That icon contains the background color and first character of a string. Check the following image for your reference.

Function to create a random color

function getRandomColor(name) {
  // get first alphabet in upper case
  const firstAlphabet = name.charAt(0).toLowerCase();

  // get the ASCII code of the character
  const asciiCode = firstAlphabet.charCodeAt(0);

  // number that contains 3 times ASCII value of character -- unique for every alphabet
  const colorNum = asciiCode.toString() + asciiCode.toString() + asciiCode.toString();

  var num = Math.round(0xffffff * parseInt(colorNum));
  var r = num >> 16 & 255;
  var g = num >> 8 & 255;
  var b = num & 255;

  return {
    color: 'rgb(' + r + ', ' + g + ', ' + b + ', 0.3)',
    character: firstAlphabet.toUpperCase()
  };
}

Call a function

getRandomColor("Code");
// output: {color: "rgb(240, 189, 193, 0.3)", character: "C"}

getRandomColor("Premix")
// output: {color: "rgb(81, 78, 16, 0.3)", character: "P"}

In the above code, we need to pass the string as a parameter and with the help of the above code we are returning the color in rgb format and the first character of the string in uppercase.

That’s it for today.
Thank you for reading. Happy Coding!