I'd like design a chart and set the colors from a single exemplar. Same way as in Excel's:
Is there some sort of a formula or algorithm to generate the next shade of color from a given shade or 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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With