몽땅뚝딱 개발자

[Javascript] 배경 밝기에 맞춰 컬러 조정하기 본문

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
})

 

Comments