HSL Color in cells

In the oh cells, color is not a direct conduit to the background of the element. The value of the color property gets used by the underlying f7 components which means that it gets concatenated into a class name that is applied to the cell (e.g., bg-color-green) which then gets styled via some default f7 styling from there. So for the color property only the colors names that are listed in the f7 theme docs can be used.

To get other background colors, you have to change the background css style, but again because the oh-cells are intended to be low-code, easy-configure components this not directly accessible through the style property. The only way to get custom colors into the background of an oh-cell is to find the css selector for your cell and use the stylesheet property to set the background. In your case, there’s one more level of difficulty, stylesheet does not accept expressions. See this post for how to use css variables as a workaround to get dynamic values into the stylesheet.

1 Like