# Color Ranges

The ArcGauge enables you to set different colors depending on the current value.

To configure the range colors, set the [`colors`](https://www.telerik.com/kendo-jquery-ui/documentation/api/dataviz/ui/arcgauge/configuration/colors)  option.

```
$("#gauge").kendoArcGauge({
    value: 30,
    colors: [{
        to: 25,
        color: '#0058e9'
    }, {
        from: 25,
        to: 50,
        color: '#37b400'
    }, {
        from: 50,
        to: 75,
        color: '#ffc000'
    }, {
        from: 75,
        color: '#f31700'
    }]
});
```

## See Also

* [Using Colors in the ArcGauge (Demo)](https://demos.telerik.com/kendo-ui/arc-gauge/colors)
* [JavaScript API Reference of the ArcGauge](https://www.telerik.com/kendo-jquery-ui/documentation/api/dataviz/ui/arcgauge)