Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I generate multiple shades from a given base color?

Tags:

colors

delphi

I'd like design a chart and set the colors from a single exemplar. Same way as in Excel's:

alt text

Is there some sort of a formula or algorithm to generate the next shade of color from a given shade or color?

like image 483
Rick Avatar asked Sep 07 '10 03:09

Rick


People also ask

How do you get different shades of the same color?

Tints are lighter versions of the color that are made by mixing a color with white, whereas shades are darker versions of the color that are made by mixing a color with black. For example, pink is a tint of red, while maroon is a shade of red.

How do you create shades of a color?

So, what are tints and shades? Tints and shades are art terminology for the lighter and darker variations of a single color. They're created by adding white (for tints) or black (for shades) to a base color.

How are tints and shades created?

Tints are light values that are made by mixing a color with white. For example, pink is a tint of red, and light blue is a tint of blue. Shades are dark values that are made by mixing a color with black.

What's the difference between tint and shade?

In color theory, a tint is a mixture of a color with white, which increases lightness, while a shade is a mixture with black, which increases darkness. Both processes affect the resulting color mixture's relative saturation. A tone is produced either by mixing a color with gray, or by both tinting and shading.


1 Answers

That looks to me like they just took the same hue (basic color) and turned the brightness up and down. That can be done easily enough with a HSL or HSV transformations. Check Wikipedia for HSL and HSV color spaces to get some understanding of the theory involved.

Basic idea: Computers represent color with a mixture of red intensity, green intensity and blue intensity, called RGB, because that's the way the screen displays color. HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) are two alternative models for representing color that are more intuitive and closer to the way human beings tend to think about how colors look.

Hue is the basic color, represented (more or less) as an angle on a color wheel. Saturation is a linear value, from 0 (gray) to 255 (bright, vibrant color). And Lightness/Value represent brightness, from 0 (black) to 100 (white).

The algorithms to transform from RGB -> HSL and HSL -> RGB (or HSV instead of HSL) are pretty straightforward. Try transforming your color to HS*, adjusting the brightness, and transforming back. By taking several different brightness values from low to high, and arranging them as wedges in a pie chart, you can duplicate that picture pretty easily.

like image 89
Mason Wheeler Avatar answered Sep 24 '22 01:09

Mason Wheeler