Phiên bản đầy đủ: jsB@nk » Ứng dụng » Công cụ xuất » Công cụ chọn màu 4096
URL: https://www.javascriptbank.com/4096-color-wheel-v2-1-index.html
Một công cụ chọn màu thông minh khác, khi bạn rê con trỏ chuột vào hình mẫu, công cụ này sẽ hiển thị màu sắc cùng với mã thập lục phân của màu; bên cạnh đó, nó còn hiển thị cho bạn biết nên sử dụng màu nào để đạt hiệu quả tối ưu nhất
Phiên bản đầy đủ: jsB@nk » Ứng dụng » Công cụ xuất » Công cụ chọn màu 4096
URL: https://www.javascriptbank.com/4096-color-wheel-v2-1-index.html
<STYLE type=text/css>BODY {FONT-SIZE: 16px; FONT-FAMILY: "Trebuchet MS", Skia, "Lucida Sans Unicode", sans-serif}H1 {FONT-SIZE: 24px; LEFT: 50px; VISIBILITY: visible; /*POSITION: absolute; TOP: 30px*/}DIV#wheel {BACKGROUND: #ffff00; LEFT: 350px; VISIBILITY: visible; WIDTH: 553px; POSITION: absolute; TOP: 50px; HEIGHT: 257px}DIV#demoa {FONT-SIZE: 14px; VISIBILITY: visible; PADDING-BOTTOM: 200px; WIDTH: 90px; PADDING-TOP: 15px; FONT-FAMILY: serif; POSITION: absolute; TOP: 350px; HEIGHT: 150px; TEXT-ALIGN: center}DIV#demob {FONT-SIZE: 14px; VISIBILITY: visible; PADDING-BOTTOM: 200px; WIDTH: 90px; PADDING-TOP: 15px; FONT-FAMILY: serif; POSITION: absolute; TOP: 350px; HEIGHT: 150px; TEXT-ALIGN: center}DIV#democ {FONT-SIZE: 14px; VISIBILITY: visible; PADDING-BOTTOM: 200px; WIDTH: 90px; PADDING-TOP: 15px; FONT-FAMILY: serif; POSITION: absolute; TOP: 350px; HEIGHT: 150px; TEXT-ALIGN: center}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 {BORDER-RIGHT: 1px dotted; PADDING-RIGHT: 35px; FONT-SIZE: 14px; LEFT: 50px; VISIBILITY: visible; FONT-FAMILY: Courier, monospace; POSITION: absolute; TOP: 220px}DIV#picks {PADDING-LEFT: 10px}DIV#picka {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; WIDTH: 200px; PADDING-TOP: 10px; HEIGHT: 40px}DIV#pickb {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; WIDTH: 200px; PADDING-TOP: 10px; HEIGHT: 40px}DIV#pickc {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; WIDTH: 200px; PADDING-TOP: 10px; HEIGHT: 40px}DIV#pickd {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; WIDTH: 200px; PADDING-TOP: 10px; HEIGHT: 40px}DIV#picke {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; WIDTH: 200px; PADDING-TOP: 10px; HEIGHT: 40px}DIV#pickf {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; WIDTH: 200px; PADDING-TOP: 10px; HEIGHT: 40px}DIV#pickg {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; WIDTH: 200px; PADDING-TOP: 10px; HEIGHT: 40px}DIV#notes {FONT-SIZE: 12px; LEFT: 50px; VISIBILITY: visible; WIDTH: 270px; PADDING-TOP: 30px; POSITION: absolute; TOP: 650px}DIV#instructs {LEFT: 50px; VISIBILITY: visible; PADDING-BOTTOM: 30px; WIDTH: 270px; POSITION: absolute; TOP: 80px}DIV#showhide {PADDING-RIGHT: 5px; PADDING-LEFT: 35px; LEFT: 620px; VISIBILITY: visible; WIDTH: 270px; POSITION: absolute; TOP: 330px}DIV#fulllist {PADDING-RIGHT: 5px; DISPLAY: none; PADDING-LEFT: 25px; FONT-SIZE: 14px; LEFT: 935px; VISIBILITY: visible; BORDER-LEFT: 1px dotted; FONT-FAMILY: Courier, monospace; WHITE-SPACE: nowrap; POSITION: absolute; TOP: 50px}DIV#showhide SPAN {TEXT-DECORATION: underline}DIV#watermark {FONT-SIZE: 10px; LEFT: 5px; VISIBILITY: visible; WIDTH: 553px; COLOR: #cecece; FONT-FAMILY: "Trebuchet MS", Skia, "Lucida Sans Unicode",sans-serif; WHITE-SPACE: nowrap; POSITION: absolute; TOP: 5px}.btxt {COLOR: #000000}.wtxt {COLOR: #ffffff}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=JavaScript><!-- //Beginhue = 60;adeg = 60;sat = 1;val = 1;squarecolor = "#ffff00"; //starting huepickindex = 0;threec = new Array("#666666", "#555555", "#545657"); // the three colorsprevc = 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 (chris@NOSPAMdithered.com - remove NOSPAM)// modified by Michael Lovitt to include OmniWeb and Dreamcast// modified by Jemima Pereira to detect only relevant browsersfunction BrowserDetectXLite() {var ua = navigator.userAgent.toLowerCase(); this.ua = ua;// browser namethis.isIE = ( (ua.indexOf("msie") != -1) && (ua.indexOf("opera") == -1) && (ua.indexOf("webtv") == -1) ); this.isSafari = (ua.indexOf('safari') != - 1);// browser versionthis.versionMinor = parseFloat(navigator.appVersion); // correct version number for IE4+ if (this.isIE && this.versionMinor >= 4) {this.versionMinor = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) );}this.versionMajor = parseInt(this.versionMinor); // platformthis.isWin = (ua.indexOf('win') != -1);this.isWin32 = (this.isWin && ( ua.indexOf('95') != -1 || ua.indexOf('98') != -1 || ua.indexOf('nt') != -1 || ua.indexOf('win32') != -1 || ua.indexOf('32bit') != -1) );this.isMac = (ua.indexOf('mac') != -1);this.isIE4x = (this.isIE && this.versionMajor == 4);this.isIE4up = (this.isIE && this.versionMajor >= 4);this.isIE5x = (this.isIE && this.versionMajor == 5);this.isIE55 = (this.isIE && this.versionMinor == 5.5);this.isIE5up = (this.isIE && this.versionMajor >= 5);this.isIE6x = (this.isIE && this.versionMajor == 6);this.isIE6up = (this.isIE && this.versionMajor >= 6);this.isIE4xMac = (this.isIE4x && this.isMac);}var browser = new BrowserDetectXLite();//end of browser detector//fix for IE's png stupidityfunction deMoronize() {//now the onload function// detect moronic browsers if (!((browser.isIE55 || browser.isIE6up) && browser.isWin32)) { // demoronize div#wheel image if browser is non-moronic thesmartversion = "<a href='javascript://' onclick='javascript:pickColor(); return false;'><img src='hsvwheel.png' alt='color wheel' width='553' height='257' border='0'></a>"; document.getElementById("wheel").innerHTML = thesmartversion; } // keypress stuff if (browser.isSafari) document.onkeypress = rotate; //safari repeat else document.onkeydown = rotate; // start capturing the mouse capture();}// HSV conversion algorithm adapted from easyrgb.comfunction hsv2rgb(Hdeg,S,V) { H = Hdeg/360; // convert from degrees to 0 to 1 if (S==0) { // HSV values = From 0 to 1 R = V*255; // RGB results = From 0 to 255 G = V*255; B = V*255;} else { var_h = H*6; var_i = Math.floor( var_h ); //Or ... var_i = floor( var_h ) var_1 = V*(1-S); var_2 = V*(1-S*(var_h-var_i)); var_3 = V*(1-S*(1-(var_h-var_i))); if (var_i==0) {var_r=V ; var_g=var_3; var_b=var_1} else if (var_i==1) {var_r=var_2; var_g=V; var_b=var_1} else if (var_i==2) {var_r=var_1; var_g=V; var_b=var_3} else if (var_i==3) {var_r=var_1; var_g=var_2; var_b=V} else if (var_i==4) {var_r=var_3; var_g=var_1; var_b=V} else {var_r=V; var_g=var_1; var_b=var_2} R = Math.round(var_r*255); //RGB results = From 0 to 255 G = Math.round(var_g*255); B = Math.round(var_b*255); } return new Array(R,G,B);}function rgb2hex(rgbary) { cary = new Array; cary[3] = "#"; for (i=0; i < 3; i++) { cary[i] = parseInt(rgbary[i]).toString(16); if (cary[i].length < 2) cary[i] = "0"+ cary[i]; cary[3] = cary[3] + cary[i]; cary[i+4] = rgbary[i]; //save dec values for later } // function returns hex color as an array of three two-digit strings // plus the full hex color and original decimal values return cary;}function webRounder(c,d) {//d is the divisor //safe divisor is 51, smart divisor is 17 thec = "#"; for (i=0; i<3; i++) { num = Math.round(c[i+4]/d) * d; //use saved rgb value numc = num.toString(16); if (String(numc).length < 2) numc = "0" + numc; thec += numc; } return thec;}function hexColorArray(c) { //now takes string hex value with # threec[2] = c[3]; threec[1] = webRounder(c,17); threec[0] = webRounder(c,51); return false;}function capture() { hoverColor(); initColor(); if(document.layers) { layobj = document.layers['wheel']; layobj.document.captureEvents(Event.MOUSEMOVE); layobj.document.onmousemove = mouseMoved; } else if (document.all) { layobj = document.all["wheel"]; layobj.onmousemove = mouseMoved; } else if (document.getElementById) { window.document.getElementById("wheel").onmousemove = mouseMoved; }}function greyMoved(x,y) { adeg = hue; xside = (x<=553)?x - 296:256; yside = (y<=256)?y:256; sat = xside/256; val = 1 - (yside/256); c = rgb2hex(hsv2rgb(hue,sat,val)); hexColorArray(c); hoverColor(); return false;}function mouseMoved(e) { if (document.layers) { x = e.layerX; y = e.layerY; } else if (document.all) { x = event.offsetX; y = event.offsetY; } else if (document.getElementById) { x = (e.pageX - document.getElementById("wheel").offsetLeft); y = (e.pageY - document.getElementById("wheel").offsetTop); } if (x >= 296) {greyMoved(x,y); return false;} if (y > 256) {return false;} cartx = x - 128; carty = 128 - y; cartx2 = cartx * cartx; carty2 = carty * carty; cartxs = (cartx < 0)?-1:1; cartys = (carty < 0)?-1:1; cartxn = cartx/128; //normalize x rraw = Math.sqrt(cartx2 + carty2); //raw radius rnorm = rraw/128; //normalized radius if (rraw == 0) { sat = 0; val = 0; rgb = new Array(0,0,0); } else { arad = Math.acos(cartx/rraw); //angle in radians aradc = (carty>=0)?arad:2*Math.PI - arad; //correct below axis adeg = 360 * aradc/(2*Math.PI); //convert to degrees if (rnorm > 1) { // outside circle rgb = new Array(255,255,255); sat = 1; val = 1; } //else rgb = hsv2rgb(adeg,1,1); else if (rnorm >= .5) { sat = 1 - ((rnorm - .5) *2); val = 1; rgb = hsv2rgb(adeg,sat,val); } else { sat = 1; val = rnorm * 2; rgb = hsv2rgb(adeg,sat,val);} } c = rgb2hex(rgb); hexColorArray(c); hoverColor(); return false;}function hoverColor() { if (document.layers) { // document.layers["wheel"].bgColor = threec[1]; document.layers["demoa"].bgColor = threec[0]; document.layers["demob"].bgColor = threec[1]; document.layers["democ"].bgColor = threec[2]; document.layers["demoa"].document.cccform.ccc.value = threec[0]; document.layers["demob"].document.aaaform.abc.value = threec[1]; document.layers["democ"].document.abcform.abc.value = threec[2]; } else if (document.all) { // document.all["wheel"].style.backgroundColor = threec[1]; document.all["demoa"].style.backgroundColor = threec[0]; document.all["demob"].style.backgroundColor = threec[1]; document.all["democ"].style.backgroundColor = threec[2]; document.all["demoa"].document.cccform.ccc.value = threec[0]; document.all["demob"].document.aaaform.aaa.value = threec[1]; document.all["democ"].document.abcform.abc.value = threec[2]; } else if (document.getElementById) { // document.getElementById("wheel").style.backgroundColor = threec[1]; document.getElementById("demoa").style.backgroundColor = threec[0]; document.getElementById("demob").style.backgroundColor = threec[1]; document.getElementById("democ").style.backgroundColor = threec[2]; document.cccform.ccc.value = threec[0]; document.aaaform.aaa.value = threec[1]; document.abcform.abc.value = threec[2]; } return false;}function pickColor() { if (threec[2] == prevc) return false; // prevent duplicate entries in list prevc = threec[2]; thecontents = "<tt class='wtxt'>" + threec[1] +"</tt><br /><tt class='btxt'>" + threec[1] + "</tt>"; thecolors = "<tt>" + threec[0] + " " + threec[1] + " " + threec[2] + "</tt> <span style='background-color: " + threec[1] + "; padding-left: 10px;'> </span><br />"; document.getElementById("fulllist").innerHTML += thecolors; switch (pickindex) { case 0: document.getElementById("picka").innerHTML = thecontents; document.getElementById("picka").style.backgroundColor = threec[1]; break; case 1: document.getElementById("pickb").innerHTML = thecontents; document.getElementById("pickb").style.backgroundColor = threec[1]; break; case 2: document.getElementById("pickc").innerHTML = thecontents; document.getElementById("pickc").style.backgroundColor = threec[1]; break; case 3: document.getElementById("pickd").innerHTML = thecontents; document.getElementById("pickd").style.backgroundColor = threec[1]; break; case 4: document.getElementById("picke").innerHTML = thecontents; document.getElementById("picke").style.backgroundColor = threec[1]; break; case 5: document.getElementById("pickf").innerHTML = thecontents; document.getElementById("pickf").style.backgroundColor = threec[1]; break; case 6: document.getElementById("pickg").innerHTML = thecontents; document.getElementById("pickg").style.backgroundColor = threec[1]; break; } pickindex += 1; if (pickindex >= picary.length) pickindex = 0; setSquare(adeg); return false;}function setSquare(deg) { hue = deg; adeg = deg; c = rgb2hex(hsv2rgb(hue,1,1)); squarecolor = c[3]; if (document.layers) { document.layers["wheel"].bgColor = squarecolor; } else if (document.all) { document.all["wheel"].style.backgroundColor = squarecolor; } else if (document.getElementById) { document.getElementById("wheel").style.backgroundColor = squarecolor; }}function initColor() { for (i=0; i<7; i++) { thecontents = "<tt class='wtxt'>" + initary[i] +"</tt><br><tt class='btxt'>" + initary[i] +"</tt>"; switch (i) { case 0: document.getElementById("picka").innerHTML = thecontents; document.getElementById("picka").style.backgroundColor = initary[i]; break; case 1: document.getElementById("pickb").innerHTML = thecontents; document.getElementById("pickb").style.backgroundColor = initary[i]; break; case 2: document.getElementById("pickc").innerHTML = thecontents; document.getElementById("pickc").style.backgroundColor = initary[i]; break; case 3: document.getElementById("pickd").innerHTML = thecontents; document.getElementById("pickd").style.backgroundColor = initary[i]; break; case 4: document.getElementById("picke").innerHTML = thecontents; document.getElementById("picke").style.backgroundColor = initary[i]; break; case 5: document.getElementById("pickf").innerHTML = thecontents; document.getElementById("pickf").style.backgroundColor = initary[i]; break; case 6: document.getElementById("pickg").innerHTML = thecontents; document.getElementById("pickg").style.backgroundColor = initary[i]; break; } }}function theToggle(divid,disp) {var elements = document.getElementsByTagName("div");for(var i = 0; i < elements.length; i++) {if (elements.item(i).id == divid) { elements.item(i).style.display = disp;}}}// keyboard tricks adapted from// http://www.ipwebdesign.net/kaelisSpace/useful_keypress.html// see also http://sniptools.com/jskeysfunction 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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=deMoronize();><div style="position: relative;"><DIV id=wheel><A onclick="javascript:pickColor(); return false;" href="javascript://"><IMG style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='hsvwheel.png', sizingMethod='scale'); BORDER-LEFT: 0px; WIDTH: 553px; BORDER-BOTTOM: 0px; HEIGHT: 257px" alt="color wheel (hsv)" src="blank.gif"></A></DIV><DIV id=demoa><FORM name=cccform><INPUT size=8 name=ccc> </FORM><SPAN class=btxt>web-safe</SPAN><BR><SPAN class=wtxt>web-safe</SPAN></DIV><DIV id=demob><FORM name=aaaform><INPUT size=8 name=aaa> </FORM><SPAN class=btxt>web-smart</SPAN><BR><SPAN class=wtxt>web-smart</SPAN></DIV><DIV id=democ><FORM name=abcform><INPUT size=8 name=abc> </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><!-- on the right, the full list --><DIV id=fulllist></DIV></div></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/utility/4096_Color_Wheel_v2_1/blank.gifhttp://javascriptbank.com/javascript/utility/4096_Color_Wheel_v2_1/hsvwheel.png