效果實例：
代碼：
注意： hsvToRgb 和 rgbToHsv 函數是關於顏色轉換的。瞭解更多：HSB(HSV) 轉 RGB 顏色 （js轉換公式）)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js色卡</title>
<style>
.box { border: 1px solid rgba(0,0,0,0.2); width: 550px; margin-top: 20px; margin-left: 20px;}
.list {width: 550px;display: flex;}
.item {height: 50px;flex: 1;}
input {width: 80px;}
</style>
</head>
<body>
<h1>js色卡</h1>
<p>要求：色卡左上角爲白色，左下角爲黑色，右上角爲輸入的顏色，右下角亮度爲0輸入顏色。</p>
<div class="form">
RGB---->
R：<input type="number" id="R">
G：<input type="number" id="G">
B：<input type="number" id="B">
<input type="button" value="GO" id="rgbGo"> <br>
HSV---->
H：<input type="number" value="240" id="H">
S：<input type="number" value="100" id="S">
V(B)：<input type="number" value="60" id="V">
<input type="button" value="GO" id="hsvGo">
</div>
<div id="box" class="box"></div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
var dom = $('#box')
$('#rgbGo').click(function () {
var R = $('#R').val() || 0
var G = $('#G').val() || 0
var B = $('#B').val() || 0
var hsv = rgbToHsv([R, G, B])
initHtml(hsv);
})
$('#hsvGo').click(function () {
var H = $('#H').val() || 0
var S = $('#S').val() || 0
var V = $('#V').val() || 0
initHtml([H, S, V]);
})
initHtml([240, 100, 60]);
function initHtml(arr) {
var h = arr[0],
s = arr[1],
v = arr[2];
var colors = createColorList(h, s, v);
var domHtml = createHtml(colors);
dom.html($(domHtml));
}
function createHtml(colors) {
var html = '';
for (var i = 0, l = colors.length; i < l; i++) {
html += '<div class="list">'
for (var x = 0, n = colors[i].length; x < n; x++) {
html += '<div class="item" style="background:' + colors[i][x] + '"></div>'
}
html += '</div>'
}
return html;
}
//生成11*11的二維數組（顏色）要求：色卡左上角爲白色，左下角爲黑色，右上角爲輸入的顏色，右下角亮度爲0輸入顏色
function createColorList(h, n, m) {
var list = [];
for (var i = 0; i <= 10; i++) {
for (var y = 0; y <= 10; y++) {
if (y === 0) {
list[i] = [];
}
var s = y * (n / 10);
var l = 100 - (i * 10);
var _m = m - (m / 10 * i);
l = l - (y * ((l - _m) / 10));
var color = hsvToRgb([h, s / 100, l / 100]);
var item = 'rgb(' + color[0] + ',' + color[1] + ',' + color[2] + ')'
list[i].push(item)
}
}
return list;
}
//hsv顏色轉rgb顏色
function hsvToRgb(arr) {
var h = arr[0], s = arr[1], v = arr[2];
var r = 0, g = 0, b = 0;
var i = parseInt((h / 60) % 6);
var f = h / 60 - i;
var p = v * (1 - s);
var q = v * (1 - f * s);
var t = v * (1 - (1 - f) * s);
switch (i) {
case 0: r = v; g = t; b = p; break;
case 1: r = q; g = v; b = p; break;
case 2: r = p; g = v; b = t; break;
case 3: r = p; g = q; b = v; break;
case 4: r = t; g = p; b = v; break;
case 5: r = v; g = p; b = q; break;
default: break;
}
r = parseInt(r * 255.0)
g = parseInt(g * 255.0)
b = parseInt(b * 255.0)
return [r, g, b];
}
//rgb顏色轉hsv顏色
function rgbToHsv(arr) {
var h = 0, s = 0, v = 0;
var r = arr[0], g = arr[1], b = arr[2];
arr.sort(function (a, b) {
return a - b;
})
var max = arr[2]
var min = arr[0];
v = max / 255;
s = max === 0 ? 0 : 1 - (min / max);
if (max === min) {
h = 0; //事實上，max===min的時候，h無論爲多少都無所謂
} else if (max === r && g >= b) {
h = 60 * ((g - b) / (max - min)) + 0;
} else if (max === r && g < b) {
h = 60 * ((g - b) / (max - min)) + 360
} else if (max === g) {
h = 60 * ((b - r) / (max - min)) + 120
} else if (max === b) {
h = 60 * ((r - g) / (max - min)) + 240
}
h = parseInt(h);
s = parseInt(s * 100);
v = parseInt(v * 100);
return [h, s, v]
}
})
</script>
</body>
</html>
友情鏈接：HSB(HSV) 轉 RGB 顏色 （js轉換公式）