3

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.

  • 1
    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
3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.