You are viewing our older product's guide. Click here for the documentation of GoodData Cloud, our latest and most advanced product.

Importing Custom Color Palettes

You can customize report colors by loading your own RGB color palettes into your workspaces.

Importing custom color palettes requires the use of APIs and Administrator permissions.

Color Palettes Overview

Import color palettes to make custom colors available for use in reports

Prerequisites

To import custom color palettes, you must sign in to the GoodData Portal as a workspace administrator. If any errors arise during the following steps, try reloading the Portal in a separate tab or window. Log in again if prompted.
You need a REST API client to import custom color palettes.

Establishing a New Color Palette

Replace the default color palette with your own array of colors. If needed, you can revert to the default palette by deleting any uploaded custom palette.

In GoodData, terms workspace and project denote the same entity. For example, project ID is exactly the same as workspace ID. See Find the Workspace ID.

Determine your colors. Each color in a color palette is defined in RGB format.
If you’re in the process of determining the colors to add to your palette, search the web for RGB color wheel or hexadecimal to RGB converter. Browser add-ons like ColorZilla allow you to acquire color values from web pages to identify their hexadecimal and RGB values.
Enter your workspace’s style settings URL. Paste the following URL into the URL field of your REST client:
```
https://secure.gooddata.com/gdc/projects/<project_ID>/styleSettings
```
Replace <project_ID> with the ID of the workspace to which you are loading your color palette. Workspace IDs can be identified using the URL of any page within a workspace:
```
https://secure.gooddata.com/#s=/gdc/projects/<project_id>|objectPage|/...
```
Copy the section of the URL that follows projects/ and comes before the pipe symbol (|).
Establish REST client settings. After you’ve inserted the workspace ID into the correct section of the REST client URL field, input the following settings in the appropriate fields:
- Method: PUT
- resource: https://secure.gooddata.com/gdc/projects/{workspace_id}/styleSettings
- Header: Content-Type: application/json
- Body: See step 4.
Enter your color palette as a JSON object.
For the body of the request, enter your new color palette as a JSON object. The syntax for an example four-color palette is below, where each line preceded by “guid” represents another color in the palette as defined by RGB values:
```
{"styleSettings" :
{"chartPalette": [ 
   { "guid": "guid1", "fill": { "r":255, "g":0, "b":0 } }, 
   { "guid": "guid2", "fill": { "r":255, "g":255, "b":0 } }, 
   { "guid": "guid3", "fill": { "r":0, "g":0, "b":255 } }, 
   { "guid": "guid4", "fill": { "r":255, "g":0, "b":255 } } 
  ] 
} 
}
```
If you’re unfamiliar with JSON, use this example as a structure for inserting your own RGB color values in place of the color values listed above. Add more colors to your palette by duplicating a row from the example before changing the second value in the line to “guid5,” “guid6,” “guid7,” etc. The second value of each row must be unique.
Commas follow the syntax for every distinct color except for the last color added (see the example below).

Color palette example 1

Here’s another example of what would be a very… yellow… workspace.

Yellow-toned palette

{"styleSettings" :
   {"chartPalette": [ { "guid": "guid1", "fill": { "r":255, "g":255, "b":0 } }, 
     { "guid": "guid2", "fill": { "r":255, "g":255, "b":40 } }, 
     { "guid": "guid3", "fill": { "r":255, "g":255, "b":80 } }, 
     { "guid": "guid4", "fill": { "r":255, "g":255, "b":120 } }, 
     { "guid": "guid5", "fill": { "r":255, "g":255, "b":180 } }, 
     { "guid": "guid6", "fill": { "r":255, "g":255, "b":200 } } 
     ] 
   } 
}

Color palette example 2

And here’s one more example, kindly provided by our partners at Keboola.

Palette

{"styleSettings" : 
   {"chartPalette": [ { "guid": "guid1", "fill": { "r":255, "g":0, "b":0 } }, 
     { "guid": "guid2", "fill": { "r":255, "g":102, "b":0 } }, 
     { "guid": "guid3", "fill": { "r":255, "g":102, "b":0 } }, 
     { "guid": "guid4", "fill": { "r":255, "g":153, "b":0 } }, 
     { "guid": "guid5", "fill": { "r":255, "g":153, "b":0 } }, 
     { "guid": "guid6", "fill": { "r":255, "g":204, "b":0 } }, 
     { "guid": "guid7", "fill": { "r":255, "g":204, "b":0 } }, 
     { "guid": "guid8", "fill": { "r":204, "g":204, "b":0 } }, 
     { "guid": "guid9", "fill": { "r":153, "g":204, "b":0 } },
     { "guid": "guid10", "fill": { "r":102, "g":204, "b":0 } },
     { "guid": "guid11", "fill": { "r":255, "g":102, "b":0 } },
     { "guid": "guid12", "fill": { "r":255, "g":153, "b":0 } },
     { "guid": "guid13", "fill": { "r":255, "g":153, "b":0 } },
     { "guid": "guid14", "fill": { "r":255, "g":204, "b":0 } },
     { "guid": "guid15", "fill": { "r":255, "g":204, "b":0 } },
     { "guid": "guid16", "fill": { "r":153, "g":204, "b":0 } },
     { "guid": "guid17", "fill": { "r":153, "g":204, "b":0 } },
     { "guid": "guid18", "fill": { "r":102, "g":204, "b":0 } },
     { "guid": "guid19", "fill": { "r":0, "g":153, "b":51 } },
     { "guid": "guid20", "fill": { "r":0, "g":153, "b":153 } },
     { "guid": "guid21", "fill": { "r":0, "g":102, "b":153 } },
     { "guid": "guid22", "fill": { "r":51, "g":102, "b":153 } },
     { "guid": "guid23", "fill": { "r":51, "g":51, "b":153 } },
     { "guid": "guid24", "fill": { "r":51, "g":51, "b":153 } },
     { "guid": "guid25", "fill": { "r":102, "g":51, "b":153 } },
     { "guid": "guid26", "fill": { "r":153, "g":0, "b":153 } },
     { "guid": "guid27", "fill": { "r":204, "g":0, "b":102 } },
     { "guid": "guid28", "fill": { "r":204, "g":0, "b":51 } },
     { "guid": "guid29", "fill": { "r":255, "g":51, "b":0 } },
     { "guid": "guid30", "fill": { "r":255, "g":102, "b":0 } },
     { "guid": "guid31", "fill": { "r":0, "g":204, "b":0 } },
     { "guid": "guid32", "fill": { "r":0, "g":153, "b":102 } },
     { "guid": "guid33", "fill": { "r":0, "g":153, "b":153 } },
     { "guid": "guid34", "fill": { "r":0, "g":102, "b":153 } },
     { "guid": "guid35", "fill": { "r":51, "g":51, "b":153 } },
     { "guid": "guid36", "fill": { "r":102, "g":51, "b":153 } },
     { "guid": "guid37", "fill": { "r":102, "g":0, "b":153 } },
     { "guid": "guid38", "fill": { "r":153, "g":0, "b":153 } },
     { "guid": "guid39", "fill": { "r":153, "g":0, "b":102 } },
     { "guid": "guid40", "fill": { "r":204, "g":0, "b":51 } }
     ]
   }
}

Updating the Existing Color Palette

If you’d like to update the current palette instead of replacing it, begin your JSON code with the following, which defines the default palette colors, before adding your colors as additional lines below guid18.

Each additional color requires a unique second value: guid19, guid20, guid21, and so on. Terminate all lines with a comma, except for the final line.

Palette from Keboola

{"styleSettings" :
   {"chartPalette": [ { "guid": "guid1", "fill": { "r":43, "g":107, "b":174 } }, 
     { "guid": "guid2", "fill": { "r":105, "g":170, "b":81 } },
     { "guid": "guid3", "fill": { "r":238, "g":177, "b":76 } },
     { "guid": "guid4", "fill": { "r":213, "g":60, "b":56 } },
     { "guid": "guid5", "fill": { "r":137, "g":77, "b":148 } },
     { "guid": "guid6", "fill": { "r":115, "g":115, "b":115 } },
     { "guid": "guid7", "fill": { "r":68, "g":169, "b":190 } },
     { "guid": "guid8", "fill": { "r":150, "g":189, "b":95 } },
     { "guid": "guid9", "fill": { "r":253, "g":147, "b":105 } },
     { "guid": "guid10", "fill": { "r":225, "g":93, "b":134 } },
     { "guid": "guid11", "fill": { "r":124, "g":111, "b":173 } },
     { "guid": "guid12", "fill": { "r":165, "g":165, "b":165 } },
     { "guid": "guid13", "fill": { "r":122, "g":166, "b":213 } },
     { "guid": "guid14", "fill": { "r":130, "g":208, "b":141 } },
     { "guid": "guid15", "fill": { "r":255, "g":210, "b":137 } },
     { "guid": "guid16", "fill": { "r":241, "g":132, "b":128 } },
     { "guid": "guid17", "fill": { "r":191, "g":144, "b":198 } },
     { "guid": "guid18", "fill": { "r":191, "g":191, "b":191 } }, 
     {Your first color defined here... } }
     ]
   }
}

Deleting A Custom Color Palette and Restoring Colors to Default

Deleting a color palette returns the GoodData Portal to the default color schema.

To delete a custom color palette, remove any text in the Body of your request in the REST client. Then, submit the request using the following settings:

Method: DELETE
URL: https://secure.gooddata.com/gdc/projects/<project_ID>/styleSettings
Header: none
Body: none

Filters in the GoodData Platform