함수 구현 목적
여러 색을 랜덤 하게 뽑고 싶은데(차트 라인 별 색상 등) 너무 알록달록하여
밝은 색들만 랜덤하게 뽑고 싶어서 구현해 봤습니다.
구현 방법
랜덤하게 헥스 코드(#○○○○○○)로 반환하는 함수입니다.
헥스 코드는 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.
'WEB > javascript' 카테고리의 다른 글
[javascript]Date 객체 포맷 변환 (0) | 2022.04.07 |
---|---|
[javascript]checkbox 특정 개수 필수 선택 (0) | 2022.04.01 |
[javascript]Array(배열) 비우기 (0) | 2022.01.21 |
[javascript]Hoisting? (0) | 2022.01.10 |
checkbox type의 input 태그를 Array를 이용해 radio 효과 나타내기 (0) | 2021.09.30 |
댓글