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

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.

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

slice() method → extracts a part of a string and returns it as a new string, without modifying the original string.

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)

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

slice() method extracts a part of a string and returns it as a new string, without modifying the original string.

syntax ↴

slice(start) return a new string from start index to end of string

slice(start, end) return a string from start index to end index of string (exclusive).

Return a new string from index 2 to end of string.

const str1 = "0.123456789";

str1.slice(2); start index is 2

returns ↴

"123456789"

Return a new string from index 2 to index 8 (exclusive).

const str2 = "0.123456789";

str2.slice(2, 8); start index is 2 end index is 8 (not included)

returns ↴

"123456" → string contains 6 characters

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

function randomColor() {}

The function returns a random hex color string.

Math.random() Generate a random number, greater than or equal to 0 and less than 1

toString(16) Convert number to a hexadecimal string.

slice(2, 8) Remove first two characters because they represent the 0 & . from the random number and ensure the string is 6 characters long.

Generate a random number, convert it to a hexadecimal string, and slice it to get 6 characters.

const randomColor = Math.random().toString(16).slice(2, 8) randomColor

Return the color code, prefixed with a # character.

return `#${randomColor}`

Generate random color.

function randomColor() {

const randomColor = Math.random().toString(16).slice(2, 8);

return `#${randomColor}`;

}

call function

randomColor(); → #ab4351

randomColor(); → #b48a2e

randomColor(); → #769e96

Function returns a random color after each call.

Generate random color

⇑