그누보드 - 비슷한 톤의 색깔 타일 만들기

비슷한 톤의 색깔 타일 만들기 > 그누보드5 팁자료실

그누보드5 팁자료실

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

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

본문

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

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

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에 비슷한 랜덤칼라가 들어갈겁니다. 색깔이 차이나는 범위를 어떻게 할 것인가를 설정할 수도 있습니다.

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

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