Question

这个问题快速而简单。

我有一个2d浮点数组（0,0000000到1,0000000），我想将这些数字转换为颜色值（＃000000到#ffffff）。

请注意，我所说的只是灰度值。

0 =黑色| ...... | 0.5 =中灰色...... | 1 =白色

有没有人知道如何用javascript做到这一点？ THX。

Answer 1

十六进制的灰度值是具有对称分布的灰度值或红色，绿色和蓝色，例如：＃111111，＃5B5B5B，＃A2A2A2。

要将十进制数转换为十六进制数，您可以使用：

var number = 42;
var hex = Number(parseInt( number , 10)).toString(16);
hex // => "2a"

将其用于功能：

function dec2hex(dec) {
    return Number(parseInt( dec , 10)).toString(16);
}

所以你的浮点数可以转换为十六进制：

var percentage = 0.4;
var color_part_dec = float * 255;
var color_part_hex = dec2hex( color_part_dec );
var color = "#" + color_part_hex + color_part_hex + color_part_hex;
color // => "#666666"

所以你的功能看起来像这样：

function float2color( percentage ) {
    var color_part_dec = 255 * percentage;
    var color_part_hex = Number(parseInt( color_part_dec , 10)).toString(16);
    return "#" + color_part_hex + color_part_hex + color_part_hex;
}

Answer 2

以下是使用3种颜色的灰度方法，亮度，平均值和亮度的示例。

div.swatch {
    border: 1px solid;
    width: 520px;
    height: auto;
    overflow: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 0px;
    margin-left: 0px;
}
div.box {
    height: 10px;
    width: 10px;
    float: left;
}

<div>Lightness greyscale</div>
<div id="lightness" class="swatch"></div>
<div>Average greyscale</div>
<div id="average" class="swatch"></div>
<div>Luminosity greyscale</div>
<div id="luminosity" class="swatch"></div>

var lightnessDiv = document.getElementById("lightness");
var averageDiv = document.getElementById("average");
var luminosityDiv = document.getElementById("luminosity");
var floats = [];
var lightnesses = [];
var averages = [];
var luminosities = [];
var step = 1 / 256;

for (var i = 0; i < 1; i += step) {
    floats.push(i);
}

function hexToRgb(hex) {
    var bigint = parseInt(hex, 16);
    var r = (bigint >> 16) & 255;
    var g = (bigint >> 8) & 255;
    var b = bigint & 255;

    return [r, g, b];
}

floats.forEach(function (float) {
    var value = Math.floor(16777215 * float);
    var hex = value.toString(16);
    var rgb = hexToRgb(hex);

    var lightness = Math.floor((Math.max(rgb[0], rgb[1], rgb[2]) + Math.min(rgb[0], rgb[1], rgb[2])) / 2);
    var average = Math.floor((rgb[0] + rgb[1] + rgb[2]) / 3);
    var luminosity = Math.floor((0.21 * rgb[0]) + (0.71 * rgb[1]) + (0.07 * rgb[2]));

    lightnesses.push(lightness);
    averages.push(average);
    luminosities.push(luminosity);
});

lightnesses.forEach(function (lightness) {
    var div = document.createElement("div");

    div.className = "box";
    div.style.backgroundColor = "#" + lightness.toString(16) + lightness.toString(16) + lightness.toString(16);
    lightnessDiv.appendChild(div);
});

averages.forEach(function (average) {
    var div = document.createElement("div");

    div.className = "box";
    div.style.backgroundColor = "#" + average.toString(16) + average.toString(16) + average.toString(16);
    averageDiv.appendChild(div);
});

luminosities.forEach(function (luminosity) {
    var div = document.createElement("div");

    div.className = "box";
    div.style.backgroundColor = "#" + luminosity.toString(16) + luminosity.toString(16) + luminosity.toString(16);
    luminosityDiv.appendChild(div);
});

on jsfiddle

Answer 3

如果您的值低于16，并且将三个值组合成颜色代码，请务必添加前导0。

function dec2hex(dec) {
    return Number(parseInt( dec , 10)).toString(16);
}

function pad(h){ //adds leading 0 to single-digit codes
    if(h.length==1) return "0"+h;
    else return h;
}

r = Math.random()*255;
g = Math.random()*255;
b = Math.random()*255; 

color = "#" + pad(dec2hex(r)) + pad(dec2hex(g)) + pad(dec2hex(b));

将浮点值转换为灰度十六进制颜色值

3 个答案: