쓸곳이 많을거 같아서 직접 만들었습니다.

조금이라도 도움이 되시길...;

데모 : http://l2zeo.com/it/76

파일은 첨부로 해두었습니다.

--------------------------------------

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/css/wysiwyg.css"/>

<script type="text/javascript" src="/javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/javascript/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.pngFix.js"></script>
<script type="text/javascript">

var rgb;
var hsb;

function rgb_to_hex(r, g, b)/*{{{*/
{
r = r.toString(16);
if (r.length == 1)
{
r = '0' + r;
}
g = g.toString(16);
if (g.length == 1)
{
g = '0' + g;
}
b = b.toString(16);
if (b.length == 1)
{
b = '0' + b;
}

return (r + g + b).toUpperCase();
}/*}}}*/

function hex_to_rgb(hex_string, default_)/*{{{*/
{
if (default_ == undefined)
{
default_ = {r: 255, g: 0 , b: 0};
}

if (hex_string.substr(0, 1) == '#')
{
hex_string = hex_string.substr(1);
}

var r;
var g;
var b;
if (hex_string.length == 3)
{
r = hex_string.substr(0, 1);
r += r;
g = hex_string.substr(1, 1);
g += g;
b = hex_string.substr(2, 1);
b += b;
}
else if (hex_string.length == 6)
{
r = hex_string.substr(0, 2);
g = hex_string.substr(2, 2);
b = hex_string.substr(4, 2);
}
else
{
return default_;
}

r = parseInt(r, 16);
g = parseInt(g, 16);
b = parseInt(b, 16);

if (isNaN(r) || isNaN(g) || isNaN(b))
{
return default_;
}
else
{
return {r: r, g: g , b: b};
}
}/*}}}*/

function hsb_to_rgb(h, s, v)/*{{{*/
{
var red, green, blue, hue, i, var_r, var_g, var_b, var1, var2, var3;

if(s == 0)
{
red = Math.round(v * 255);
green = Math.round(v * 255);
blue = Math.round(v * 255);
}
else
{
hue = h * 6;
if(hue == 6) hue = 0;
i = Math.floor(hue);
var1 = v * (1 - s);
var2 = v * (1 - s * ( hue - i ));
var3 = v * (1 - s * (1 - (hue - i)));

switch(i)
{
case 0: var_r = v; var_g = var3; var_b = var1; break;
case 1: var_r = var2; var_g = v; var_b = var1; break;
case 2: var_r = var1; var_g = v; var_b = var3; break;
case 3: var_r = var1; var_g = var2; var_b = v; break;
case 4: var_r = var3; var_g = var1; var_b = v; break;
default: var_r = v; var_g = var1; var_b = var2; break;
}

red = Math.round(var_r * 255);
green = Math.round(var_g * 255);
blue = Math.round(var_b * 255);
}

return {r: red, g: green, b: blue};
}/*}}}*/

function rgb_to_hsb(red, green, blue)/*{{{*/
{

red = (red/255);
green = (green/255);
blue = (blue/255);

var max = Math.max(Math.max(red, green), blue);
var min = Math.min(Math.min(red, green), blue);
var delta_max = max - min;

var hue;
var saturation;
var value = max;

if (delta_max == 0)
{
hue = 0;
saturation = 0;
}
else
{
saturation = delta_max / max;

var delta_r = (((max - red)/6)+(delta_max/2))/delta_max;
var delta_g = (((max - green)/6)+(delta_max/2))/delta_max;
var delta_b = (((max - blue)/6)+(delta_max/2))/delta_max



if (red == max)
{
hue = delta_b - delta_g;
}
else if (green == max)
{
hue = (1/3) + delta_r - delta_b;
}
else if (blue == max)
{
hue = (2/3) + delta_g - delta_r;
}


if (hue < 0)
{
hue += 1;
}

if (hue > 1)
{
hue -= 1;
}

}

return {
h: hue,
s: saturation,
b: value
};

}/*}}}*/

function hsb_to_position(h, s, v)/*{{{*/
{
var p_h = Math.round((100/360)* Math.round(h*360));
var p_s = Math.round(s * 100);
var tmp_v = Math.round(v * 100);
var p_v = 100 - tmp_v;

return { bar_x: p_h, palette_x : p_s , palette_y : p_v };
}/*}}}*/

function hex_change()/*{{{*/
{
//rgb , hsb 셋팅
rgb = hex_to_rgb($("#color_hex").val(),{r: 255, g: 0, b: 0});
var tmp_hsb = rgb_to_hsb(rgb.r, rgb.g, rgb.b);

if(!hsb)
{
hsb = tmp_hsb;
}
else
{
if(tmp_hsb.b != tmp_hsb.b)
{
hsb.s = tmp_hsb.s;
}

hsb.b = tmp_hsb.b;

}

//palette background 설정
var hue_rgb = hsb_to_rgb(hsb.h, 1, 1);
var hue_hex = rgb_to_hex(hue_rgb.r,hue_rgb.g,hue_rgb.b);
$("#palette").css('background-color','#'+hue_hex);

//bar 와 palette 위치 가저오기
var position = hsb_to_position(hsb.h, hsb.s, hsb.b);

//bar_cursor 위치조정
var bar_position = $("#bar").offset().left + position.bar_x;
$("#bar_cursor").css('left',bar_position);

//palette_cursor 위치조정
var palette_left = $("#palette").offset().left + position.palette_x;
var palette_top = $("#palette").offset().top + position.palette_y;
$("#palette_cursor").css('left',palette_left).css('top',palette_top);

//칼러뷰 색갈조정
var color_hex = rgb_to_hex(rgb.r, rgb.g, rgb.b);
$("#color_view").css('background-color','#'+color_hex);


}/*}}}*/

function bar_change(x)/*{{{*/
{
var max = ($("#bar").offset().left + 100);
var min = ($("#bar").offset().left);

if(x > max)
{
x = max;
}
else if(x < min)
{
x = min;
}


hsb.h = (x - $("#bar").offset().left) / 100;
rgb = hsb_to_rgb(hsb.h, hsb.s, hsb.b);

//칼라 핵사코드 변경
var color_hex = rgb_to_hex(rgb.r,rgb.g,rgb.b);
$("#color_hex").val(color_hex);

hex_change();


}/*}}}*/

function pallete_change(x,y)/*{{{*/
{
var left_max = ($("#palette").offset().left + 100);
var left_min = ($("#palette").offset().left);

if(x > left_max)
{
x = left_max;
}
else if(x < left_min)
{
x = left_min;
}

var top_max = ($("#palette").offset().top + 100);
var top_min = ($("#palette").offset().top);

if(y > top_max)
{
y = top_max;
}
else if(y < top_min)
{
y = top_min;
}


hsb.s = (x - $("#palette").offset().left)/100;
hsb.b = (100 - (y - $("#palette").offset().top))/100;
rgb = hsb_to_rgb(hsb.h, hsb.s, hsb.b);

//칼라 핵사코드 변경
var color_hex = rgb_to_hex(rgb.r,rgb.g,rgb.b);
$("#color_hex").val(color_hex);

hex_change();



}/*}}}*/

$(document).ready(function(){

$(document).pngFix();
$("#bar_cursor").draggable({ axis:'x', containment:'parent', drag: function(e){ bar_change(e.pageX);} });
$("#palette_cursor").draggable({ containment:'parent', drag: function(e){ pallete_change(e.pageX,e.pageY); } });
$("#bar").mousedown(function(e){ bar_change(e.pageX); }).click(function(e){ bar_change(e.pageX); });
$("#palette").mousedown(function(e){ pallete_change(e.pageX,e.pageY);}).click(function(e){ pallete_change(e.pageX,e.pageY); });
$("#color_hex").change(function(){ hex_change(); } );
hex_change();


});

</script>
</head>

<body>

<table style="margin-left:40px;" cellpadding='0' cellspacing='0'>
<tr>
<td class="color_td1">
<span class="span_cursor">x</span>
</td>
</tr>
<tr>
<td class="color_td2">
<div id="bar">
<img id="bar_cursor" src="/wysiwyg_img/bar_cursor.gif" class="cursor_ab">
</div>

<div id="palette">
<img id="palette_cursor" src="/wysiwyg_img/palette_cursor.gif" class="cursor_ab">
</div>

<div class="color_desc">
<div id="color_view"></div>
<div>#<input id="color_hex" type="text" value="FF0000"></div>
</div>

<div class="color_bt_div">
<button class="color_ch_bt">choice</button>
</div>

</td>
</tr>
</table>


</body>
</html><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]</div>