# Color Ranges

To configure the range colors, set the [`progressColor`](https://www.telerik.com/kendo-angular-ui/components/progressbars/api/circularprogressbarcomponent#progresscolor) to either a single color string or you can customize the colors per progress stages.

Use the [`progressColor`](https://www.telerik.com/kendo-angular-ui/components/progressbars/api/circularprogressbarcomponent#progresscolor) option to customize the progress arc color. The available settings are:

* `string` - provide a single string that is a valid color representation.
* [`ProgressColor`](https://www.telerik.com/kendo-angular-ui/components/progressbars/api/progresscolor) array - allows setting different colors for the respective value ranges.

The following example demonstrates how to customize the progress indicator's color.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/progressbars/circular-progressbar/color-ranges/source.txt)

## Suggested Links

* [API Reference of the ProgressBar](https://www.telerik.com/kendo-angular-ui/components/progressbars/api/circularprogressbarcomponent)