Colour variations by hue, saturation, etc like CSS

Help us improve Penpot Feature requests
1

Is it possible to have colours in the assets (or tokens) with options to adjust hue, saturation, lightness, etc., based on CSS values while adhering to web standards?

Example:

Primary: #6699CC
..../hover : darken 10%
..../active : lighten 10%

Benefits:

  • As a designer, I can establish main brand colours and create variations for elements like button hover states.
  • If the design system is reused or used as a template, the designer can simply update the main colour palette without needing to adjust individual variations.
  • These variations can be subsets of the main colour assets from a UI/UX perspective.
  • There could be an option to apply these rules to other colours.
  • Potentially, an accessibility checker could be added later.
3 Likes
2

I’d love this too! Maybe even OKLCH as it already has wide browser support and you could so easily build separate tokens (or CSS variables) for lightness, chroma, and hue into the values.

This would also make a fabulous plugin!

3 Likes
3

:expressionless: Now I’m going down a rabbit hole of how this can be achieved :rabbit::hole:

1 Like