내가 원하는 갯수 만큼 rgb색상을 그라데이션으로 만들기.

프로젝트를 하던 중 rgb컬럼을 데이터의 양만큼 만들일이 있었다.

랜덤색상일 경우 랜덤함수를 돌려 rgb컬러를 생성하면 되지만

 

예를 들어 빨강색부터 파랑색까지 100개의 rgb컬러를 그라데이션으로 만들고 싶을땐 함수를 이용해야 한다.

 

동기가 검색하다 알려준 사이트에서 디버깅을 통해 함수를 뽑아냈다.

출처 : https://htmlcolors.com/color-mixer

Color Mixer | Html Colors

 

이 사이트는 색상 두개를 선택해 step을 정하면 원하는 그라데이션 rgb를 웹에서 표현해준다.

나는 여기있는 사이트를 디버깅 하여 함수를 뽑아내봤다.

 

interpolateHSL 이 녀석 함수를 사용하면 된다. 나머지 함수는 interpolateHSL안에 있는 함수들이다.

물론 색상을 만들기 위해서는 반복문을 이용해야한다.

 

해당 코드를 chrome console에 입력 후 test(); 실행하면 결과값을 확인할 수 있다.

 

var factorStep = 1 / (22 - 1);
var app = window.app || {};
const util = (app.util = {});

var test = () => {
    const colorList = [];
    for (let i = 0; i < 22; i++) {
        colorList.push(
            util.interpolateHSL([255, 204, 204], [255, 45, 45], factorStep * i)
        );
    }
    return colorList;
};

//이런식이면 된다.

/*

* jh.kim

* rgb컬러값 사이의 갯수만큼 rgb 생성. 점점 밝아어지게.

* color1 : rgb [255,255,0]

* color2 : rgb

* factor : (1 / (rgb 컬럼을 만들 갯수 - 1)) * idx;

*

*

* */

util.interpolateHSL = function (color1, color2, factor) {
    var hsl1 = app.util.rgb2hsl(color1);

    var hsl2 = app.util.rgb2hsl(color2);

    for (var i = 0; i < 3; i++) {
        hsl1[i] += factor * (hsl2[i] - hsl1[i]);
    }

    return app.util.hsl2rgb(hsl1);
};

/*

* jh.kim

* rgb > hsl

* color : rgb

*

*

* */

util.rgb2hsl = function (color) {
    var r = color[0] / 255;

    var g = color[1] / 255;

    var b = color[2] / 255;

    var max = Math.max(r, g, b),
        min = Math.min(r, g, b);

    var h,
        s,
        l = (max + min) / 2;

    if (max == min) {
        h = s = 0; // achromatic
    } else {
        var d = max - min;

        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

        switch (max) {
            case r:
                h = (g - b) / d + (g < b ? 6 : 0);
                break;

            case g:
                h = (b - r) / d + 2;
                break;

            case b:
                h = (r - g) / d + 4;
                break;
        }

        h /= 6;
    }

    return [h, s, l];
};

/*

* jh.kim

* hsr > rgb

* color : hsl

*

*

* */

util.hsl2rgb = function (color) {
    var l = color[2];

    if (color[1] == 0) {
        l = Math.round(l * 255);

        return [l, l, l];
    } else {
        function hue2rgb(p, q, t) {
            if (t < 0) t += 1;

            if (t > 1) t -= 1;

            if (t < 1 / 6) return p + (q - p) * 6 * t;

            if (t < 1 / 2) return q;

            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;

            return p;
        }

        var s = color[1];

        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;

        var p = 2 * l - q;

        var r = hue2rgb(p, q, color[0] + 1 / 3);

        var g = hue2rgb(p, q, color[0]);

        var b = hue2rgb(p, q, color[0] - 1 / 3);

        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    }
};