Qlik Community

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Announcements
Read about the latest Qlik Community enhancements on the Community News blog!
Charles_Bannon
Employee
Employee

When developing a Qlik Sense app, there will come a time where you are going to want to define your own colors for certain values in a visualization. Did you know that Qlik Sense offers many ways to achieve your desired outcome?

When developing a Qlik Sense app, there will come a time where you are going to want to define your own colors for certain values in a visualization. Did you know that Qlik Sense offers many ways to achieve your desired outcome? In this blog, I will talk through the different color functions, and show an example for each color function.

RGB()

RGB() is used in expressions to set or evaluate the color properties of a chart object, where the color is defined by a red component r, a green component g, and a blue component b with values between 0 and 255.

Syntax: RGB(r, g, b)

For this example, I am going to use fantasy football data. Let’s say I have a scatter plot and I want to color the values on the scatter plot a specific color based on player position. I can create an expression to target each position:

First thing that I need to do is open the chart properties and navigate to the Colors and Legend section and select by expression as my custom color property.

Charles_Bannon_0-1627065566351.png

 

My expression: 

Charles_Bannon_1-1627065566379.png

 

Result:

Charles_Bannon_2-1627065566533.png

 

Now let’s say that I want to soften my colors by adding some opacity to them. For that, we’ll use ARGB().

ARGB()

ARGB() is used in expressions to set or evaluate the color properties of a chart object, where the color is defined by a red component r, a green component g, and a blue component b, with an alpha factor (opacity) of alpha.

The first value is the opacity. The lower the number, the more the color will look faded.

Syntax: ARGB(alpha, r, g, b)

 

My expression:

Charles_Bannon_3-1627065566559.png

 

Result:

Charles_Bannon_4-1627065566711.png

 

Red has a high alpha factor, which means it maintains more of the red color. Conversely, the yellow has a very low alpha number and renders as the most faded color.

Another way to color your values is the HSL() function.

HSL()

HSL() is used in expressions to set or evaluate the color properties of a chart object, where the color is defined by values of hue, saturation, and luminosity between 0 and 1.

Syntax: HSL (hue, saturation, luminosity)

This one is tougher to understand and you will need to perform some calculations in order to arrive at the correct HSL values. For example: The color blue that we used in the RGB function is RGB(0,76,153) after using an online RGB to HSL converter, we find that the new value for HSL is HSL(210 degrees, 100%, 30%). To make this a valid value for Qlik Sense we need to do some conversion. First we take the 210 degrees and divide that by 360 to get 0.583. We then convert the percentages to decimals. Our final value for the HSL for blue is HSL(0.583, 1, 0.30).    

My expression:

Charles_Bannon_5-1627065566742.png

 

Result:

Charles_Bannon_6-1627065566887.png

 

Color Function

We can also use the many color functions defined in Qlik Sense. There are 16 defined colors: black(), darkgray(), lightgray(), white(), blue(), lightblue(), green(), lightgreen(), cyan(), lightcyan(), red(), lightred(), magenta(), lightmagenta(), brown(), yellow(). One thing to be aware of when using the predefined color functions is that you will lose the ability to match exactly to the color that you are envisioning. 

My expression:

Charles_Bannon_7-1627065566908.png

 

Result:

Charles_Bannon_8-1627065567031.png

 

As you can see, there are many ways to achieve your desired color palette. Becoming familiar with these powerful functions can help to take you Qlik development skills to the next level. Happy Qlikking!

1 Comment
Or
Master
Master

Regarding the preset colors, e.g. blue(), they all take an Alpha parameter which is identical to the one in ARGB(), so you have a decent level of control over what they look like rather than being limited to one very specific output.

1,276 Views