How to add transparency to colors in Flourish

Flourish charts allow a lot of flexibility when it comes to color customization from overrides for individual elements, to custom palettes. But, did you know you can also set colors with a specific level of transparency?

The following story showcases how transparency can increase the legibility of your charts, help you highlight information, and improve your overall narrative.

How does transparency work?

Transparency or opacity is commonly represented as percentages (0 to 100%) or decimal points (0 to 1), where 100% opacity means the color is fully opaque, while 0% makes it completely transparent. You may also read that some people refer to this as the alpha value or alpha channel.

You can add values of transparency to your hex codes or RGB codes anywhere in Flourish where you can declare color. Here's how:

Hexadecimal codes (or hex codes)

These are six-digit alphanumeric codes that determine the hue of a color. Each code is preceded by a hash sign ( #). Here the code for black is #000000 and the code for white is #FFFFFF. But hex codes can also take two extra codes to set the transparency.

1

Use this GitHub page as a reference and determine what level of opacity you want your element to have.

2

Add the two-digit code to the end of your existing hexcode to apply the opacity levels. By default, all hexcodes have an opacity of 100%, or FF.



TIP: You can set colors in your palette to have a certain transparency, but it will not show up as part of the color code after you set the value. So, if I set up a color in my palette to be #8f8f8f4d (4d meaning 30% opacity) the editor will only display #8f8f8f but the transparency will still be applied.

RGB codes

RGB stands for red, green, and blue and is the most popular method for designating colors in the digital world because it is based on the three colors that compose the images on our screens.

These codes are made up of three numbers separated by commas each ranging from 0 (black or absence of color) to 255 (white or full presence of color). The RGB code for white is rgb(255, 255, 255) while the code for black is rgb(0, 0, 0). 

RGB codes with opacity are referred to as RGBA codes (remember the alpha channel? That's the A). They look just like normal RGB codes, but they use the abbreviation rgba and have a fourth value added to the end of the code. The fourth value represents the opacity and is specified as a decimal, so 1 equals 100% opacity and 0 means 0%. A value of 0.5 would mean 50% opacity.

1

To set the opacity of your RGB color code simply use rgba at the start of the code, and add your opacity value to the end of your code. For example,  rgba(0, 144, 163, 0.7)