Javascript로 색상 컬러에 대한 차이 구하기

예를 들어, 어두운 배경색에서는 밝은 글자색을 보여주고 싶고, 밝은 배경색은 어두운 글자색을 보여주고 싶다고 하겠습니다. 그런 조건에서 봤을 때 아래 예제는 글씨색이 눈에 잘 들어오지 않습니다.

어두운 배경색에는 아래처럼 밝은 글자색을 보여줘야 합니다.

 

색상에 16진수(예: #ffffff) 형태로 주어졌을 때 영상의 밝기차에 대한 정보(luma)를 결정하는 함수는 다음과 같습니다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<code> function getTextColorByBackgroundColor (hexColor) {     const c = hexColor.substring(1)                     // 색상 앞의 # 제거     const rgb = parseInt(c, 16)                         // rrggbb를 10진수로 변환     const r = (rgb >> 16) & 0xff              // red 추출     const g = (rgb >> 8) & 0xff               // green 추출     const b = (rgb >> 0) & 0xff               // blue 추출       const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b   // per ITU-R BT.709       // 색상 선택     return luma < 127.5 ? "white" : "black"          // 글자색이 } </code>

#000000(검정)색일 때 luma는 0, #FFFFFF(흰색)일 때 luma는 254.99 이므로 0에 가까울 수록 배경색은 어둡고 255에 가까울수록 배경색은 밝은 색입니다. 상황에 따라 결정하면 될 것 같습니다.