배경색의 ‘어두움 정도’ 따라 텍스트의 색상 결정하기
페이지 정보
작성자 서방님 댓글 0건 조회 185회 작성일 21-03-26 14:38본문
예를 들어, 어두운 배경색에서는 밝은 글자색을 보여주고 싶고, 밝은 배경색은 어두운 글자색을 보여주고 싶다고 하겠습니다.
색상에 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에 가까울수록 배경색은 밝은 색입니다. 상황에 따라 결정하면 될 것 같습니다.
관련링크 (출처)
댓글목록
등록된 댓글이 없습니다.
