How to create a color of the same brightness and saturation?


Let's consider three colors: Red, Green and Blue. For blue I created a specific shade, something like #F2F5F7. If you see this color, it has a certain level of shade, brightness and saturation value of blue.

I want to create the same equivalent color but for Green and Red, how to get that?

4/17/2015 12:12:00 PM

Accepted Answer

This is exactly what the HSB colour model is for. You have almost exactly named the model's variables in your question:

  • Hue is the 'kind' of colour: red, blue, orange, yellow;
  • Saturation is inverse with the amount of white you add to the hue;
  • Brightness is inverse with the amount of black you add.

So, to take your example colour of #F2F5F7. you can convert this into HSB in Photoshop or Illustrator's colour picker, yielding H=203, S=1, B=96 as HSB values.

All you have to do now is change the H to the hue you want. For a green, try H=83 and leave the S and B values intact. This is converted by the colour picker right away and yields #f3f4f2.

4/17/2015 11:12:00 AM