Gradient Color Matching Tutorial

1 Response

1. Pro Paul Farino

   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

   1likes

   8 months ago