Question

I have been searching for a method to convert my whole css stylesheet from color values to their respective grayscale values – however I couldn’t find a good way (aside from opening Photoshop and doing it the hard way).

Is there a method to do this, and does anybody know if there a jQuery script that could do it?

Note: This is not a question about converting color images to grayscale images, this is about converting a complete stylesheet to grayscale.

Answer 1

Here’s a Javascript function that will take RGB values, and return desaturated RGB values.

function desaturate(r, g, b) {
    var intensity = 0.3 * r + 0.59 * g + 0.11 * b;
    var k = 1;
    r = Math.floor(intensity * k + r * (1 - k));
    g = Math.floor(intensity * k + g * (1 - k));
    b = Math.floor(intensity * k + b * (1 - k));
    return [r, g, b];
}

And if you wanted to desaturate a specific element in one foul swoop, you could do something like:

function rgb_to_string(r, g, b) {
    return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}

function desaturate_element(selector) {
    var fg = $(selector).css('color').match(/\d+/g);
    var bg = $(selector).css('background-color').match(/\d+/g);
    $(selector).css('color', desaturate(fg[0], fg[1], fg[2]));
    $(selector).css('background-color', desaturate(bg[0], bg[1], bg[2]));
}

See this in action in this JSFiddle. Those desaturation multipliers come from this thread.

One other thing, the k value is how much you want to desaturate by. 1 will desaturate completely, and 0 will not desaturate at all.