---
title: Color Ranges
page_title: Color Ranges - ArcGauge - Kendo UI for Vue
description: "Set different colors depending on the current value of the Kendo UI ArcGauge in Vue projects."
slug: colorranges_arcgauge_wrapper
canonicalLink: "https://www.telerik.com/kendo-vue-ui/components/gauges/arcgauge/color-ranges/"
position: 3
---

<div><WrapperBanner link="/kendo-vue-ui/components/gauges/arcgauge/color-ranges/"></WrapperBanner></div>    

# Color Ranges

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

For more information, refer to the [`colors`](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/arcgauge/configuration/colors) configuration.

{% meta height:300 %}
{% embed_file arcgauge/color-range/main.vue preview %}
{% embed_file arcgauge/color-range/main.js %}
{% endmeta %}

## Suggested Links

* [Kendo UI ArcGauge](https://docs.telerik.com/kendo-ui/controls/gauges/arcgauge/overview)
* [API Reference of the ArcGauge Widget](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/arcgauge)