웹 컬러피커 정보
웹 컬러피커
관련링크
첨부파일
본문
웹 서핑중 찾아 올려 봅니다. 학습용^^*
링크1은 제 사이트에 올려놓은 샘플이니 참조하시고 압축하여 올려 놓습니다.
그대로 그냥 풀어서 올리시면 되겠습니다.
링크1은 제 사이트에 올려놓은 샘플이니 참조하시고 압축하여 올려 놓습니다.
그대로 그냥 풀어서 올리시면 되겠습니다.
추천
4
4
댓글 3개
그누보드 팁이라고 하기엔 좀 그렇지만
좋은 정보 감사해요 ^^
좋은 정보 감사해요 ^^
감사합니다^^*
<html>
<head>
<title>컬러 휠</title>
<!-- 4096 Color Wheel Version 2.1 by Jemima Pereira -->
<!-- http://jemimap.ficml.org/style/color/wheel.html -->
<!-- 2.1: Improved unsafe to smart conversion, -->
<!-- added keyboard navigation (4/04) -->
<!-- 2.0: Converted to HSV to get the greys (4/04) -->
<!-- 1.4: Added optional 3-color list (2/04) -->
<!-- 1.31: Added navigation, translation (2/04) -->
<!-- 1.3: Switched to png, reversed direction (7/03) -->
<!-- 1.2: Added picks list, cleaned up style (7/03) -->
<!-- 1.1: Added Web-safe colors (7/03) -->
<!-- 1.0: Added Mozilla compatibility -->
<!-- Restricted output to the 4096 colors (7/03) -->
<script LANGUAGE="JavaScript">
<!-- //Begin
hue = 60;
adeg = 60;
sat = 1;
val = 1;
squarecolor = "#ffff00"; //starting hue
pickindex = 0;
threec = new Array("#666666", "#555555", "#545657"); // the three colors
prevc = threec[2];
picary = new Array("picka", "pickb", "pickc", "pickd", "picke", "pickf", "pickg");
initary = new Array("#444444", "#777777", "#aaaaaa", "#bbbbbb", "#cccccc", "#dddddd", "#eeeeee");
// code from Browser Detect Lite v2.1
// http://www.dithered.com/javascript/browser_detect/index.html
// modified by Chris Nott (http://sniptools.com/jskeys
function rotate(e) {
if (!e) e = window.event;
var key = (typeof e.which == 'number')?e.which:e.keyCode;
// var key = e.keyCode;
handleKP(key);
}
function handleKP(key) {
switch (key) {
case 13: reHue(hue); pickColor(); break; // enter key
case 112: reHue(hue); pickColor(); break; // p to pick
case 114: reHue(0); break; //r for red
case 121: reHue(60); break; //y for yellow
case 103: reHue(120); break; //g for green
case 99: reHue(180); break; //c for cyan
case 98: reHue(240); break; //b for blue
case 109: reHue(300); break; //m for magenta
case 106: reHue(hue+1); break; //j increases
case 104: reHue(hue+1); break; //h increases (dvorak)
case 107: reHue(hue+355); break; //k decreases more
case 116: reHue(hue+355); break; //t decreases more (dvorak)
case 108: reHue(hue+359); break; //l decreases
case 110: reHue(hue+359); break; //n decreases (dvorak)
// need second set for capital letters
case 80: reHue(hue); pickColor(); break; // P
case 82: reHue(0); break; //R
case 89: reHue(60); break; //Y
case 71: reHue(120); break; //G
case 67: reHue(180); break; //C
case 66: reHue(240); break; //B
case 77: reHue(300); break; //M
case 74: reHue(hue+1); break; //J
case 72: reHue(hue+1); break; //H
case 75: reHue(hue+355); break; //K
case 84: reHue(hue+355); break; //T
case 76: reHue(hue+359); break; //L
case 78: reHue(hue+359); break; //N
}
return false;
}
function reHue(deg) {
deg = deg % 360;
setSquare(deg);
rgb = hsv2rgb(deg,sat,val);
c = rgb2hex(rgb);
hexColorArray(c);
hoverColor();
return false;
}
// End -->
</script>
<style type="text/css">
body {font-family: "Trebuchet MS", Skia, "Lucida Sans Unicode", sans-serif;
font-size: 16px;}
h1 {position:absolute; visibility:visible; top:30px; left:50px;
font-size: 24px;}
div#wheel {position:absolute; visibility:visible; top:50px; left:350px;
width: 553px; height: 257px; background: #ffff00;}
div#demoa, div#demob, div#democ {
position:absolute; visibility:visible;
top:350px; width: 90px; height: 150px;
text-align:center; padding-top: 15px; padding-bottom: 200px;
font-size: 14px; font-family: serif;}
div#demoa {left:350px; margin-right: 0px;}
div#demob {left:440px; margin-left: 0px; margin-right: 0px;}
div#democ {left:530px; margin-left: 0px;}
div#pickset {
position:absolute; visibility:visible; top:220px; left:50px;
padding-right: 35px; border-right: 1px dotted grey;
font-size: 14px; font-family: Courier, monospace;}
div#picks {padding-left: 10px;}
div#picka, div#pickb, div#pickc, div#pickd, div#picke, div#pickf, div#pickg {
width: 200px; height: 40px; padding: 10px;}
div#notes {position:absolute; visibility:visible; top:650px;
left:50px; padding-top: 30px; font-size: 12px; width: 270px;}
div#instructs {
position:absolute; visibility:visible; top:80px;
left:50px; padding-bottom: 30px; width: 270px;}
div#showhide {
position:absolute; visibility:visible; top:330px; left:620px;
padding-left: 35px; padding-right: 5px; width: 270px;}
div#fulllist {
position:absolute; visibility:visible; top:50px; left:935px;
padding-left: 25px; padding-right: 5px; display: none;
white-space: nowrap; border-left: 1px dotted grey;
font-size: 14px; font-family: Courier, monospace;}
div#showhide span {text-decoration: underline;}
div#watermark {position:absolute; visibility:visible; top:5px;
left:5px; width: 553px; white-space: nowrap;
font-family: "Trebuchet MS", Skia, "Lucida Sans Unicode",
sans-serif; font-size: 10px; color: #cecece;}
.btxt {color: #000000;}
.wtxt {color: #ffffff;}
</style>
</head>
<body onLoad="deMoronize();">
<h1>Color Wheel</h1>
<div id="watermark">
</div>
<!-- on the left, the instructions -->
<div id="instructs">
</div>
<!-- in the middle, the wheel and display -->
<div id="wheel"><a href="javascript://" onclick="javascript:pickColor(); return false;"><img alt="color wheel (hsv)" src="blank.gif" style="width: 553px;height: 257px; border: 0; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='hsvwheel.png', sizingMethod='scale')" /></a></div>
<div id="demoa">
<form name="cccform">
<input type="text" name="ccc" size="8">
</form>
<span class="btxt">web-safe</span><br>
<span class="wtxt">web-safe</span></div>
<div id="demob">
<form name="aaaform">
<input type="text" name="aaa" size="8">
</form>
<span class="btxt">web-smart</span><br>
<span class="wtxt">web-smart</span></div>
<div id="democ">
<form name="abcform">
<input type="text" name="abc" size="8">
</form>
<span class="btxt">unsafe</span><br>
<span class="wtxt">unsafe</span></div>
<!-- with the pickset, the picks and instructions -->
<div id="pickset">
<div id="picks">
<div id="picka"></div>
<div id="pickb"></div>
<div id="pickc"></div>
<div id="pickd"></div>
<div id="picke"></div>
<div id="pickf"></div>
<div id="pickg"></div>
</div>
</div>
<div id="notes">
<p>
</p>
</div>
<!-- on the right, the full list -->
<div id="showhide">
<p><a href="#" onclick="theToggle('fulllist','block');return false;">전체 목록</a> |
<a href="#" onclick="theToggle('fulllist','none');return false;">목록 숨기기</a></p>
<p> </p>
</div>
<div id="fulllist"><pre>Safe Smart Unsafe</pre></div>
</body>
</html>
<head>
<title>컬러 휠</title>
<!-- 4096 Color Wheel Version 2.1 by Jemima Pereira -->
<!-- http://jemimap.ficml.org/style/color/wheel.html -->
<!-- 2.1: Improved unsafe to smart conversion, -->
<!-- added keyboard navigation (4/04) -->
<!-- 2.0: Converted to HSV to get the greys (4/04) -->
<!-- 1.4: Added optional 3-color list (2/04) -->
<!-- 1.31: Added navigation, translation (2/04) -->
<!-- 1.3: Switched to png, reversed direction (7/03) -->
<!-- 1.2: Added picks list, cleaned up style (7/03) -->
<!-- 1.1: Added Web-safe colors (7/03) -->
<!-- 1.0: Added Mozilla compatibility -->
<!-- Restricted output to the 4096 colors (7/03) -->
<script LANGUAGE="JavaScript">
<!-- //Begin
hue = 60;
adeg = 60;
sat = 1;
val = 1;
squarecolor = "#ffff00"; //starting hue
pickindex = 0;
threec = new Array("#666666", "#555555", "#545657"); // the three colors
prevc = threec[2];
picary = new Array("picka", "pickb", "pickc", "pickd", "picke", "pickf", "pickg");
initary = new Array("#444444", "#777777", "#aaaaaa", "#bbbbbb", "#cccccc", "#dddddd", "#eeeeee");
// code from Browser Detect Lite v2.1
// http://www.dithered.com/javascript/browser_detect/index.html
// modified by Chris Nott (http://sniptools.com/jskeys
function rotate(e) {
if (!e) e = window.event;
var key = (typeof e.which == 'number')?e.which:e.keyCode;
// var key = e.keyCode;
handleKP(key);
}
function handleKP(key) {
switch (key) {
case 13: reHue(hue); pickColor(); break; // enter key
case 112: reHue(hue); pickColor(); break; // p to pick
case 114: reHue(0); break; //r for red
case 121: reHue(60); break; //y for yellow
case 103: reHue(120); break; //g for green
case 99: reHue(180); break; //c for cyan
case 98: reHue(240); break; //b for blue
case 109: reHue(300); break; //m for magenta
case 106: reHue(hue+1); break; //j increases
case 104: reHue(hue+1); break; //h increases (dvorak)
case 107: reHue(hue+355); break; //k decreases more
case 116: reHue(hue+355); break; //t decreases more (dvorak)
case 108: reHue(hue+359); break; //l decreases
case 110: reHue(hue+359); break; //n decreases (dvorak)
// need second set for capital letters
case 80: reHue(hue); pickColor(); break; // P
case 82: reHue(0); break; //R
case 89: reHue(60); break; //Y
case 71: reHue(120); break; //G
case 67: reHue(180); break; //C
case 66: reHue(240); break; //B
case 77: reHue(300); break; //M
case 74: reHue(hue+1); break; //J
case 72: reHue(hue+1); break; //H
case 75: reHue(hue+355); break; //K
case 84: reHue(hue+355); break; //T
case 76: reHue(hue+359); break; //L
case 78: reHue(hue+359); break; //N
}
return false;
}
function reHue(deg) {
deg = deg % 360;
setSquare(deg);
rgb = hsv2rgb(deg,sat,val);
c = rgb2hex(rgb);
hexColorArray(c);
hoverColor();
return false;
}
// End -->
</script>
<style type="text/css">
body {font-family: "Trebuchet MS", Skia, "Lucida Sans Unicode", sans-serif;
font-size: 16px;}
h1 {position:absolute; visibility:visible; top:30px; left:50px;
font-size: 24px;}
div#wheel {position:absolute; visibility:visible; top:50px; left:350px;
width: 553px; height: 257px; background: #ffff00;}
div#demoa, div#demob, div#democ {
position:absolute; visibility:visible;
top:350px; width: 90px; height: 150px;
text-align:center; padding-top: 15px; padding-bottom: 200px;
font-size: 14px; font-family: serif;}
div#demoa {left:350px; margin-right: 0px;}
div#demob {left:440px; margin-left: 0px; margin-right: 0px;}
div#democ {left:530px; margin-left: 0px;}
div#pickset {
position:absolute; visibility:visible; top:220px; left:50px;
padding-right: 35px; border-right: 1px dotted grey;
font-size: 14px; font-family: Courier, monospace;}
div#picks {padding-left: 10px;}
div#picka, div#pickb, div#pickc, div#pickd, div#picke, div#pickf, div#pickg {
width: 200px; height: 40px; padding: 10px;}
div#notes {position:absolute; visibility:visible; top:650px;
left:50px; padding-top: 30px; font-size: 12px; width: 270px;}
div#instructs {
position:absolute; visibility:visible; top:80px;
left:50px; padding-bottom: 30px; width: 270px;}
div#showhide {
position:absolute; visibility:visible; top:330px; left:620px;
padding-left: 35px; padding-right: 5px; width: 270px;}
div#fulllist {
position:absolute; visibility:visible; top:50px; left:935px;
padding-left: 25px; padding-right: 5px; display: none;
white-space: nowrap; border-left: 1px dotted grey;
font-size: 14px; font-family: Courier, monospace;}
div#showhide span {text-decoration: underline;}
div#watermark {position:absolute; visibility:visible; top:5px;
left:5px; width: 553px; white-space: nowrap;
font-family: "Trebuchet MS", Skia, "Lucida Sans Unicode",
sans-serif; font-size: 10px; color: #cecece;}
.btxt {color: #000000;}
.wtxt {color: #ffffff;}
</style>
</head>
<body onLoad="deMoronize();">
<h1>Color Wheel</h1>
<div id="watermark">
</div>
<!-- on the left, the instructions -->
<div id="instructs">
</div>
<!-- in the middle, the wheel and display -->
<div id="wheel"><a href="javascript://" onclick="javascript:pickColor(); return false;"><img alt="color wheel (hsv)" src="blank.gif" style="width: 553px;height: 257px; border: 0; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='hsvwheel.png', sizingMethod='scale')" /></a></div>
<div id="demoa">
<form name="cccform">
<input type="text" name="ccc" size="8">
</form>
<span class="btxt">web-safe</span><br>
<span class="wtxt">web-safe</span></div>
<div id="demob">
<form name="aaaform">
<input type="text" name="aaa" size="8">
</form>
<span class="btxt">web-smart</span><br>
<span class="wtxt">web-smart</span></div>
<div id="democ">
<form name="abcform">
<input type="text" name="abc" size="8">
</form>
<span class="btxt">unsafe</span><br>
<span class="wtxt">unsafe</span></div>
<!-- with the pickset, the picks and instructions -->
<div id="pickset">
<div id="picks">
<div id="picka"></div>
<div id="pickb"></div>
<div id="pickc"></div>
<div id="pickd"></div>
<div id="picke"></div>
<div id="pickf"></div>
<div id="pickg"></div>
</div>
</div>
<div id="notes">
<p>
</p>
</div>
<!-- on the right, the full list -->
<div id="showhide">
<p><a href="#" onclick="theToggle('fulllist','block');return false;">전체 목록</a> |
<a href="#" onclick="theToggle('fulllist','none');return false;">목록 숨기기</a></p>
<p> </p>
</div>
<div id="fulllist"><pre>Safe Smart Unsafe</pre></div>
</body>
</html>
