Graphics programming : Using HSL Color model to generate palettes

Recently I started working on a ‘Palette Generator’ for digital illustrators.

This will look like a color swatch, but its more of a palette, since hopefully, it will give you a good selection of colors, hues, and neutral grays from which you can use the eyedropper in your digital painting program of choice (Photoshop, Krita, Sketchbook, Medibang Paint, ClipStudio…).

I’ve found that when doing digital paintings, it’s much easier to get your colors and painting going by getting colors via eyedropper from somewhere on your workspace, rather than from using the color wheel.

The basis for this palette generator is the HSL color model. HSL stands for Hue, Saturation, Lightness.

Hue ranges from 0 to 360, going round the entire color spectrum from Reds, Red-Orange, Orange, Orange-Yellow…

Both Saturation and Lightness can have values from 0 to 100. As you can imagine, regardless of the Hue value, if the saturation is 0, then you’ll be generating shades from black to gray to white. So, for example, HSL of (200,0,50) should give you a perfect mid shade gray (Lightness of 50).

For now (until improved), this palette generator aims to ask you what families of colors you want. So, let us say you want Reds in your palette – it will pick a random Hue from 345 to 15. This is the 30-degree range in which ‘reds’ appear. So we pick one, let us say 2, and then depending on how many columns your generated palette will have, it divides the Lightness steps into even numbers.

If your palette will have 5 columns, from left to right it starts with:

$randomsaturation is a random number from 40 to 100. Numbers with

the darkest HSL(2,$randomsaturation,0).
Then the second step will be  (2, $randomsaturation, 0 + 20),
then the third step will be  (2, $randomsaturation, 0 + 20 + 20).

By the time we go across the 5 columns, we would reach a lightness of 100 (which is white).

Then we move to the next row/color and repeat these steps to generate colors from left to right, darkest to lightest.

As expected, this palette generator will be accessible at OBIPIX.com.

Thus far, you can generate palettes for your design and illustration work. I’m still working on it.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

RELATED POST

Sneaker Design

Some basketball shoes I started working on a few days ago. I've finished the major design details...took it for a…

Maze Blocks – 3D Setups

More work done on the ILLUSTRATORS PALETTE

As you might now, I'm creating two palette-generators on obipix.com. One is the illustrator's palette, and the other is the…

Tiles Binary – ObiPix Wallpapers

Tiles Binary is a style of wallpapers on ObiPix.com. I modified it a bit today. In the code to m…