프로그래밍/JS, Node.js

[typescript] 어두운 색깔인지 확인 (isDarkColor, HEX, RGB, tinycolor)

Lou Park 2022. 8. 14. 17:35
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