generate random color
hex : hexadecimal
[ Math.random | Math.floor | toString | padStart ]

Generate random color

Write a function that returns a random hex color code.

Hexadecimal numbers

Hexadecimal (hex) is a base-16 number system.

There are 16 possible digits used to represent numbers 0-15

0, 1, 2, 3, 4, 5, 6, 7, 8, 9 → decimal: base 10

0, 1, 2, 3, 4, 5, 6, 7, 8, 9 → hexadecimal: base 16

Numbers 0-9 remain the same ...

The decimal numbers 10-15 are represented by A-F in hex.

decimal  0 → 0 hex

decimal  1 → 1 hex

decimal  2 → 2 hex

decimal  3 → 3 hex

decimal  4 → 4 hex

decimal  5 → 5 hex

decimal  6 → 6 hex

decimal  7 → 7 hex

decimal  8 → 8 hex

decimal  9 → 9 hex

decimal 10 → A hex

decimal 11 → B hex

decimal 12 → C hex

decimal 13 → D hex

decimal 14 → E hex

decimal 15 → F hex

decimal 16 → 10 hex

decimal 17 → 11 hex

decimal 18 → 12 hex

↓

decimal 255 → FF hex

Hexadecimal color code

Hexadecimal color codes are six-digit codes that represent colors in the RGB color model.

They start with a hash symbol # followed by six characters, which can be numbers 0-9 or letters A-F upper or lower case.

A hexadecimal (hex) color code is a 6 symbol code made of up to three 2 symbol elements.

Each of the 2 symbol elements expresses a color value from ...

0 to 255 → decimal

00 to FF → hexadecimal

The format for a hexadecimal color code is #RRGGBB

The first two characters RR denote the intensity of the red color 00-FF

The next two characters GG denote the intensity of the green color 00-FF

The last two characters BB denote the intensity of the blue color 00-FF

The smallest value is #000000 which has a decimal equivalent of 0

The largest value is #FFFFFF which has a decimal equivalent of 16777215

#000000 → black

#FF0000 → red

#00FF00 → green

#0000FF → blue

#FFFFFF → white

Example ...

Generate random color ...

#ab4351 → random color ....

#b48a2e → random color ....

#769e96 → random color ....

Numbers are used to represent both integer and floating-point values.

Numbers are most commonly expressed in literal forms like 255 or 3.14159 ↴

let num1 = 5; → number

let num2 = 2.5; → number

let num3 = num1 + num2;

console.log(num3); returns ↴

7.5 → number

Generate random colors using ↴

Math.random() static method → returns a floating-point, pseudo-random number that's greater than or equal to 0 and less than 1.

Math.floor() static method → always rounds down and returns the largest integer less than or equal to a given number.

toString() method → returns returns the string representation of a number.

padStart() method → pads a string with another string (multiple times) until it reaches a given length.

Random number generation process of generating a number that is not predictable.

Math.random() static method returns a floating-point, pseudo-random number between 0 (inclusive) and 1 (exclusive), with approximately uniform distribution over that range, which can be scaled to a desired range.

Math.random() always returns a number lower than 1

Math.random(); → 0.7409774889800926

Math.random(); → 0.5533596609238658

Math.random(); → 0.26768267226253617

returns random numbers between 0 (inclusive) and 1 (exclusive)

Math.floor() static method always rounds down and returns the largest integer less than or equal to a given number.

Math.floor(5.25); → 5

Math.floor(2.99); → 2

Math.floor(6.55); → 6

rounds down and returns the largest integer less than or equal to a given number.

toString returns the string representation of a number.

syntax

toString()

toString(radix) optional

radix is an integer in the range 2 through 36 specifying the base to use for representing the number value. Defaults to 10.

const num = 15;

num.toString(); → "15" decimal

num.toString(2); → "1111" binary

num.toString(8); → "17" octal

num.toString(16); → "f" hexadecimal

padStart method pads a string with another string (multiple times) until it reaches a given length.

syntax

padStart(targetLength)

padStart(targetLength, padString)

targetLength length of the resulting string once the current str has been padded.

If the value is less than or equal to str.length, then str is returned as-is.

padString string to pad the current str with.

If padString is too long to stay within targetLength, it will be truncated from the end.

The default value is the space character.

const str = "abc";

str.padStart(10); → "       abc"

str.padStart(10, "0"); → "0000000abc"

str.padStart(10, "xyz"); → "xyzxyzxabc"

str.padStart(3, "X"); → "abc"

Define a function randomColor to generate a random color in hexadecimal color code.

function randomColor() {}

The function returns a random hex color string.

Generate a random number between 0 and 16777215 the decimal equivalent of FFFFFF in hex.

The expression ...

Math.random() * 16777215

produces a random number within the range of valid hexadecimal values.

Math.floor rounds down the generated number to the nearest whole number.

toString(16) converts the number into a hexadecimal string representation.

const randomColor = Math.floor(Math.random() * 16777215).toString(16) randomColor

padStart(6, "0") method ensures that the string is always six characters long, adding leading zeros if necessary.

Return the color code, ensuring it is 6 characters long, prefixed with a #

return `#${randomColor.padStart(6, "0")}`

Generate random color.

function randomColor() {

const randomColor = Math.floor(Math.random() * 16777215).toString(16);

return `#${randomColor.padStart(6, "0")}`;

}

call function

randomColor(); → #ab4351

randomColor(); → #b48a2e

randomColor(); → #769e96

Function returns a random color after each call.

Generate random color

⇑