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

  • 1
    Edit your question to mention which application(s) you are working in. Nobody can answer the question as you've written it. Jan 7, 2012 at 20:54

1 Answer 1


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.

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.