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:
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
8 months ago
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter