How to create pastel colors programmatically in C#?

c# .net algorithm colors

20,826

Solution 1

You'll find colors easier to work with in these sorts of problems if you use HSV instead of RGB.

"equally spaced colors" almost always means "equally spaced hues". So, for [0,360) in hue, you just equally space by dividing that range equally.

Now you have a hue, and you just need to find the "pastel" version of that hue. To me, this means desaturating the color a bit. I'd say to 80% saturated for starters.

In my tests, I used 100% for value. Then just convert to RGB. Here's what I've been playing with:

<body>
<script>
// taken from http://ariya.blogspot.com/2008/07/converting-between-hsl-and-hsv.html
function hsv_to_hsl(s, v)
{
    var ss, ll;
    ll = (2. - s) * v;
    ss = 1. * s * v;
    ss /= (ll <= 1.) ? (ll) : 2. - ll;
    ll /= 2.;

    return [ss, ll];
}

function do_colors(sat, light)
{
    n = 15;
    document.write(n + " colors at " + sat + "% sat, " + light + "% lightness<br />");
    for(var x = 0; x < n; ++x)
    {
        hue = 360.0 / n * x;
        html_chunk = "<div style='width: 50px; height: 50px; display: inline-block; background: hsl(" + hue + ", " + sat + "%, " + light + "%);'>&nbsp;</div>";
        document.write(html_chunk);
    }
    document.write("<br />");
}

do_colors(100, 50);
do_colors(95, 75);
do_colors(75, 50);
do_colors(100, 35);

// rudimentary averages from your colors
sl = hsv_to_hsl(.7, .9);
s = sl[0] * 100;
l = sl[1] * 100;
do_colors(s, l);
do_colors(75, 60);
</script>
</body>

Not C#, I know, but just trying to nail the light & sat down.

Otherwise, you could look at your sample colors, and see if there is any correlation in the HSV/HSL values, and try to derive an algorithm from that. If you plot S/H and V/H, you'll see a large dip in the graph at the grey color --- it seems to be an outlier. (Third from left on bottom row.) Ignoring that value, S is about at 75% and value is just under 90%. Using those values probably gave the nicest result.

Link: http://jsfiddle.net/ZHyAQ/

Solution 2

You can also take a look at Rich Newman's HSLColor class. He has a series of blog posts on it, starting with this one.

Using this code I was able to generate a series of colors evenly spaced around the color wheel, but you'll have to add additional logic if you want to include shades of grey.

private void button1_Click(object sender, EventArgs e) 
{ 
    listView1.Items.Clear(); 

    int step = 240 / 8; 

    for (int i = 0; i < 240; i += step) 
    { 
        HSLColor color = new HSLColor((double)i, 240, 160); 
        listView1.Items.Add(i.ToString()).BackColor = color; 
    }                
}

enter image description here

20,826

Author by

Joan Venge

Professional hitman.

Updated on October 19, 2020

Comments

Joan Venge over 3 years
To generate them equally spaced out based on the number of colors wanted. Something that looks like this if 8 is given for the count specified:
```
List<Color> GeneratePastelColors (int count)
```
Joan Venge over 12 years

Thanks, this simplifies the problem, not sure how to convert them to pastel though. Would 80% desaturation be accurate?
Thanatos over 12 years

Actually, I tried 80%, but wasn't terribly pleased with the result. It might just be something to experiment with.
Joan Venge over 12 years

Thanks, appreciate it. Yeah it will be a little tricky to make them pastel colors.
Alexander Taubenkorb over 10 years

60% lightness seems to be good with saturation above 60%. I extended the jsfiddle of @Thanatos for every saturation and lightness combination (10%step) with 60% ligtness and 60%+ saturation at the end: see jsfiddle.net/bTFWb
gremwell about 10 years

If using C++/Qt: color = QColor::fromHsl(i, 240, 160);