Quickly Create Color Shades in Axure

color shading

If you design in Axure it’s good to know how to quickly create accent colors without having to spend time in other software or browsing the web for color schemes.

And it’s pretty easy.

1) First create a rectangle with a solid fill color of your choice.

2) Duplicate the rectangle several times, based on how many shades you want.

3) Use the Opacity function in Axure’s color picker to give each rectangle less opacity than the previous rectangle.  In my example I’m using a 100,80,60,40,20 scheme.

color shading 2

If you are well versed in Axure you probably have already done something along these lines before.  However there is one more step you should take in order to remove the transparency %’s while keeping the colors.  Otherwise any elements with transparency that overlap another element will end up looking bizarre.

4) Select one of the rectangles that has some transparency.  Go back to Axure’s color palette and select the color picker.  Hover over the semi transparent element and click. This won’t change the color you see, but the color value will go from something with transparency to a completely solid color.

For example, when you hover over a rectangle with #008000 and 80% opacity you will see that this is the equivalent color of #339933 (assuming a white background).  And now the element can be used normally without worrying that it might overlap another element.

This technique can also be used to darken colors.  Simply add a black rectangle behind the elements and apply the same color picking to find darker shades of a color.

color shading 2

And that’s it.  Hope this helps you use Axure more efficiently in your designs.

Advertisements

Author: Adam

Founder of AxureThemes.com, and Senior UX prototyper.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s