Using Translucent Colors

May 1, 2013
Design Approaches

One great feature that isn’t very obvious is the capability of using translucent colors. Using transparent colors in certain ways can easily improve the styling of your chart. You could use this feature on not only the colors of the bars, pie slices or lines, but also on fonts, fill colors and much more.

In this “Before” screenshot a simple LineChart uses color fill without any Translucent styling. As you can see, the color fill is a solid blue that covers the grids. You may also notice that the color of both the tic labels and the grid are also very strong.


Here the “After” screenshot has the Translucent styling added. By using translucent colors on the chart, the results are much more sophisticated and softer on the eye. Now the blue color fill is also translucent enough to allow you to see the grid. The grid in turn is also softer to not distract the eye from being able to follow the line and data points.


To get translucent colors you will need to add an underscore and value ( _value) to a color. For example with a Hexdecimal RGB value it would be x005699_30 or if you’re using a Predefined Color Name it would be defined as green_70. The value range is from 0-250 in strength. So for example on the lower screenshot the color fill uses a value of x009CEA_20 while the tic labels are black_150 and the grids are white_50.

Of course, there isn’t a set rule of what’s the best value to use. Instead you’ll have to try different values until it looks the way you like and that’s the fun part!

Comments are closed.