";
document.getElementById("lumtopcontainer").innerHTML = a;
}
function hslHue_top() {
var i, a, match, loopH;
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 <= 12; i++) {
arr.push(tinycolor("hsl(" + (i * 30) + "," + s + "," + l + ")"));
}
a = "
";
a += "
";
a += "
";
a += "
Hue:
";
a += "
";
a += "
";
match = 0;
for (i = 0; i < arr.length; i++) {
loopH = Math.round(tinycolor(arr[i]).toHsl().h)
if (i == arr.length - 1) {loopH = 360;}
if (match == 0 && Math.round(h) == loopH) {
a += "
";
a += "
";
a += "
" + Math.round(h) + "
";
a += "
";
a += "
" + tinycolor(hslObj).toHexString() + "
";
a += "
";
a += "
";
match = 1;
} else {
if (match == 0 && Math.round(h) < loopH) {
a += "
";
a += "
";
a += "
" + Math.round(h) + "
";
a += "
";
a += "
" + tinycolor(hslObj).toHexString() + "
";
a += "
";
a += "
";
match = 1;
}
a += "
";
a += "
" + loopH + "
";
a += "
";
a += "
" + tinycolor(arr[i]).toHexString() + "
";
a += "
";
}
}
a += "
";
document.getElementById("huetopcontainer").innerHTML = a;
}
function hslHue() {
var i, a, match, loopH;
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 <= 24; i++) {
arr.push(tinycolor("hsl(" + (i * 15) + "," + s + "," + l + ")"));
}
a = "
Hue
";
a += "
";
a += "
";
a += "
";
a += "
";
a += "
Hue
";
a += "
Hex
";
a += "
Rgb
";
a += "
Hsl
";
a += "
Hsv
";
a += "
";
match = 0;
for (i = 0; i < arr.length; i++) {
loopH = Math.round(tinycolor(arr[i]).toHsl().h)
if (i == arr.length - 1) {loopH = 360;}
if (match == 0 && Math.round(h) == loopH) {
a += "
";
a += "
";
a += "
" + Math.round(h) + "
";
a += "
" + tinycolor(hslObj).toHexString() + "
";
a += "
" + tinycolor(hslObj).toRgbString() + "
";
a += "
" + tinycolor(hslObj).toHslString() + "
";
a += "
" + tinycolor(hslObj).toHsvString() + "
";
a += "
";
match = 1;
} else {
if (match == 0 && Math.round(h) < loopH) {
a += "
";
a += "
";
a += "
" + Math.round(h) + "
";
a += "
" + tinycolor(hslObj).toHexString() + "
";
a += "
" + tinycolor(hslObj).toRgbString() + "
";
a += "
" + tinycolor(hslObj).toHslString() + "
";
a += "
" + tinycolor(hslObj).toHsvString() + "
";
a += "
";
match = 1;
}
a += "
";
a += "
";
a += "
" + loopH + "
";
a += "
" + tinycolor(arr[i]).toHexString() + "
";
a += "
" + tinycolor(arr[i]).toRgbString() + "
";
a += "
" + tinycolor(arr[i]).toHslString() + "
";
a += "
" + tinycolor(arr[i]).toHsvString() + "
";
a += "
";
}
}
a += "
";
document.getElementById("huecontainer").innerHTML = a;
}
function hslSat() {
var i, a, match, loopH;
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 + "," + (i * 0.05) + "," + l + ")"));
}
arr.reverse();
a = "
HSL Saturation
";
a += "
";
a += "
";
a += "
";
a += "
";
a += "
Sat
";
a += "
Hex
";
a += "
Rgb
";
a += "
Hsl
";
a += "
Hsv
";
a += "
";
match = 0;
for (i = 0; i < arr.length; i++) {
if (match == 0 && Math.round(s * 100) == Math.round(tinycolor(arr[i]).toHsl().s * 100)) {
a += "
";
document.getElementById("hslsatcontainer").innerHTML = a;
}
function hslLum() {
var i, a, match, loopH;
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 = "
HSL 淡 / 暗
";
a += "
";
a += "
";
a += "
";
a += "
";
a += "
Lum
";
a += "
Hex
";
a += "
Rgb
";
a += "
Hsl
";
a += "
Hsv
";
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 += "
";
document.getElementById("hsllumcontainer").innerHTML = a;
}
function hsvSat() {
var i, a, match, loopH;
var color = document.getElementById("colorhexDIV").innerHTML;
var hsvObj = tinycolor(color).toHsv();
var h = hsvObj.h;
var s = hsvObj.s;
var v = hsvObj.v;
var arr = [];
for (i = 0; i <= 20; i++) {
arr.push(tinycolor("hsv(" + h + "," + (i * 0.05) + "," + v + ")"));
}
arr.reverse();
a = "
HSV Saturation
";
a += "
";
a += "
";
a += "
";
a += "
";
a += "
Sat
";
a += "
Hex
";
a += "
Rgb
";
a += "
Hsl
";
a += "
Hsv
";
a += "
";
match = 0;
for (i = 0; i < arr.length; i++) {
if (match == 0 && Math.round(s * 100) == Math.round(tinycolor(arr[i]).toHsv().s * 100)) {
a += "
";
document.getElementById("hsvsatcontainer").innerHTML = a;
}
function hsvVal() {
var i, a, match, loopH;
var color = document.getElementById("colorhexDIV").innerHTML;
var hsvObj = tinycolor(color).toHsv();
var h = hsvObj.h;
var s = hsvObj.s;
var v = hsvObj.v;
var arr = [];
for (i = 0; i <= 20; i++) {
arr.push(tinycolor("hsv(" + h + "," + s + "," + (i * 0.05) + ")"));
}
arr.reverse();
a = "
HSV 亮 / 暗
";
a += "
";
a += "
";
a += "
";
a += "
";
a += "
Value
";
a += "
Hex
";
a += "
Rgb
";
a += "
Hsl
";
a += "
Hsv
";
a += "
";
match = 0;
for (i = 0; i < arr.length; i++) {
if (match == 0 && Math.round(v * 100) == Math.round(tinycolor(arr[i]).toHsv().v * 100)) {
a += "
";
document.getElementById("hsvvalcontainer").innerHTML = a;
}
function hsvBrighten() {
var i, a, match;
var color = document.getElementById("colorhexDIV").innerHTML;
var hsvObj = tinycolor(color).toHsv();
var h = hsvObj.h;
var s = hsvObj.s;
var v = hsvObj.v;
var arr = [];
for (i = 0; i <= 20; i++) {
arr.push(tinycolor("hsv(" + h + "," + s + "," + (i * 0.05) + ")"));
}
arr.reverse();
a = "
";
a += "
";
a += "
";
a += "
HSV Brighten / Darken
";
a += "
";
a += "
";
match = 0;
for (i = 0; i < arr.length; i++) {
if (match == 0 && Math.round(v * 100) == Math.round(tinycolor(arr[i]).toHsv().v * 100)) {
a += "
";
a += "
";
a += "
" + Math.round(v * 100) + "%
";
a += "
";
a += "
" + tinycolor(hsvObj).toHexString() + "
";
a += "
";
a += "
";
match = 1;
} else {
if (match == 0 && v > tinycolor(arr[i]).toHsv().v) {
a += "
";
document.getElementById("hsvbrightencontainer").innerHTML = a;
}
function hsvSaturation() {
var i, a, match;
var color = document.getElementById("colorhexDIV").innerHTML;
var hsvObj = tinycolor(color).toHsv();
var h = hsvObj.h;
var s = hsvObj.s;
var v = hsvObj.v;
var arr = [];
for (i = 0; i <= 20; i++) {
arr.push(tinycolor("hsv(" + h + "," + (i * 0.05) + "," + v + ")"));
}
arr.reverse();
a = "
";
a += "
";
a += "
";
a += "
HSV Saturation
";
a += "
";
a += "
";
match = 0;
for (i = 0; i < arr.length; i++) {
if (match == 0 && Math.round(s * 100) == Math.round(tinycolor(arr[i]).toHsv().s * 100)) {
a += "
";
a += "
";
a += "
" + Math.round(s * 100) + "%
";
a += "
";
a += "
" + tinycolor(hsvObj).toHexString() + "
";
a += "
";
a += "
";
match = 1;
} else {
if (match == 0 && s > tinycolor(arr[i]).toHsv().s) {
a += "
";
document.getElementById("hsvsaturationcontainer").innerHTML = a;
}
function hslSaturation() {
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 + "," + (i * 0.05) + "," + l + ")"));
}
arr.reverse();
a = "
";
a += "
";
a += "
";
a += "
HSL Saturation
";
a += "
";
a += "
";
match = 0;
for (i = 0; i < arr.length; i++) {
if (match == 0 && Math.round(s * 100) == Math.round(tinycolor(arr[i]).toHsl().s * 100)) {
a += "
";
a += "
";
a += "
" + Math.round(s * 100) + "%
";
a += "
";
a += "
" + tinycolor(hslObj).toHexString() + "
";
a += "
";
a += "
";
match = 1;
} else {
if (match == 0 && s > tinycolor(arr[i]).toHsl().s) {
a += "
";
document.getElementById("saturationcontainer").innerHTML = a;
}
function hslLumen() {
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 += "
";
a += "
HSL 淡 / 暗
";
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 += "
";
a += "
" + Math.round(l * 100) + "%
";
a += "
";
a += "
" + tinycolor(hslObj).toHexString() + "
";
a += "
";
a += "
";
match = 1;
} else {
if (match == 0 && l > tinycolor(arr[i]).toHsl().l) {
a += "
var thistop = "-35";
var thisleft = "135";