Color

Use colors to express emotions, reflect your brand identity, and create visual continuity across components and products.

Color Swatch

The Color Swatch is a foundational element of the Color System, providing a structured framework for managing color variable groups throughout the theme. Each variable group includes ten distinct colors that are specifically tailored for particular usage scenarios, ensuring a consistent application. Swatches are designed to adapt and align with your desired aesthetic, enabling you to manage the theme's appearance and feel precisely to match your style preferences.

Color values vary by theme and swatch. To explore these specifics, click on link for the respective theme: Default, Bootstrap, Material, Fluent and Classic.

Outlined below are the various color variable groups with values of the Telerik and Kendo UI Default theme.

Core Variable Groups

The Core variable group are the foundational color variables that define the distinctive character and tone of the Telerik and Kendo UI Default theme. These variable groups are the essential building blocks for creating an intuitive, accessible, and visually engaging user experience.

Main Variable Group

The Main variable group is a carefully composed collection of colors that form the backbone of your application's visual design. It includes versatile hues for the application's background, text, component chrome areas, and borders, each selected to create a cohesive and intuitive user interface.

The colors for the Main variable group are taken from the Gray Palette and consist of the following colors:

app-surface
HEX
on-app-surface
HEX
subtle
HEX
surface
HEX
surface-alt
HEX
border .08
HEX
border-alt .16
HEX

Below is a detailed description of each variable:

  • app-surface—The background color of the application (the background color of the <body> element).
  • on-app-surface—The text color of the application.
  • subtle—A subtle text color.
  • surface—The background color of the components' chrome area (also: the non-client area).
  • surface-alt—The alternative background color of the components' chrome area (also: the non-client area).
  • border—Тhe border color used in the application.
  • border-alt—The alternative border color used in the application (predominantly used for border color in hover state).

Base Variable Group

The Base variable group in the Telerik and Kendo UI Default theme is used for components with a fixed, single-color scheme that form the core of the user interface and provide a uniform background. This monochromatic base, when contrasted with vibrant primary actions, helps to effectively direct the user's focus. It creates a clear visual hierarchy that differentiates between the neutral and accent elements within the user interface, improving user interaction and the overall coherence of the design.

The colors for the Base variable group are taken from the Gray Palette.

base
HEX
base-hover
HEX
base-active
HEX
base-subtle
HEX
base-subtle-hover
HEX
base-subtle-active
HEX
on-base
HEX
base-emphasis
HEX
base-on-subtle
HEX
base-on-surface
HEX

Primary Variable Group

The Primary variable group in the Telerik and Kendo UI Default theme is carefully selected to reflect the theme's identity. It is the variable group with the accent color of the theme, used sparingly to guide the eye and highlight important bits such as buttons, links, and active states.

The colors for the Primary variable group are taken from the Coral Palette.

primary
HEX
primary-hover
HEX
primary-active
HEX
primary-subtle
HEX
primary-subtle-hover
HEX
primary-subtle-active
HEX
on-primary
HEX
primary-emphasis
HEX
primary-on-subtle
HEX
primary-on-surface
HEX

Secondary Variable Group

The Secondary variable group in the Telerik and Kendo UI Default theme uses colors that are fully desaturated. This allows you to combine it with any other color or group.

The colors for the Secondary variable group are taken from the Gray Palette.

secondary
HEX
secondary-hover
HEX
secondary-active
HEX
secondary-subtle
HEX
secondary-subtle-hover
HEX
secondary-subtle-active
HEX
on-secondary
HEX
secondary-emphasis
HEX
secondary-on-subtle
HEX
secondary-on-surface
HEX

Tertiary Variable Group

The Tertiary variable group in the Telerik and Kendo UI Default theme is used less frequently than the Primary and Secondary variable groups. It indicates independent, less pronounced, common actions throughout the user interface.

The colors for the Tertiary variable group are taken from the Sky Blue Palette.

tertiary
HEX
tertiary-hover
HEX
tertiary-active
HEX
tertiary-subtle
HEX
tertiary-subtle-hover
HEX
tertiary-subtle-active
HEX
on-tertiary
HEX
tertiary-emphasis
HEX
tertiary-on-subtle
HEX
tertiary-on-surface
HEX

Light Variable Group

The Light variable group in the Telerik and Kendo UI Default theme presents a spectrum of bright, yet gentle colors, ideal for light theme modes. These hues provide a clean and understated background, enhancing the overall user interface by complementing, rather than overshadowing, the primary design elements.

The colors for the Light Variable Group are taken from the Gray Palette.

light
HEX
light-hover
HEX
light-active
HEX
light-subtle
HEX
light-subtle-hover
HEX
light-subtle-active
HEX
on-light
HEX
light-emphasis
HEX
light-on-subtle
HEX
light-on-surface
HEX

Dark Variable Group

The Dark variable group in the Telerik and Kendo UI Default theme offers a selection of deep, rich colors ideal for dark theme modes. These shades create a striking background that adds depth and contrast to the interface, emphasizing primary elements while ensuring readability and visual comfort in low-light environments.

The colors for the Dark variable group are taken from the Gray Palette.

dark
HEX
dark-hover
HEX
dark-active
HEX
dark-subtle
HEX
dark-subtle-hover
HEX
dark-subtle-active
HEX
on-dark
HEX
dark-emphasis
HEX
dark-on-subtle
HEX
dark-on-surface
HEX

Inverse Variable Group

The Inverse variable group in the Telerik and Kendo UI Default theme is designed to automatically switch between black and white, ensuring optimal contrast in varying design contexts.

The colors for the Inverse variable group are taken from the Gray Palette.

inverse
HEX
inverse-hover
HEX
inverse-active
HEX
inverse-subtle
HEX
inverse-subtle-hover
HEX
inverse-subtle-active
HEX
on-inverse
HEX
inverse-emphasis
HEX
inverse-on-subtle
HEX
inverse-on-surface
HEX

Informational Variable Groups

The Telerik and Kendo UI Default theme features four informational variable groups—Error, Info, Success, and Warning. These variable groups use color to convey specific meaning and play a crucial role in enhancing user comprehension and interaction.

Info Variable Group

The Info variable group in the Telerik and Kendo UI Default theme is designated for conveying informational messages and elements within the interface. Its distinct hue is chosen to draw attention to alerts, notifications, and other informative components.

The colors for the Info variable group are taken from the Blue Palette.

info
HEX
info-hover
HEX
info-active
HEX
info-subtle
HEX
info-subtle-hover
HEX
info-subtle-active
HEX
on-info
HEX
info-emphasis
HEX
info-on-subtle
HEX
info-on-surface
HEX

Success Variable Group

The Success variable group in the Telerik and Kendo UI Default theme features a color specifically chosen to signify successful actions or confirmations in the interface, effectively communicating positive outcomes and feedback to users.

The colors for the Success variable group are taken from the Green Palette.

success
HEX
success-hover
HEX
success-active
HEX
success-subtle
HEX
success-subtle-hover
HEX
success-subtle-active
HEX
on-success
HEX
success-emphasis
HEX
success-on-subtle
HEX
success-on-surface
HEX

Warning Variable Group

The Warning variable group in the Telerik and Kendo UI Default theme uses a distinct color to highlight warnings or cautionary notices, ensuring users are immediately aware of potential issues or important considerations within the interface.

The colors for the Warning variable group are taken from the Yellow Palette.

warning
HEX
warning-hover
HEX
warning-active
HEX
warning-subtle
HEX
warning-subtle-hover
HEX
warning-subtle-active
HEX
on-warning
HEX
warning-emphasis
HEX
warning-on-subtle
HEX
warning-on-surface
HEX

Error Variable Group

The Error variable group in the Telerik and Kendo UI Default theme employs a prominent color to clearly indicate errors or problems within the interface, drawing immediate attention to areas that require user action or correction.

The colors for the Error variable group are taken from the Red Palette.

error
HEX
error-hover
HEX
error-active
HEX
error-subtle
HEX
error-subtle-hover
HEX
error-subtle-active
HEX
on-error
HEX
error-emphasis
HEX
error-on-subtle
HEX
error-on-surface
HEX

DataViz Variable Groups

The DataViz variable group present a collection of five colors, which are specifically tailored for data visualization purposes and for seamless integration with the Telerik and Kendo UI Default theme's overall color scheme. These swatches offer an expanded variety of colors that enhance the clarity and readability of charts and graphs, making it an essential tool for effective data presentation.

Series A Variable Group

The colors for the Series A variable group are taken from the Coral Palette.

series-a
HEX
series-a-subtler
HEX
series-a-subtle
HEX
series-a-bold
HEX
series-a-bolder
HEX

Series B Variable Group

The colors for the Series B variable group are taken from the Lemon Yellow Palette.

series-b
HEX
series-b-subtler
HEX
series-b-subtle
HEX
series-b-bold
HEX
series-b-bolder
HEX

Series C Variable Group

The colors for the Series C variable group are taken from the Spring Green Palette.

series-c
HEX
series-c-subtler
HEX
series-c-subtle
HEX
series-c-bold
HEX
series-c-bolder
HEX

Series D Variable Group

The colors for the Series D variable group are taken from the Royal Blue Palette.

series-d
HEX
series-d-subtler
HEX
series-d-subtle
HEX
series-d-bold
HEX
series-d-bolder
HEX

Series E Variable Group

The colors for the Series E variable group are taken from the Lavender Purple Palette.

series-e
HEX
series-e-subtler
HEX
series-e-subtle
HEX
series-e-bold
HEX
series-e-bolder
HEX

Series F Variable Group

The colors for the Series F variable group are taken from the Flamingo Pink Palette.

series-f
HEX
series-f-subtler
HEX
series-f-subtle
HEX
series-f-bold
HEX
series-f-bolder
HEX

Theme-Specific Variables

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