Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 커스텀
- 리액트
- JS console
- React Native
- React.js
- 티스토리꾸미기
- returnType
- 공통컴포넌트
- 제네릭
- 2022
- const 단언문
- 반복줄이기
- vue.js
- NonNullable
- react
- 타입스크립트
- reactjs
- 타입좁히기
- 성능최적화
- TSDoc
- 개발콘텐츠
- click and drag
- CSS
- javascript
- utilty type
- Chart.js
- 누구나 자료구조와 알고리즘
- 레이아웃쪼개기
- typescript
- 폰트적용하기
Archives
- Today
- Total
몽땅뚝딱 개발자
[Javascript] 배경 밝기에 맞춰 컬러 조정하기 본문
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
})
'Development > Javascript' 카테고리의 다른 글
[Javascript] 세자리마다 콤마(,) 붙이기 / 정규식 (0) | 2022.08.20 |
---|---|
[Javascript/ES6+] 전개연산자 / ... (0) | 2022.08.20 |
[Javascript] 데이터셋(dataset) (0) | 2022.05.22 |
Node.js란 (0) | 2022.05.11 |
[Javascript] Array / 배열의 내장 함수 (0) | 2022.02.21 |
Comments