# Chart Colors

*Category:* Components
*Section:* Charts
*Source:* https://uikit.developers.rio.cloud/#/components/chartColors
*Captured:* 2026-04-27T14:59:09.998Z

The colors listed below are exposed via the colors.json file and can also be used with other charting libraries to achieve a common look and feel.

## Chart Colors

> Note: The warmup and coldplay colors are to be preferred. Other colors may be used as fallback.

### Example: Example 1

Warmup colors
color-warmup-crimson

color-warmup-victoria

color-warmup-cadillac

color-warmup-raspberry

color-warmup-cerise

color-warmup-charm

color-warmup-salmon

color-warmup-cherokee

color-warmup-corn

Coldplay colors
color-coldplay-wine

color-coldplay-aubergine

color-coldplay-kashmir

color-coldplay-fountain

color-coldplay-turquoise

color-coldplay-bermuda

color-coldplay-moos

color-coldplay-primrose

color-coldplay-khaki

Spectrum colors
color-spectrum-indigo

color-spectrum-violet

color-spectrum-purple

color-spectrum-fuchsia

color-spectrum-pink

color-spectrum-rose

Brand colors
brand-primary

brand-secondary

brand-primary-decent

brand-secondary-decent

brand-info

brand-success

brand-warning

brand-danger

brand-info-decent

brand-success-decent

brand-warning-decent

brand-danger-decent

Highlight colors
color-highlight-darkest

color-highlight-darker

color-highlight-dark

color-highlight

color-highlight-light

color-highlight-lighter

color-highlight-lightest

color-highlight-decent

Base colors
gray-darkest

gray-darker

gray-dark

gray

gray-light

gray-lighter

gray-lightest

gray-decent

Map marker colors
color-map-marker-text

color-map-marker-active

color-map-marker-asset

color-map-marker-poi

color-map-marker-geofence

color-map-marker-route

color-map-marker-info

color-map-marker-success

color-map-marker-warning

color-map-marker-danger

color-map-marker-restrictions

Driving status colors
color-status-available

color-status-driving

color-status-resting

color-status-working

Rating colors
color-rating-1

color-rating-2

color-rating-3

color-rating-4

color-rating-5

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-2-sm grid-cols-3-md gap-20">
    <div>
        <legend class="margin-top-25">Warmup colors</legend>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(49, 20, 79);">
            </div>
            <div class="margin-left-15">color-warmup-crimson</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(73, 61, 109);">
            </div>
            <div class="margin-left-15">color-warmup-victoria</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(126, 62, 114);">
            </div>
            <div class="margin-left-15">color-warmup-cadillac</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(178, 54, 114);">
            </div>
            <div class="margin-left-15">color-warmup-raspberry</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(231, 36, 114);">
            </div>
            <div class="margin-left-15">color-warmup-cerise</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(201, 119, 141);">
            </div>
            <div class="margin-left-15">color-warmup-charm</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(241, 149, 136);">
            </div>
            <div class="margin-left-15">color-warmup-salmon</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(245, 187, 137);">
            </div>
            <div class="margin-left-15">color-warmup-cherokee</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(253, 224, 130);">
            </div>
            <div class="margin-left-15">color-warmup-corn</div>
        </div>
    </div>
    <div>
        <legend class="margin-top-25">Coldplay colors</legend>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(82, 13, 78);">
            </div>
            <div class="margin-left-15">color-coldplay-wine</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(90, 72, 118);">
            </div>
            <div class="margin-left-15">color-coldplay-aubergine</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(83, 110, 139);">
            </div>
            <div class="margin-left-15">color-coldplay-kashmir</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(103, 171, 197);">
            </div>
            <div class="margin-left-15">color-coldplay-fountain</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(78, 204, 193);">
            </div>
            <div class="margin-left-15">color-coldplay-turquoise</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(121, 212, 179);">
            </div>
            <div class="margin-left-15">color-coldplay-bermuda</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(161, 218, 163);">
            </div>
            <div class="margin-left-15">color-coldplay-moos</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(199, 226, 145);">
            </div>
            <div class="margin-left-15">color-coldplay-primrose</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(240, 235, 131);">
            </div>
            <div class="margin-left-15">color-coldplay-khaki</div>
        </div>
    </div>
    <div>
        <legend class="margin-top-25">Spectrum colors</legend>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(142, 150, 235);">
            </div>
            <div class="margin-left-15">color-spectrum-indigo</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(173, 145, 243);">
            </div>
            <div class="margin-left-15">color-spectrum-violet</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(192, 142, 235);">
            </div>
            <div class="margin-left-15">color-spectrum-purple</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(220, 130, 233);">
            </div>
            <div class="margin-left-15">color-spectrum-fuchsia</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(232, 120, 182);">
            </div>
            <div class="margin-left-15">color-spectrum-pink</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(239, 113, 134);">
            </div>
            <div class="margin-left-15">color-spectrum-rose</div>
        </div>
    </div>
    <div>
        <legend class="margin-top-25">Brand colors</legend>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(48, 180, 192);">
            </div>
            <div class="margin-left-15">brand-primary</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(178, 54, 114);">
            </div>
            <div class="margin-left-15">brand-secondary</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(244, 251, 252);">
            </div>
            <div class="margin-left-15">brand-primary-decent</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(251, 245, 248);">
            </div>
            <div class="margin-left-15">brand-secondary-decent</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(75, 128, 166);">
            </div>
            <div class="margin-left-15">brand-info</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(92, 184, 92);">
            </div>
            <div class="margin-left-15">brand-success</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(255, 142, 60);">
            </div>
            <div class="margin-left-15">brand-warning</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(226, 40, 55);">
            </div>
            <div class="margin-left-15">brand-danger</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(245, 248, 251);">
            </div>
            <div class="margin-left-15">brand-info-decent</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(246, 251, 245);">
            </div>
            <div class="margin-left-15">brand-success-decent</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(253, 245, 240);">
            </div>
            <div class="margin-left-15">brand-warning-decent</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(253, 243, 243);">
            </div>
            <div class="margin-left-15">brand-danger-decent</div>
        </div>
    </div>
    <div>
        <legend class="margin-top-25">Highlight colors</legend>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(21, 75, 86);">
            </div>
            <div class="margin-left-15">color-highlight-darkest</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(32, 110, 126);">
            </div>
            <div class="margin-left-15">color-highlight-darker</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(38, 136, 151);">
            </div>
            <div class="margin-left-15">color-highlight-dark</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(48, 180, 192);">
            </div>
            <div class="margin-left-15">color-highlight</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(141, 219, 227);">
            </div>
            <div class="margin-left-15">color-highlight-light</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(206, 240, 243);">
            </div>
            <div class="margin-left-15">color-highlight-lighter</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(235, 249, 250);">
            </div>
            <div class="margin-left-15">color-highlight-lightest</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(243, 251, 252);">
            </div>
            <div class="margin-left-15">color-highlight-decent</div>
        </div>
    </div>
    <div>
        <legend class="margin-top-25">Base colors</legend>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(42, 55, 64);">
            </div>
            <div class="margin-left-15">gray-darkest</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(76, 86, 103);">
            </div>
            <div class="margin-left-15">gray-darker</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(105, 122, 139);">
            </div>
            <div class="margin-left-15">gray-dark</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(167, 175, 187);">
            </div>
            <div class="margin-left-15">gray</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(208, 216, 222);">
            </div>
            <div class="margin-left-15">gray-light</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(229, 235, 240);">
            </div>
            <div class="margin-left-15">gray-lighter</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(246, 248, 249);">
            </div>
            <div class="margin-left-15">gray-lightest</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(252, 252, 253);">
            </div>
            <div class="margin-left-15">gray-decent</div>
        </div>
    </div>
    <div>
        <legend class="margin-top-25">Map marker colors</legend>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(255, 255, 255);">
            </div>
            <div class="margin-left-15">color-map-marker-text</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(255, 255, 255);">
            </div>
            <div class="margin-left-15">color-map-marker-active</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(42, 55, 64);">
            </div>
            <div class="margin-left-15">color-map-marker-asset</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(214, 63, 127);">
            </div>
            <div class="margin-left-15">color-map-marker-poi</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(249, 99, 110);">
            </div>
            <div class="margin-left-15">color-map-marker-geofence</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(54, 175, 215);">
            </div>
            <div class="margin-left-15">color-map-marker-route</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(63, 117, 155);">
            </div>
            <div class="margin-left-15">color-map-marker-info</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(92, 184, 92);">
            </div>
            <div class="margin-left-15">color-map-marker-success</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(255, 142, 60);">
            </div>
            <div class="margin-left-15">color-map-marker-warning</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(226, 40, 55);">
            </div>
            <div class="margin-left-15">color-map-marker-danger</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(143, 104, 237);">
            </div>
            <div class="margin-left-15">color-map-marker-restrictions</div>
        </div>
    </div>
    <div>
        <legend class="margin-top-25">Driving status colors</legend>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(35, 155, 125);">
            </div>
            <div class="margin-left-15">color-status-available</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(54, 144, 174);">
            </div>
            <div class="margin-left-15">color-status-driving</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(98, 107, 114);">
            </div>
            <div class="margin-left-15">color-status-resting</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(148, 72, 139);">
            </div>
            <div class="margin-left-15">color-status-working</div>
        </div>
    </div>
    <div>
        <legend class="margin-top-25">Rating colors</legend>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(226, 40, 55);">
            </div>
            <div class="margin-left-15">color-rating-1</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(255, 142, 60);">
            </div>
            <div class="margin-left-15">color-rating-2</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(248, 197, 117);">
            </div>
            <div class="margin-left-15">color-rating-3</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(92, 184, 92);">
            </div>
            <div class="margin-left-15">color-rating-4</div>
        </div>
        <div class="display-flex align-items-center margin-bottom-1">
            <div class="height-50 width-50 rounded-small" style="background-color: rgb(75, 146, 76);">
            </div>
            <div class="margin-left-15">color-rating-5</div>
        </div>
    </div>
</div>
```