#selectedcolor {
border:1px solid #e3e3e3;
width:80%;
height:300px;
margin:auto;
}
#divpreview {
border:1px solid #e3e3e3;
width:80px;
height:20px;
margin:auto;
visibility:hidden;
}
.colorTable, #colorhexDIV, #colorrgbDIV, #colorhsvDIV, #colorhslDIV, #colornamDIV {
font-family:Consolas, ‘Courier New’, Courier, monospace;
}
#colorhexDIV, #colorrgbDIV, #colorhslDIV, #colorhsvDIV, #colornamDIV {
font-size:18px;
}
#wronginputDIV {
text-align:left;
position:absolute;
margin:4px 10px;
color:#a94442;
display:none;
}
.has-error input{
border:1px solid red;
}
#entercolorDIV input,#entercolorDIV button{
height:28px;
}
#entercolorDIV input{
width:80%;
border:1px solid #d3d3d3;
border-right:none;
}
-1 && selleft>-1) {
document.getElementById(“selectedhexagon”).style.top=seltop + “px”;
document.getElementById(“selectedhexagon”).style.left=selleft + “px”;
document.getElementById(“selectedhexagon”).style.visibility=”visible”;
} else {
document.getElementById(“divpreview”).style.backgroundColor = tinycolor(colorhex).toHexString();
document.getElementById(“selectedhexagon”).style.visibility = “hidden”;
}
document.getElementById(“selectedcolor”).style.backgroundColor = tinycolor(colorhex).toHexString();
document.getElementById(“html5colorpicker”).value = tinycolor(colorhex).toHexString();
document.getElementById(‘slideRed’).value = r;
document.getElementById(‘slideGreen’).value = g;
document.getElementById(‘slideBlue’).value = b;
changeRed(r);changeGreen(g);changeBlue(b);
changeColor();
document.getElementById(“fixed”).style.backgroundColor = tinycolor(colorhex).toHexString();
}
function wrongInput() {
document.getElementById(“entercolorDIV”).className = “has-error”;
document.getElementById(“wronginputDIV”).style.display = “block”;
}
function clearWrongInput() {
document.getElementById(“entercolorDIV”).className = “”;
document.getElementById(“wronginputDIV”).style.display = “none”;
}
function changeRed(value) {
document.getElementById(‘valRed’).innerHTML = value;
changeAll();
}
function changeGreen(value) {
document.getElementById(‘valGreen’).innerHTML = value;
changeAll();
}
function changeBlue(value) {
document.getElementById(‘valBlue’).innerHTML = value;
changeAll();
}
function changeAll() {
var r = document.getElementById(‘valRed’).innerHTML;
var g = document.getElementById(‘valGreen’).innerHTML;
var b = document.getElementById(‘valBlue’).innerHTML;
document.getElementById(‘change’).style.backgroundColor = “rgb(” + r + “,” + g + “,” + b + “)”;
document.getElementById(‘changetxt’).innerHTML = “rgb(” + r + “, ” + g + “, ” + b + “)”;
document.getElementById(‘changetxthex’).innerHTML = tinycolor(“rgb(” + r + “,” + g + “,” + b + “)”).toHexString();
}
function hslLum_top() {
var i, a, match;
var color = document.getElementById(“colorhexDIV”).innerHTML;
var hslObj = tinycolor(color).toHsl();
var h = hslObj.h;
var s = hslObj.s;
var l = hslObj.l;
var arr = [];
for (i = 0; i <= 20; i++) {
arr.push(tinycolor("hsl(" + h + "," + s + "," + (i * 0.05) + ")"));
}
arr.reverse();
a = "
淡 / 暗:
| “; //a += “ |
淡 / 暗”;//a += “”; match = 0; for (i = 0; i < arr.length; i++) { if (match == 0 && Math.round(l * 100) == Math.round(tinycolor(arr[i]).toHsl().l * 100)) { a += " a += “ ” + Math.round(l * 100) + “% “; | a += “
| “; ” + tinycolor(hslObj).toHexString() + “”; | a += “”; a += “
|
| “; | match = 1; } else { if (match == 0 && l > tinycolor(arr[i]).toHsl().l) { a += “
|
| “; | a += “ a += “ ” + Math.round(l * 100) + “% “; | a += “ “; | a += “ ” + tinycolor(hslObj).toHexString() + “”; | a += “”; a += “
|
| “; | match = 1; } a += “ a += “ ” + Math.round(tinycolor(arr[i]).toHsl().l * 100) + “% “; | a += “ “; | a += “ ” + tinycolor(arr[i]).toHexString() + “”; | a += “”; } } a += “”; document.getElementById(“lumtopcontainer”).innerHTML = a; } function hslHue_top() {
| “; a += “ |