---
title: "ColorManager"
slug: "color-manager"
updated: 2025-10-24T09:22:44Z
published: 2025-10-24T09:22:44Z
canonical: "learn.servitly.com/color-manager"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ColorManager

To manage colors in a centralized way, you can leverage the `ColorManager`, which is available in the JavaScript context under the variable `colorManager`. For more details about the already registered colors and palettes, you can refer to the [Brand Configuration](/v1/docs/brand-configuration#components-colors) article.

The Color Manager provides methods to manage color palettes.

```javascript
// registers a new color to be used when the HEATING string must printed out.
colorManager.registerColor("HEATING", "#DD4B39");

// registers a new color palette.
colorManager.registerColorPalette("my-colors", ["#DD4B39", "FFD800", "#08B05B"]);
```

In the [Custom Filters](/v1/docs/custom-filters) component, you can register your own colors, which will be used by components (such as widgets or filters).

```javascript
// retrieves the color registered for the HEATING status string.
let heatingColor = colorManager.getColor("HEATING");

// retrieves the color palette registered for chart visualization.
let chartColors = getColorPalette("chart")
```

Here is an example of an amChart4-based widget, which uses the ColorManager to set the axis and grid colors.

```javascript
let axisColor = colorManager.getColor("CHART_AXIS");
if (axisColor) {
    axis.renderer.line.stroke = am4core.color(axisColor);
    axis.renderer.line.strokeOpacity = 1;
    axis.renderer.line.strokeWidth = 1;
}

let gridColor = colorManager.getColor("CHART_GRID");
if (gridColor) {
	axis.renderer.grid.template.stroke = am4core.color(gridColor);
}

let labelColor = colorManager.getColor("CHART_LABEL");
if (labelColor) {
    axis.renderer.labels.template.fill = am4core.color(labelColor);
}
```

## Methods

| *getColor(key)* | Gets the color (hex code) associated with the given `key` (case-insensitive). |
| --- | --- |
| *getOrRegisterColor(key)* | Gets the color (hex code) associated with the given `key` (case-insensitive). In case the color is missing, a new one is registered by using the `values` color palette. |
| *getChartColorPalette()* | Gets the color palette with the given `name`. By default, there are two color palettes already registered: `values`, `chart` |
| *getColorPalette(name)* | Gets the color palette (*chart*) used by the chart-based widget to draw lines, columns, and other graphic elements. |
| *registerColor(key, color)* | Registers a new color for the given `key` (case-insensitive) and `color` (hex code). If the key is already present, the registered color is overwritten. In case the given color is null, a color not already used is picked up from the `values` color palette and assigned to the given key. Returns the color currently registered for the given key. |
| *registerColorPalette(name, colors)* | Registers a new color palette for the given `name`. The `colors` parameter is an array of hex codes. `["#DD4B39", "FFD800", "#08B05B"]` If a color palette already exists for the given name, it is overwritten. |