Color

Relative Colors

The Telerik and Kendo UI themes use the oklch color space and CSS relative color syntax to generate all color variations from a small set of carefully selected base colors.

Each base color is defined as an oklch value with three components—lightness, chroma, and hue. All interactive states such as hover, active, subtle, and emphasis are then derived from the base color using relative color expressions. This means you only need to define the base colors, and the entire color system updates automatically.

How It Works

A base color is defined directly as an oklch value:

--kendo-color-primary: oklch(69.85% 0.1923 27.19deg);

All derived states reference the base color and adjust its lightness and chroma while preserving the hue:

--kendo-color-primary-hover: oklch(from var(--kendo-color-primary) calc(l - 0.044) calc(c - 0.012) h);
--kendo-color-primary-active: oklch(from var(--kendo-color-primary) calc(l - 0.088) calc(c - 0.027) h);
--kendo-color-primary-subtle: oklch(from var(--kendo-color-primary) 0.958 calc(c * 0.11) h);
--kendo-color-primary-emphasis: oklch(from var(--kendo-color-primary) calc(l * 0.665 + 0.33) calc(c * 0.61) h);

Text colors on colored backgrounds use contrast-aware calculations to ensure accessibility:

--kendo-color-on-primary: oklch(from var(--kendo-color-primary) clamp(0.1, (0.75 - l) * 99999, 1) 0 h);

Why oklch

The oklch color space is perceptually uniform—equal numeric adjustments to lightness or chroma produce visually equal changes regardless of hue. This means that a hover state darkened by the same amount looks consistently darker whether applied to a warm primary or a cool info color.

This is a significant improvement over earlier color spaces like HSL, where the same lightness value can appear dramatically different across hues.

Base Colors

The base colors below define the foundation of the color system. Each one serves as the source for an entire variable group of derived states.

The following base colors are used in the Telerik and Kendo UI Default theme:

Customizing Colors

To customize the color system, override the base color tokens in your CSS. All derived states will update automatically:

:root {
  --kendo-color-primary: oklch(62.79% 0.2171 261.72deg);
}

This single change will cascade to primary-hover, primary-active, primary-subtle, on-primary, and all other derived primary tokens.

You can also override individual derived tokens when you need precise control over a specific state:

:root {
  --kendo-color-primary-hover: oklch(55% 0.19 261.72deg);
}

Customizing Series Colors

The --kendo-color-series token is the single source for all chart series colors. Series A through F are derived from it by adjusting lightness, chroma, and hue offsets, and each series letter also has bold, bolder, subtle, and subtler variants. Overriding the base token will cascade to all of them:

:root {
  --kendo-color-series: oklch(62.79% 0.2171 261.72deg);
}

This single change will update series-a through series-f and all their derived states such as series-a-bold, series-b-subtle, and so on.

Theme-Specific Variables

For specific information about the color system, refer to the theme-specific variables list:

Color for MeridianDiscover the Telerik and Kendo UI Meridian theme color variables list.

Color for BootstrapDiscover the Telerik and Kendo UI Bootstrap theme color variables list.

Color for MaterialDiscover the Telerik and Kendo UI Material theme color variables list.

Color for FluentDiscover the Telerik and Kendo UI Fluent theme color variables list.

Color for DefaultDiscover the Telerik and Kendo UI Default theme color variables list.

Color for ClassicDiscover the Telerik and Kendo UI Classic theme color variables list.