0

I have many different grays (ranging from black to white) which I want to convert to random pastel colors where each pastel has the same brightness as the gray color did. So a dark gray should be converter to any random dark pastel color.

I found a way to generate random pastel colors (Algorithm to randomly generate an aesthetically-pleasing color palette) but I don't know how to convert a gray to a pastel color with the same brightness.

Does anybody have an idea how to approach this problem?

Thanks a lot!

Community
  • 1
  • 1
user1658080
  • 631
  • 1
  • 7
  • 18

1 Answers1

0

You can just do a linear inpterpolation between two colours, a "black" colour that corresponds to a grey value of zero and a "white" colour that corresponds to a grey value of 255.

The effect you describe would use your pastel as "black" and white as "white". Colour interpolations in RGB space are tricky when different hues are involved, but in your case, where the two colours have the same or similar hues, there should be no problem. (Your original code to get a nice pastel colour probably uses the same mechanism by interpolating halfway between white and a random colour.)

Here's an example that turns greyscale image data into a pastel colour scheme based on the red value of the data. (Greys have three identical colour components, but no effort is made to ensure that.)

function pastel(idata, black, white) {
    var data = idata.data;
    var n = 0;

    for (var y = 0; y < idata.height; y++) {
        for (var x = 0; x < idata.width; x++) {
            var grey = data[n] / 255.0;
            var yerg = 1.0 - grey;

            data[n++] = (yerg * black.r + grey * white.r) | 0;
            data[n++] = (yerg * black.g + grey * white.g) | 0;
            data[n++] = (yerg * black.b + grey * white.b) | 0;
            n++;
        }
    }        
}

Edit: Here's a complete webpage for yor copy-and-pasting pleasure. You must have the image file "pic.png" in the same directory. The colours are Javascript objects with r, g and b fields.

The image data comes from a canvas, to which the image is drawn. The image data contains the pixels in rgba format; it can be manipulated and then placed back on the canvas. (The extra n++ in the loop skips the alpha value and leaves it unchanged.)

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8" />
<title>Colour Interpolation</title>
<script type="text/javascript">

    function pastel(idata, black, white) {
        var data = idata.data;
        var n = 0;

        for (var y = 0; y < idata.height; y++) {
            for (var x = 0; x < idata.width; x++) {
                var grey = data[n] / 255.0;
                var yerg = 1.0 - grey;

                data[n++] = (yerg * black.r + grey * white.r) | 0;
                data[n++] = (yerg * black.g + grey * white.g) | 0;
                data[n++] = (yerg * black.b + grey * white.b) | 0;
                n++;
            }
        }        
    }

    window.onload = function() {
        var cv = document.getElementById("map");
        var cx = cv.getContext("2d");

        var img = document.createElement('img');

        img.src = "pic.png";
        img.onload = function(e) {
            var img = this;
            img.width = img.naturalWidth;
            img.height = img.naturalHeight;

            cv.width = img.width ;
            cv.height = img.height;

            cx.drawImage(img, 0, 0);

            var idata = cx.getImageData(0, 0, img.width, img.height);

            pastel(idata,
                {r: 102, g: 51, b: 0},
                {r: 255, g: 255, b: 204});
            cx.putImageData(idata, 0, 0);
        };

    }

</script>
</head>

<body>
<canvas id="map" width="96" height="96">Kann nix.</canvas>
</body>

</html>
M Oehm
  • 28,726
  • 3
  • 31
  • 42
  • Thanks so much for your reply and effort. As a total java-script beginner, could you please help me how to use this code with an example? sorry and thanks so much! :D – user1658080 Dec 21 '15 at 09:02
  • I've added a complete webpage (without the image), which you can copy and paste. I hope that helps you get started with image manipulaion. The code was tested in Firefox. – M Oehm Dec 21 '15 at 10:20
  • Thanks so much but I was not able to run this code, I tried FF and Chrome with an imaged named "pic.png". I created a jsfiddle; did I make an mistake? https://jsfiddle.net/er4pr266/ – user1658080 Dec 22 '15 at 09:49
  • Well, your fiddle misses the HTML page, which has the canvas that is needed. The code above is a complete page, which you can copy and save as `whatever.html`. When you have a PNG image named ´pic.png` in the same folder, this will be pastelled and displayed when you display the page. I really can't help you more than that. – M Oehm Dec 22 '15 at 10:05
  • Your code above ends with the closing tag of the head. When I add ` – user1658080 Dec 22 '15 at 12:46
  • Oh, that's right. I hadn't noticed that. I've added the missing body, which isn't much different from the one you came up with yourself. I can't reproduce that the image is the orginal image. What does the console (Ctrl+Shift+J) say? – M Oehm Dec 22 '15 at 12:57