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

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

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

 

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

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"			// 글자색이
}

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