[CSS] HSL을 활용하여 채도와 명도가 같은 랜덤컬러 생성하기

랜덤 컬러를 생성하기 앞서 HSL을 알아보자

 

HSL

Hue (색조)

색조는 0에서 360까지의 색상값을 가진다.

0은 빨간색, 120은 녹색, 240은 파란색이다. (360은 빨간색)

*숫자만 기재

 

Saturation (채도)

채도는 백분율 값이다. 0%는 회색의 색조를 의미, 100%는 전체 색상이다.

*% 단위 필수

 

Lightness (명도)

명도는 백분율 값이다. 0%는 검은색, 100%는 흰색이다.

*% 단위 필수

 

HSL 문법

hsl(100, 100%, 50%) // #5f0
hsl(235, 100%, 50%, .5) // #0015ff with 50% opacity
hsl(235, 100%, 50%) // CSS Colors 4 space-seperated values

 

 

랜덤 컬러 생성 (채도, 명도 동일)

const colors = `hsl(${parseInt(Math.random() * 24, 10) * 15}, 16%, 57%)`

 

parseInt()

parseInt는 string을 정수로 변환한 값을 리턴한다.

만약, string의 첫 글자를 정수로 변경할 수 없으면 NaN(Not a Number) 값을 리턴한다.

parseInt(string, radix);

string
숫자로 변환할 문자열

radix (optional)
string 문자열을 읽을 진법 (수의 진법 체계의 진법)
2 ~ 36의 수

 

Math.random()

Math.random()는 0~1 (1은 미포함) 구간에서 부동소수점의 난수를 생성하는 함수이다.

 

 

 

결과물