Creating custom color palettes and color scales

These examples show how to create color palettes and color scales for your custom themes. All properties referenced in the examples below are described in detail in Custom theme JSON properties.

What is being used where?

The color palettes and color scales you define are being used in different places in Qlik Sense.

Sheet title styling

Object Colors defined in
Background color "palettes": {"ui": [0]}
Font color "palettes": {"ui": [0]}

Properties panel

Object Colors defined in
Auto

"palettes": {"data": [ 0 ]}

That is, the first palette defined in data.

Note: Charts set to color="auto" uses the primaryColor when only one color is used, for example in one-dimensional bar charts. Charts with more colors uses the first palette defined in data, for example in pie charts or multi-dimensional bar charts.
Single color "palettes": {"ui": [0]}
by Dimension "palettes": {"data": [...]}
by Measure "scales": [{...}]

Master items

Object Colors defined in
Measure color "palettes": {"ui": [0]}
Dimension color "palettes": {"ui": [0]}
Dimension value colors "palettes": {"ui": [0]}

Storytelling

Object Colors defined in
Shape background color "palettes": {"ui": [0]}

Defining the color palettes (data, ui)

The colors defined in the data palette are used for Color by dimension in the properties panel.

Though you can define several palettes in ui, the first palette defined here is used in the color picker for example when coloring by single color.

Note: Colors should be defined using hexadecimal values.
"palettes" : { "data" : [ { "name": "Dark colors", "translation": "Dark colors", "propertyValue": "12", "type": "row", "scale": [ "#808080", "#737373", "#666666", "#595959", "#4D4D4D", "#474747", "#404040", "#333333", "#262626", "#1A1A1A", "#0D0D0D", "#000000" ] }, { "name": "Light colors", "translation": "Light colors", "propertyValue": "11", "type": "row", "scale": [ "#FFFFFF", "#FBFBFB", "#F2F2F2", "#E6E6E6", "#D9D9D9", "#CCCCCC", "#BFBFBF", "#B3B3B3", "#A6A6A6", "#999999", "#8C8C8C" ] } ], "ui": [ { "name": "Palette", "colors": [ "#FFFFFF", "#FBFBFB", "#F2F2F2", "#D9D9D9", "#BFBFBF", "#A6A6A6", "#8C8C8C", "#808080", "#737373", "#595959", "#474747", "#404040", "#262626", "#0D0D0D", "#000000" ] } ] }

Defining the color scales

The color defined in the scales are used for Color by measure in the properties panel.

If you define two colors in the scale property, Qlik Sense generates a color scale between those colors.

Note: Colors should be defined using hexadecimal values.
"scales": [ { "name": "Light colors sequential gradient", "translation": "Light colors sequential gradient", "type": "gradient", "propertyValue": "sg", "scale": [ "#8C8C8C", "#FBFBFB" ] }, { "name": "Light colors sequential classes", "translation": "Light colors sequential classes", "propertyValue": "sc", "type": "class", "scale": [ "#8C8C8C", "#FBFBFB" ] }, { "name": "Dark colors diverging gradient", "translation": "Dark colors diverging gradient", "propertyValue": "dg", "type": "gradient", "scale": [ "#737373", "#0D0D0D" ] }, { "name": "Dark colors diverging classes", "translation": "Dark colors diverging classes", "propertyValue": "dc", "type": "class", "scale": [ "#737373", "#0D0D0D" ] } ]

Full code example

Did this information help you?

Thanks for letting us know. Is there anything you'd like to tell us about this topic?

Can you tell us why it did not help you and how we can improve it?