Derive color palette from given set of colors

I have a set of colors on a webpage where one color is the main one:

``````#864062 <-- main color
#853f61
#925071
#541c38
#64304A
#eac9d7
``````

Now I would like to derive similar color scheme for any arbitrary main color.

My idea was to:

1. Convert all colors to decimal notation (r, g, b)
2. Calculate ratio of individual components for each other color and main color
3. Use these rates as a conversion matrix for any other main color.

For my example, rgb of individual colors is:

``````134  64  98
133  63  97
146  80 113
84   28  56
100  48  74
234 201 215
``````

Ratio of each component (other color / main color):

``````0.99 0.98 0.99
1.09 1.25 1.15
0.63 0.44 0.57
0.75 0.75 0.76
1.75 3.14 2.19
``````

Now for any new main color I can calculate all the other colors:

``````100 100 100 <-- new main color
99  98  99
109 125 115
63  44  57
75  75  76
175 255 219 (max is 255, cannot have 314)
``````

My question is if this way of calculation makes any sense as I have never done any math with colors before.

• Take a look at Adobe Kuler. You can set a base colour and secondary colors there, and then rotate/change the base colour with the other colours following suit. – Vincent Jun 12 '14 at 12:51
• If you're using this on a web page, I would suggest taking a look at someone elses code to try to understand their math first - Take a look here: github.com/c0bra/color-scheme-js (scroll down) and it explains what they are doing – ntgCleaner Jun 12 '14 at 23:17
• I would agree with Vincent, Adobr Kuler works for me and gives you a variety codes. – Ngeshlew Dec 18 '14 at 15:57

RGB is hard to use for color calculations in my opinion. It is far more easier to create color schemes in the HSL color space.

``````H = Hue,
S = Saturation,
L = Lightness
``````

The colors are divided in those three values. Her is an example for your colors in HSL:

``````H     S    L
331°, 35%, 39%
331°, 36%, 38%
330°, 29%, 44%
330°, 50%, 22%
330°, 35%, 29%
335°, 44%, 85%
``````

You can see, that the hue is nearly the same for all colors. So you could start with a hue base of `330°` and adjust the saturation and the lightness to your liking.

Now if you want to apply this scheme to a greenish color, you could change the hue value to `112°` and get fitting green color scheme.