Development/Javascript
[Javascript] 배경 밝기에 맞춰 컬러 조정하기
레오나르도 다빈츠
2022. 6. 27. 17:56
const getTextColorByBackgroundColor = (hexColor: string): string => {
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
// 색상 선택
const result = luma < 127.5 ? 'white' : 'black'
console.log(result)
return result // 글자색이
}
onMounted(() => {
getTextColorByBackgroundColor('#3563de') // white
getTextColorByBackgroundColor('#FFFFFF') // black
getTextColorByBackgroundColor('#FF6370') // black
getTextColorByBackgroundColor('#A5DBDB') // black
getTextColorByBackgroundColor('#161e33') // white
})