4

I have the next problem.
I have a base color with couple of different shades of that color.

Example:

  • Base color: #4085c5
  • Shade: #005cb1

Now, I have a different color (let's say #d60620), but no shades of it. From the color I would like to calculate shades, that have similar difference as colors mentioned in first paragraph.

First I tried calculating difference of RGB elements and applying them to second color, but the result was not like I expected to be.
Than I tried with converting color to HSV, reading saturation value and applying the difference to second color, but again the resulting color was still weird.

The formula was something like: (HSV(BaseColor)[S] - HSV(Shade)[S]) + HSV(SecondColor)[H]

Does anyone know how this problem could be solved? I know I am doing something wrong, but I don't know what. :)

matejv
  • 116
  • 2
  • 10
  • see similar posts: http://stackoverflow.com/questions/5367909/get-color-shade-with-php, http://stackoverflow.com/questions/1773698/rgb-to-hsv-in-php and http://stackoverflow.com/questions/6615002/given-an-rgb-value-how-do-i-create-a-tint-or-shade – ficuscr Oct 05 '12 at 17:54

2 Answers2

4

There are two ways to darken a color:

  • Subtract an equal amount from R,G,B. This increases the saturation. Obviously you can only subtract an mount equal to the least of the R,G,B values.
  • Multiply R,G,B by a value less than 1.0. This leaves the saturation more or less intact.

Similarly, there are two ways to lighten a color:

  • Add an equal amount to R,G,B. This decreases the saturation.
  • Multiply R,G,B by a value greater than 1.0. This increases the vividness of the color and thus the apparent saturation.

Your example appears to have done both - subtracting 0x40 from each value and multiplying by 1.33.

Using your second color, we can subtract 06 from each resulting in #d0000a but this is not dark enough. Multiplying it by 0.735 results in #990013.

enter image description here

Mark Ransom
  • 299,747
  • 42
  • 398
  • 622
1

Your first two colours both have a "H" (hue) value of 209, and varying values for "S" and "V".

This common hue is what defines the second colour as being a "shade" of the first colour.

To find alternative shades of your third colour, use an RGB to HSV conversion to find its hue, modify its S and V values as desired, and then convert back to RGB.

Alnitak
  • 334,560
  • 70
  • 407
  • 495
  • While your solution is right, the definitions are slightly off: [shade is typically defined as being darker than the base](http://www.workwithcolor.com/color-properties-definitions-0101.htm) (for example, navy is a shade of blue). In HSV space, that means a decrease in V. – ssube Oct 05 '12 at 20:59