비슷한 톤의 색깔 타일 만들기
그누보드 기반으로 운영하는 사이트에서 쓰였던 기술은 아니지만, 범용적으로 사용하기 좋을 듯 하여 공유합니다.
예시는 아래에서 보시면 됩니다.
보시면 메뉴들이 타일 형태인데요, 푸른색 계열의 색깔로 되어 있습니다.
이 색깔은 미리 정해둔 색깔이 아니라 랜덤으로 생성 된 색깔입니다.
새로고침 해 보시면 비슷한 톤으로 색깔이 바뀌는 것을 확인하실 수 있습니다.
자바스크립트 기반으로 만들었구요, 소스코드는 아래와 같습니다.
의외로 여러개의 함수를 사용합니다.. 복잡한거 아니고 모듈화 차원에서 나눠 두었습니다.
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>
다시한번 예시 보여 드립니다.
댓글 8개
감사합니다.
어떤 부분이 힘드신지 상세히 적어주시면 좀 더 가이드를 드리겠습니다.
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4426 | ||
| 2604 | 8개월 전 | 676 | ||
| 2603 | 8개월 전 | 735 | ||
| 2602 | 8개월 전 | 649 | ||
| 2601 |
|
8개월 전 | 672 | |
| 2600 |
|
8개월 전 | 580 | |
| 2599 | 8개월 전 | 809 | ||
| 2598 | 8개월 전 | 604 | ||
| 2597 |
다케미카코
|
8개월 전 | 757 | |
| 2596 | 8개월 전 | 854 | ||
| 2595 |
|
9개월 전 | 446 | |
| 2594 | 9개월 전 | 608 | ||
| 2593 |
만두먹고또먹고
|
9개월 전 | 938 | |
| 2592 | 9개월 전 | 613 | ||
| 2591 | 9개월 전 | 620 | ||
| 2590 | 9개월 전 | 690 | ||
| 2589 |
|
9개월 전 | 760 | |
| 2588 | 9개월 전 | 479 | ||
| 2587 | 9개월 전 | 796 | ||
| 2586 | 9개월 전 | 644 | ||
| 2585 | 9개월 전 | 511 | ||
| 2584 | 9개월 전 | 578 | ||
| 2583 | 9개월 전 | 499 | ||
| 2582 | 9개월 전 | 644 | ||
| 2581 | 9개월 전 | 600 | ||
| 2580 |
만두먹고또먹고
|
9개월 전 | 517 | |
| 2579 |
|
9개월 전 | 665 | |
| 2578 | 9개월 전 | 649 | ||
| 2577 | 9개월 전 | 629 | ||
| 2576 | 10개월 전 | 562 | ||
| 2575 |
이슈DEV
|
10개월 전 | 993 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기