Skip to main content

How To Generate a Random Color in JavaScript


How To Generate a Random Color in JavaScript

Generating random colors in JavaScript is a common task in web development, often used to add dynamic and visually engaging elements to web pages. Whether you want to create a background that changes colors, highlight elements with random hues, or develop colorful visualizations, understanding how to generate random colors is essential.

JavaScript provides powerful tools like Math.random() and Math.floor() to create random values, which can be combined with the RGB or hexadecimal color models to produce unique color codes. This flexibility allows developers to implement randomness creatively, enhancing user experience and interactivity on web applications.


01. Method

const colorCodeHex = Math.floor(Math.random() * 16777215).toString(16);
document.body.style.backgroundColor = "#" + colorCodeHex;
console.log(colorCodeHex);

Output:

fd28c3
  • The Math.random() function generates a random decimal number between 0 (inclusive) and 1 (exclusive).
  • Multiplying this by 16777215 (the maximum value for a 6-digit hexadecimal color, equivalent to FFFFFF in hexadecimal) produces a random decimal number within the range of valid hexadecimal color codes.
  • Math.floor() is used to round this number down to the nearest integer, ensuring it's a valid whole number.
  • The .toString(16) method converts the decimal number into a hexadecimal string.
  • The resulting hexadecimal string is prefixed with "#" to form a valid CSS color code.
  • This color is then applied to the webpage's background using document.body.style.backgroundColor.
  • The generated color code is logged to the console, allowing you to see the exact color applied.

02. Method

var hexColorCode = (function generateHexColor(currentCode) {
  return (
    (currentCode += [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'][Math.floor(Math.random() * 16)]) &&
    (currentCode.length == 6) ? currentCode : generateHexColor(currentCode)
  );
})('');
document.body.style.backgroundColor = "#" + hexColorCode;
console.log(hexColorCode);

Output:

d4f53d
  • The function generateHexColor() is defined and immediately invoked as an IIFE (Immediately Invoked Function Expression) with an initial empty string '' as its argument.
  • The function generates a random hexadecimal digit by selecting a value from the array [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']. It uses Math.random() to produce a random number between 0 and 1 and multiplies it by 16 to map it to the array's indices. The result is rounded down using Math.floor().
  • The selected hexadecimal digit is appended to the currentCode string, which accumulates the randomly generated digits.
  • A conditional expression checks if the length of currentCode equals 6 (i.e., the length of a valid hexadecimal color code). If true, the function returns currentCode. Otherwise, it recursively calls itself to generate more digits until the string length reaches 6.
  • The result of the function, a 6-digit hexadecimal color code, is stored in the variable hexColorCode.
  • The background color of the webpage is updated using document.body.style.backgroundColor, with the generated color prefixed by "#" to form a valid CSS color code.
  • The generated color code is logged to the console using console.log(hexColorCode), allowing you to see the exact value applied to the background.

03. Method

hexColorCode = (function generateHexColor(mathUtil, hexChars, remainingLength) {
  return (remainingLength 
    ? generateHexColor(mathUtil, hexChars, remainingLength - 1) 
    : '#') + hexChars[mathUtil.floor(mathUtil.random() * hexChars.length)];
})(Math, '0123456789ABCDEF', 5);
document.body.style.backgroundColor = hexColorCode;
console.log(hexColorCode);

Output:

#A4053E
  • The code defines a self-invoking function generateHexColor() as an IIFE (Immediately Invoked Function Expression), which generates a random hexadecimal color code.
  • The function takes three arguments:
    • mathUtil: A reference to the Math object for utility methods.
    • hexChars: A string containing all valid hexadecimal characters ('0123456789ABCDEF').
    • remainingLength: The number of characters left to generate for the hexadecimal color code.
  • If remainingLength is non-zero, the function recursively calls itself with remainingLength - 1, reducing the characters left to generate.
  • Once remainingLength reaches 0, the recursion stops, and the function starts returning '#', which serves as the prefix for the hexadecimal color code.
  • In each recursive call, a random character from hexChars is selected using mathUtil.random() to generate a random number between 0 and 1, multiplied by the length of hexChars, and rounded down with mathUtil.floor().
  • The selected character is concatenated to the result of the recursive call, progressively building the final color code.
  • The generated hexadecimal color code is stored in the variable hexColorCode.
  • The webpage's background is updated to the generated color using document.body.style.backgroundColor.
  • The generated color code is logged to the console with console.log(hexColorCode), allowing you to see the applied value.

Comments