我有一個數字數據，我需要將它繪制成一個網格并根據數字為每個塊著色。較大的數字應該有較深的藍色陰影，較小的數字應該有較淺的藍色陰影。如何找到對應的顏色？
1 回答
慕的地6264312
TA貢獻1817條經驗 獲得超6個贊
你可以使用HSL顏色。第一個參數是色調，第二個是飽和度，第三個是光值。在色輪上，藍色位于240o，因此可以將H值設置為240。然后可以將飽和度設置為100%，將亮度值設置為基于輸入數字的百分比（通過取最大值上的當前數據點）。
請參見下面的示例：
const data = [];
const MAX = 100;
const getColor = (n, max, error) => {
return `hsl(240, 100%, ${(1-n/max) * 100}%)`
}
let html = "";
for(let i = 0; i < MAX; i++) {
html += `<div class='box' style="background-color: ${getColor(i, MAX)}">${i}</div>`
}
document.body.innerHTML = html;
.box {
width: 100px;
height: 100px;
}
編輯
如果要添加邊界，則需要將 的輸出壓縮0-100為 between 0+bl to 100-br。這種類型的映射可以使用這里提出的公式來完成，其中bl是左邊的邊界（即：最低的藍色），br是右邊的邊界（即：最深的藍色）。
const data = [];
const MIN = 0; // min value in data (Math.min(...data))
const MAX = 100; // max value in data (Math.max(...data))
const map = (is, ie, os, oe, val) => os + ((oe - os) / (ie - is)) * (val - is);
const getColor = (n, min, max, bl=0, br=0) => {
const l = 100 - map(min, max, bl, 100-br, n);
return `hsl(240, 100%, ${l}%)`
}
let html = "";
for(let i = 0; i < MAX; i++) {
html += `<div class='box' style="background-color: ${getColor(i, MIN, MAX, 10, 40)}">${i}</div>`
}
document.body.innerHTML = html;
.box {
width: 100px;
height: 100px;
}
添加回答
舉報
0/150
提交
取消