Progress® Kendo UI® for Angular Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 25 Jun 2026 06:25 by ADMIN
Thomas
Created on: 22 Jun 2026 12:30
Category: ColorPalette
Type: Feature Request
1
CSS variables in palettes

it seems like for defining a custom color palette it's currently not possible to use css variables. When doing something like this:

  public colorPaletteSettings: PaletteSettings = {
    palette: ['var(--my-color)', '#e2a293', '#d4735e'],    columns: 3,
    tileSize: {
      width: 60,
      height: 30
    }
  }

I get a "Cannot parse color: var(--my-color)". 
Am I missing something?

If not, is this feature planned to be implemented sometime soon?

For me, I absolutely need this feature since I want to maintain the link between colors used within the application. We have custom colors defined as css variables. I want those colors to appear inside the kendo colorpicker palette and when selecting one I want this css variable to be used, let's say as a colored line in a graph component. when later changing the value of the css variable the color within the graph should update. that's why converting my css variables into hex values does not work for me, since it's breaking the link. 

On a sidenote - is it possibel to define a custom palette preset, like the ones available: 

  public palettes: string[] = [
    "office",
    "clarity",
    "slipstream",
    "basic",
    "monochrome",
  ];



Thanks for your help.
Thomas

1 comment
ADMIN
Martin Bechev
Posted on: 25 Jun 2026 06:25

Hello Thomas,

Thank you for the provided feedback.

Currently, the ColorPalette component does not support CSS variables, and up to now, we have no plans to implement it.

It sounds like a good enhancement to have, which is why I am converting this ticket to a public feature request item. We will track the customer demand and consider adding it to our roadmap based on the interest.

Alternatively, if the feature is urgent for your project, an option that may be relevant and applicable to your needs is the Feature Acceleration program. This program fits well in scenarios where a feature or enhancement is important for an application's success, but it is not planned to be available at the time of the application's completion. Let me know if you are interested in pursuing this option. 

Defining a custom-named preset string (like `"office"` or `"clarity"`) is not supported — the preset names are fixed built-in constants, and the API does not provide a way to register new ones.

That said, fully custom color sets are supported through the `palette` input, which accepts either a comma-separated color string or a string array. The typical pattern is to define the custom colors as a property in the component class and bind it to the palette.

Regards,
Martin Bechev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Create an account Log In
View
Type
Status
Category