Take the 2-minute tour ×

I have gradient button that generated by 2 colors:#0880A9, #066383.(blue). I want to create button with red gradient that have same ratio as my blue gradient.

How should i do this calculation? (please if you ca also reference to good articles about that issue)

Thanks, Yosef

share|improve this question
Edit your question to mention which application(s) you are working in. Nobody can answer the question as you've written it. –  Alan Gilbertson Jan 7 '12 at 20:54
add comment

1 Answer

To get a matching gradient, you need to choose colors that have the same lightness and saturation as in your blue gradient, but with their hue shifted to red instead.

A simple way to do this is to use the color picker tool in your favorite paint program (Photoshop, GIMP, Paint.NET, etc.), or one of the many similar online tools such as colorpicker.com. Just enter the original colors and adjust the hue slider to whatever shade you want.

For example, using colorpicker.com and changing the hue of your original colors from 195 (sky blue) to 340 (purplish red), I get the colors #A9083E and #830630.

However, note that these color pickers typically use a somewhat simplified HSL color model, so the colors you get may not have exactly the same perceptual lightness as what you started with. In practice, that means you may find that you need to adjust the lightness a bit too to get a perfect match.

share|improve this answer
add comment

Your Answer


