javascript - Converting float values to a grayscale hex color value

Question

this question is quick and simple.

I've a 2d array of floats ( 0,0000000 to 1,0000000 ) and i want to convert those numbers to a color value ( #000000 to #ffffff ).

note that i'm talking about just grayscale values.

0 = black | ... | 0.5 = middle gray | ... | 1 = white

does anyone know how to do that with javascript ? thx.

Answer 1

Grayscale values in hex are those which got symmetrical distribution or Red, Green and Blue, e.g.: #111111, #5B5B5B, #A2A2A2.

To convert decimal number to hexadecial number you can use:

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

Put that to function:

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

So your float can be converted to hex with:

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"

So your function will look like this:

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

Here is an example using 3 colour to greyscale methods, Lightness, Average and Luminosity.

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

Just be sure to add leading 0's if your value is below 16 and you combine three values into a color code.

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));