export default function isDarkColor(color: string) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
if (result == null) {
return false;
}
var rgb = {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
}
let hsp = Math.sqrt(
0.299 * (rgb.r * rgb.r) +
0.587 * (rgb.g * rgb.g) +
0.114 * (rgb.b * rgb.b)
);
return hsp <= 127.5;
}
// Usage
isDarkColor('#89E2D0');
배경색에 따라 글자 색상을 달리하고 싶을때 사용하면 된다. 흰 글자가 잘보이는 어두운 색상이면 True를 리턴한다.
저렇게 단순한 기능을하는 TS라이브러리가 안보여서... 아래 두 사이트 소스코드를 짬뽕해서 만들었다.
https://awik.io/determine-color-bright-dark-using-javascript/
https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
'프로그래밍 > JS, Node.js' 카테고리의 다른 글
[TypeScript] satisfies 연산자 알아보기 (0) | 2023.01.24 |
---|---|
CloudFlare KV로 앱 점검시간 관리하기 (1) | 2023.01.21 |
[Next.js] styled-components를 Client side 렌더링 이전에 적용시키기 (덜그덕 방지, Typescript) (0) | 2022.08.05 |
[Next.js] next/image 이미지 로딩이 너무 느릴때 (0) | 2022.08.05 |
[Next.js] MongoDB 연결하기 (next-connect, typescript) (0) | 2022.06.26 |