본문 바로가기
WEB/javascript

[javascript]랜덤하게 밝은 색 코드 반환하기

by 김ㅋㅋㅋ 2022. 1. 26.

함수 구현 목적


여러 색을 랜덤 하게 뽑고 싶은데(차트 라인 별 색상 등) 너무 알록달록하여

밝은 색들만 랜덤하게 뽑고 싶어서 구현해 봤습니다.

 

 

 

 

구현 방법


랜덤하게 헥스 코드(#○○○○○○)로 반환하는 함수입니다.

 

헥스 코드는 16진수 6자리로 이루어져 있습니다. 

이중 2자리씩 앞에서 부터 R(빨강색)G(녹색)B(파란색)을 나타내며 00(0)~FF(255)까지 총 256단계로 각각의 색의 강도를 나타냅니다.

해당 색은 빛의 삼원색을 서로 더하는 가산혼합으로 3가지 색이 모두 0인 경우 #000000 검정, 모두 FF 인 경우 #FFFFFF로 흰색이 됩니다.

 

이처럼 각 색의 값의 합이 높을 수록 밝아지므로 모든 색상 값을 반 이상으로 랜덤 하게 뽑았습니다.
RGB 값이 128, 16진수로는 80 이상 255(FF) 이하로 랜덤하게 반환되도록 
Math.floor(Math.random() * 127 + 128). toString(16)을 이용하였습니다.

※ RGB 값이 1:1:1로 모두 동일하면 무채색(회색-#808080) ~ 흰색-#FFFFFF)이 나오게 되는데 무채색은 원하시지 않으면 예외로 빼시면 됩니다.

 

 

구현 코드


 

See the Pen Untitled by kjg20260 (@kjg20260) on CodePen.

 

댓글