Create 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
Sheet title styling objects
| Object | Colors defined in |
|---|---|
| Background color | "palettes": {"ui": [0]} |
| Font color | "palettes": {"ui": [0]} |
Properties panel
Properties panel objects
| 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
Master item objects
| Object | Colors defined in |
|---|---|
| Measure color | "palettes": {"ui": [0]} |
| Dimension color | "palettes": {"ui": [0]} |
| Dimension value colors | "palettes": {"ui": [0]} |
Storytelling
Storytelling objects
| 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
theme.json
{
"_inherit": false,
"_variables" : {
"@grayscale-100" : "#FFFFFF",
"@grayscale-98" : "#FBFBFB",
"@grayscale-95" : "#F2F2F2",
"@grayscale-90" : "#E6E6E6",
"@grayscale-85" : "#D9D9D9",
"@grayscale-80" : "#CCCCCC",
"@grayscale-75" : "#BFBFBF",
"@grayscale-70" : "#B3B3B3",
"@grayscale-65" : "#A6A6A6",
"@grayscale-60" : "#999999",
"@grayscale-55" : "#8C8C8C",
"@grayscale-50" : "#808080",
"@grayscale-45" : "#737373",
"@grayscale-40" : "#666666",
"@grayscale-35" : "#595959",
"@grayscale-30" : "#4D4D4D",
"@grayscale-28" : "#474747",
"@grayscale-25" : "#404040",
"@grayscale-20" : "#333333",
"@grayscale-15" : "#262626",
"@grayscale-10" : "#1A1A1A",
"@grayscale-5" : "#0D0D0D",
"@grayscale-0" : "#000000",
"@text" : "13px"
},
"color": "@grayscale-20",
"fontSize": "@text",
"backgroundColor": "@grayscale-95",
"dataColors": {
"primaryColor": "@grayscale-28",
"othersColor": "@grayscale-55",
"errorColor": "@grayscale-90",
"nullColor": "@grayscale-85"
},
"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"
]
}
]
},
"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" ]
}
]
}