출처: 바로가기

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

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

색상에 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(검정)색일 때 luma0, #FFFFFF(흰색)일 때 luma254.99 이므로 0에 가까울 수록 배경색은 어둡고 255에 가까울수록 배경색은 밝은 색입니다. 상황에 따라 결정하면 될 것 같습니다.

문의 | 코멘트 또는 ayaysir0@naver.com

donaricano-btn
카테고리: WEB: Frontend

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다