javascript - float 値をグレースケールの 16 進カラー値に変換する

Question

この質問はすばやく簡単です。

float の 2 次元配列 ( 0,0000000 から 1,0000000 ) があり、それらの数値を色の値 ( #000000 から #ffffff ) に変換したいと考えています。

私はグレースケール値について話していることに注意してください。

0 = 黒 | ... | 0.5 = 中間の灰色 | ... | 1 = 白

javascriptでそれを行う方法を知っている人はいますか? どうも。

Answer 1

16 進数のグレースケール値は、対称的な分布または赤、緑、青の値です (例: #111111、#5B5B5B、#A2A2A2)。

10 進数を 16 進数に変換するには、次を使用できます。

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

それを機能させます：

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

したがって、フロートは次の方法で 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);
});

jsfiddleで