Gradient Color Matching Tutorial

I was introduced to a good technique this week on how to match gradient colors on 2 different buttons (by the color change ratio).

*Note this is for the upmost pixel anal designers

Scenario: So you have 1 button designed, and a 2nd button base color but want to match the gradients.

Button 1 looks something like this:
background-color: #4264CD
border: 1px solid #3456C2
gradient from #4264CD to #3456C2

Head over to this
Binary to Decimal to Hexadecimal Converter.

Type in 4264CD in the Hexadecimal area
You get a decimal of 4351181
Now type in 3456C2 in the Hexadecimal area
You get a decimal of 3430082
4351181 - 3430082 = 921099

-------
Your 2nd button is already designed at #D14836
Now come a slightly different process.

Type in D14836 in the Hexadecimal area
You get a decimal of 13715510
13715510 - 921099 = 12794411
Type 12794411 in the Decimal area
You get C33A2B (That's your other color)

So your other button gradient is #D14836 to #C33A2B

View all tags
Posted on Sep 17, 2012

More by Paul Farino

View profile