# Using CSS functions in design tokens
**URL:** https://forum.builder.io/t/using-css-functions-in-design-tokens/6418
**Category:** Visual Editor Help
**Tags:** visual-editor, nextjs
**Created:** [September 19, 2024, 9:05pm UTC](https://forum.builder.io/t/using-css-functions-in-design-tokens/6418 "2024-09-19T21:05:40Z")
**Posts on this page:** 2
**Page:** 1
### Author:  [@tim](https://forum.builder.io/u/tim)
#### Post date: [September 19, 2024, 9:05pm UTC](https://forum.builder.io/t/using-css-functions-in-design-tokens/6418/1 "2024-09-19T21:05:40Z")
I am trying to use a CSS variable in my design token, where the value is a color represented in HSL. In a regular CSS class, I would wrap the variable in an **hsl** function, e.g., hsl(var(–brand-green)). How would I do this in the design token? Is it even possible? This is what I have currently. The color of the token is displayed properly in the editor but when I select the color, the color of the element does not change since the style is not being applied correctly.
```auto
{ name: "Brand Green", value: "var(--brand-green, hsl(158.36, 100%, 47.84%))" },
```
Thanks!
---
### Author:  [@TimG](https://forum.builder.io/u/TimG)
#### Post date: [September 19, 2024, 10:14pm UTC](https://forum.builder.io/t/using-css-functions-in-design-tokens/6418/2 "2024-09-19T22:14:21Z")
Hey @tim ! Welcome to the Builder Forum! I jsut tried that same color token in my code base and it worked for me as expected, I wonder if maybe there is some conflicting styles being applied to the block… could you share a content entry where you are seeing this?
If it is a rich text editor block, sometimes there are hidden inline styles. Browsers often copy over styles when you copy from another site… it might be worth hitting the `Clear Styles` button in the rich text editor to see if that helps:
