자바스크립트 랜덤 색상값 만들기

자바스크립트에서 랜덤 컬러값을 가져오는 함수를 만들어보자.

 

색상값은 rgb 혹은 hash값을 주로 사용하는데 내가 작성한 함수는 해쉬값을 랜덤으로 가져오는 함수이다.

// 랜덤 컬러 생성
const setRandomColor = () => {
	const randomColor = Math.floor(Math.random()*16777215).toString(16);
	setPreview('bg-color', '#' + randomColor)
}

 

 

1. Math.random()은 0 이상 1 미만의 난수를 생성
2. hex 컬러의  FFFFFF에 해당하는 숫자 16777215를 곱한다. 
3. Math.floor()를 사용 소수점 이하를 제거하고 정수로 만든다.
4. 0부터 16777214 사이의 랜덤한 숫자를 만들고나면 이걸 .toString(16)을 사용해서 16진수로 바꾼다.
5. #을 붙여서 컬러 코드로 바꿔준다!! 

 

rgb 컬러를 사용할 경우 각각의 red, green, blue 값에 대해 0 부터 255 까지 랜덤으로 생성하고 rgb(0,0,255) 와 같은 형태로 구현하면 된다. 끗...~~