[자바스크립트] hex, rgba, rgb, cmky 변환을 위한 color converter모듈

서비스 구현 중에 color의 값을 다양한 포멧으로 바꿔야할 경우가 생깁니다. 이런 경우를 위한 colorConverter를 만들고 간단히 활용하는 방법에 대해 알아보겠습니다.

color converter는 다양한 오픈소스로 존재하고 더 다양한 메소드를 지원합니다. 하지만 저는 4개만을 위한 color converter 모듈을 만들고 활용해보려고 합니다.

ColorConverter에 4가지 타입에 대한 값을 넣어주면 원하는 타입으로 변경하여 돌려줍니다.

<Logic>
4가지 타입의 color input -> rgba 로 변환 -> getTYPE 으로 원하는 타입으로 output

ColorConverter = {
    getRGB: function (color) {
        let rgba = this.__change(color);
        return `rgb(${rgba.r},${rgba.g},${rgba.b})`
    },

    getRGBA: function (color) {
        let rgba = this.__change(color);
        return `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})`
    },
    getHEX: function (color) {
        let rgba = this.__change(color);
        let toHex = function (string) {
            string = parseInt(string, 10).toString(16);
            string = (string.length === 1) ? "0" + string : string;
            return string;
        };
        let r = toHex(rgba.r);
        let g = toHex(rgba.g);
        let b = toHex(rgba.b);
        return `#${r}${g}${b}`;
    },
    getCMYK: function (color) {
        let rgba = this.__change(color);
        var c = 1 - (rgba.r / 255);
        var m = 1 - (rgba.g / 255);
        var y = 1 - (rgba.b / 255);     
        var k = Math.min(c, Math.min(m, y));
        
        c = (c - k) / (1 - k) * 100;
        m = (m - k) / (1 - k) * 100;
        y = (y - k) / (1 - k) * 100;
        k = k * 100;
        
        c = isNaN(c) ? 0 : Math.round(c);
        m = isNaN(m) ? 0 : Math.round(m);
        y = isNaN(y) ? 0 : Math.round(y);
        k = isNaN(k) ? 0 : Math.round(k);
        		

        let cmky = `cmyk(${c}%,${m}%,${y}%,${k}%)`;
        return cmky;
    },

    __change(color) {
        color = color.toLowerCase();
        if (color.includes('#')) {
            let hex = color.replace('#', '');
            let value = hex.match(/[a-f\d]/gi);
            if (value.length == 3) hex = value[0] + value[0] + value[1] + value[1] + value[2] + value[2];
            value = hex.match(/[a-f\d]{2}/gi);
            let r = parseInt(value[0], 16);
            let g = parseInt(value[1], 16);
            let b = parseInt(value[2], 16);
            let rgba = {
                r: r,
                g: g,
                b: b,
                a: 255
            }
            return rgba;
        }
        else if (color.includes('rgba')) {
            let r = color.split(',')[0].replace(/[^0-9]/g, "") ;
            let g = color.split(',')[1].replace(/[^0-9]/g, "") ;
            let b = color.split(',')[2].replace(/[^0-9]/g, "") ;
            let a = color.split(',')[3].replace(/[^0-9]/g, "") ;
            let rgba = {
                r: r,
                g: g,
                b: b,
                a: 255
            }
            return rgba;
        }
        else if (color.includes('rgb')) {
            let r = color.split(',')[0].replace(/[^0-9]/g, "") ;
            let g = color.split(',')[1].replace(/[^0-9]/g, "") ;
            let b = color.split(',')[2].replace(/[^0-9]/g, "") ;
            let rgba = {
                r: r,
                g: g,
                b: b,
                a: 255
            }
            return rgba;
        }
        else if (color.includes('cmyk')) {
            let c = color.split(',')[0].replace(/[^0-9]/g, "") / 100;
            let m = color.split(',')[1].replace(/[^0-9]/g, "") / 100;
            let y = color.split(',')[2].replace(/[^0-9]/g, "") / 100;
            let k = color.split(',')[3].replace(/[^0-9]/g, "") / 100;
            let r = Math.round(255 - ((Math.min(1, c * (1 - k) + k)) * 255));
            let g = Math.round(255 - ((Math.min(1, m * (1 - k) + k)) * 255));
            let b = Math.round(255 - ((Math.min(1, y * (1 - k) + k)) * 255));
            let rgba = {
                r: r,
                g: g,
                b: b,
                a: 255
            }
            return rgba;
        }
    }

}

 

<결과>

ColorConverter.getRGB(color); // "cmyk(41%,4%,0%,67%)"
ColorConverter.getRGBA("#325255") // "rgba(50,82,85,255)"
ColorConverter.getRGB("#325255") // "rgb(50,82,85)"
ColorConverter.getHEX("#325255") // "#325255"