generate random color
hex : hexadecimal
[ for loop | Math.random | Math.floor ]

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 ↴

for loop → executes a block of code a number of times.

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.


for loop repeatedly executes a block of code until a specified condition evaluates to false.

The loop runs a block of code a set number of times, defined by an initialization, a condition, and an increment.

for (let x = 0; x < 4; x++) {

console.log(x);

}

Loop variable x is initialized to 0

Condition x < 4 is checked before each iteration.

The loop will continue to run as long as x is less than 4

The loop repeatedly executes a block of code 4 times, from 0 to 3

For each iteration of the loop, the current value of x is printed to the console.

After each iteration, x is incremented by 1 x++

When x reaches 4 the condition evaluates to false, terminating the loop.

0

1

2

3 → printed to console


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.


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

function randomColor() {}

The function generates a random hexadecimal color code.

Initialize string containing all possible hexadecimal characters.

const letters = "0123456789ABCDEF" letters

Initialize the color string with a hash symbol #

let color = "#" color

Loop 6 times to create a six-character color code.

for (let x = 0; x < 6; x++) {}

Within the loop, a random index is generated to select a character from the letters string.

Append a random character from the letters string to the color string.

color += letters[Math.floor(Math.random() * 16)]

Return the generated color code.

return color


Generate random color.

function randomColor() {

const letters = "0123456789ABCDEF";

let color = "#";

for (let x = 0; x < 6; x++) {

color += letters[Math.floor(Math.random() * 16)];

}

return color;

}

call function

randomColor(); #ab4351

randomColor(); #b48a2e

randomColor(); #769e96

Function returns a random color after each call.

Generate random color