---
title: "Colours"
framework: angular
version: "14.1.0"
---

# Colours

AG Charts accepts standard CSS colour strings, CSS variables, and theme parameter references anywhere a colour is set. Richer gradient, pattern and image fills are available on `fill` properties.

## Colour Formats

Any colour string accepted by CSS can be used wherever a colour is set, including series fills, strokes, text colours, and theme parameters.

#### Colour Formats

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Colour Formats](https://www.ag-grid.com/charts/angular/colours/examples/colour-formats)

| Format | Example |
| --- | --- |
| Hex | `'#4878d0'`, `'#48d'`, `'#4878d0cc'` (with alpha) |
| rgb / rgba | `'rgb(72, 120, 208)'`, `'rgba(72, 120, 208, 0.8)'` |
| hsl / hsla | `'hsl(145, 63%, 42%)'`, `'hsl(145 63% 42% / 0.8)'` |
| Named colour | `'mediumpurple'` (any [CSS named colour](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color)) |

## CSS Variables

CSS variables can be used anywhere a colour is accepted. These are referenced as `var(--brand-primary)`.

#### CSS Variables

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: CSS Variables](https://www.ag-grid.com/charts/angular/colours/examples/css-variables)

```js
{
    theme: {
        params: {
            backgroundColor: 'var(--demo-bg)',
            foregroundColor: 'var(--demo-fg)',
        },
    },
    series: [
        { type: 'bar', xKey: 'month', yKey: 'online', fill: 'var(--demo-online)' },
        { type: 'bar', xKey: 'month', yKey: 'retail', fill: 'var(--demo-retail)' },
    ],
}
```

In the above example:

- Click the button to change the CSS variables only and the series, background, axes and text all update.
- The chart re-renders automatically whenever a variable changes. There is no need to call `chart.update()`.

> **Note**
>
> The `--ag-charts-*` namespace is reserved for internal use.

## Theme Parameter References

A colour can reference a [theme parameter](https://www.ag-grid.com/charts/angular/themes/#parameters) instead of a literal value, keeping related colours in sync.

#### Theme Parameter References

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Theme Parameter References](https://www.ag-grid.com/charts/angular/colours/examples/colour-references)

```js
{
    theme: {
        params: {
            accentColor: '#2f6df0',
            backgroundColor: '#ffffff',
            foregroundColor: { ref: 'accentColor', mix: 0.85, onto: 'backgroundColor' },
            axisLineColor: { ref: 'accentColor', mix: 0.5 },
        },
    },
    series: [{ type: 'bar', xKey: 'month', yKey: 'revenue', fill: { ref: 'accentColor' } }],
}
```

The reference forms are:

- `{ ref: 'accentColor' }` - resolve to another theme parameter.
- `{ ref: 'accentColor', mix: 0.5 }` - the referenced parameter at `mix` opacity (`0` fully transparent, `1` fully opaque).
- `{ ref: 'accentColor', mix: 0.85, onto: 'backgroundColor' }` - blend one parameter onto another.
- `{ ref: 'accentColor', mix: 0.85, ontoColor: '#ff5733' }` - blend a parameter onto a literal colour.
- `{ ref: 'accentColor', mix: 0.85, ontoColor: 'var(--brand)' }` - blend a parameter onto a CSS variable.

> **Note**
>
> A reference can be used anywhere a colour is accepted. `ref` and `onto` point to theme parameters; `ontoColor` instead takes a literal colour or a CSS variable, and is mutually exclusive with `onto`.

See [Themes](https://www.ag-grid.com/charts/angular/themes/#colour-references) for more details.

## Gradient, Pattern & Image Fills

Most `fill` properties also accept gradient, pattern, and image fills. See [Series Fills](https://www.ag-grid.com/charts/angular/fills/) for the full reference.