---
path: foundation/color/swatch
title: Swatch
position: 2
seo_title: Color Swatch in the Telerik and Kendo UI Meridian Theme
seo_description: Learn more about the Color Swatch in the Telerik and Kendo UI
Design System, what is its role, how it is implemented, and how to utilize it
in your design.
---
## 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.
Simply put, all themes have swatches, which are color variations of the [theme](/themes/get-started/introduction/). All swatches of a given theme use the same fonts, sizes, and layouts. On the other hand, the text colors, background colors and border colors are different.
A swatch consists of colors that belong to several color variable groups. Each variable group includes ten distinct colors that are 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, see the respective theme: [Meridian](/themes/kendo-themes/meridian/), [Bootstrap](/themes/kendo-themes/bootstrap/), [Material](/themes/kendo-themes/material/), [Fluent](/themes/kendo-themes/fluent/), [Default](/themes/kendo-themes/default/) and [Classic](/themes/kendo-themes/classic/).
The color variable groups below are applicable to multiple themes. The specific color values serve as an example and belong specifically to the [Telerik and Kendo UI Meridian theme](/themes/kendo-themes/meridian/).
### 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 Meridian 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 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 consist of the following colors:
Below is a detailed description of each variable:
- `app-surface`—The background color of the application (the background color of the `` 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 Meridian 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 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 derived from the base color using oklch relative color syntax.
#### Primary Variable Group
The Primary variable group in the Telerik and Kendo UI Meridian theme reflects the theme's identity and provides the accent color of the theme. This variable group is 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 derived from the primary base color using oklch relative color syntax.
#### Secondary Variable Group
The Secondary variable group in the Telerik and Kendo UI Meridian 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 derived from the secondary base color using oklch relative color syntax.
#### Tertiary Variable Group
The Tertiary variable group in the Telerik and Kendo UI Meridian 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 derived from the tertiary base color using oklch relative color syntax.
#### Light Variable Group
The Light variable group in the Telerik and Kendo UI Meridian 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 derived from the light base color using oklch relative color syntax.
#### Dark Variable Group
The Dark variable group in the Telerik and Kendo UI Meridian 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 derived from the dark base color using oklch relative color syntax.
#### Inverse Variable Group
The Inverse variable group in the Telerik and Kendo UI Meridian 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 derived from the inverse base color using oklch relative color syntax.
### Informational Variable Groups
The Telerik and Kendo UI Meridian 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 Meridian theme is designated to convey informational messages and elements within the interface. Its distinct hue draws attention to alerts, notifications, and other informative components.
The colors for the Info variable group are derived from the info base color using oklch relative color syntax.
#### Success Variable Group
The Success variable group in the Telerik and Kendo UI Meridian theme features colors that signify successful actions or confirmations in the interface, effectively communicating positive outcomes and feedback to users.
The colors for the Success variable group are derived from the success base color using oklch relative color syntax.
#### Warning Variable Group
The Warning variable group in the Telerik and Kendo UI Meridian 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 derived from the warning base color using oklch relative color syntax.
#### Error Variable Group
The Error variable group in the Telerik and Kendo UI Meridian 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 derived from the error base color using oklch relative color syntax.
### DataViz Variable Groups
The DataViz variable group present a collection of six colors, which are specifically tailored for data visualization purposes and for seamless integration with the Telerik and Kendo UI Meridian 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 derived from the Series A base color using oklch relative color syntax.
#### Series B Variable Group
The colors for the Series B variable group are derived from the Series B base color using oklch relative color syntax.
#### Series C Variable Group
The colors for the Series C variable group are derived from the Series C base color using oklch relative color syntax.
#### Series D Variable Group
The colors for the Series D variable group are derived from the Series D base color using oklch relative color syntax.
#### Series E Variable Group
The colors for the Series E variable group are derived from the Series E base color using oklch relative color syntax.
#### Series F Variable Group
The colors for the Series F variable group are derived from the Series F base color using oklch relative color syntax.
### Theme-Specific Variables
For specific information about the color system, refer to the theme-specific variables list:
