비슷한 톤의 색깔 타일 만들기

그누보드 기반으로 운영하는 사이트에서 쓰였던 기술은 아니지만, 범용적으로 사용하기 좋을 듯 하여 공유합니다.

예시는 아래에서 보시면 됩니다.

http://부동산계산기.com/

보시면 메뉴들이 타일 형태인데요, 푸른색 계열의 색깔로 되어 있습니다.

이 색깔은 미리 정해둔 색깔이 아니라 랜덤으로 생성 된 색깔입니다.

새로고침 해 보시면 비슷한 톤으로 색깔이 바뀌는 것을 확인하실 수 있습니다.

자바스크립트 기반으로 만들었구요, 소스코드는 아래와 같습니다.

의외로 여러개의 함수를 사용합니다.. 복잡한거 아니고 모듈화 차원에서 나눠 두었습니다.

function rand(min, max) {
    return parseInt(Math.random() * (max-min+1), 10) + min;
}

function get_random_color(hex, adj) {
    hex = hex.replace('#', '');
    var r = parseInt(hex.substr(0,2), 16);
    var g = parseInt(hex.substr(2,2), 16);
    var b = parseInt(hex.substr(4,2), 16);

    console.log(rgbToHsl(r, g, b));
    var hsl = rgbToHsl(r, g, b);

    var h = Math.min(360, hsl[0]+rand(adj*(-2), adj*2));
    var s = Math.min(100, hsl[1]+rand(adj*(-1/2), adj*(1/2)));
    var l = Math.min(100, hsl[2]+rand(adj*(-1), adj));

    hsl = "hsl("+h+","+s+"%,"+l+"%)";
    console.log(hsl);
    return hsl;
}

function rgbToHsl(r, g, b){
    r /= 255, g /= 255, b /= 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*360, s*100, l*100];
}

// 위 함수가 랜덤한 색깔을 만들어내는 함수구요, 아래처럼 활용하시면 됩니다.

$(document).ready(function() {
    $(".rdm-color").each(function() {
        $(this).css("background-color", get_random_color("#6F91D1", 10));
    });
});

사용법은 랜덤한 색깔이 지정될 클래스와 CSS 어트리뷰트를 지정해두고,

원하는 톤의 대표칼라는 정해주시면 됩니다. 아래처럼 하면 5개의 div에 비슷한 랜덤칼라가 들어갈겁니다. 색깔이 차이나는 범위를 어떻게 할 것인가를 설정할 수도 있습니다. 

<div class='rdm-color'>배경색이 적용될 칸</div>

<div class='rdm-color'>배경색이 적용될 칸</div>

<div class='rdm-color'>배경색이 적용될 칸</div>

<div class='rdm-color'>배경색이 적용될 칸</div>

<div class='rdm-color'>배경색이 적용될 칸</div>

다시한번 예시 보여 드립니다.

http://부동산계산기.com/