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" ]
    }
  ]
}