# Colour variations by hue, saturation, etc like CSS

**URL:** <https://community.penpot.app/t/colour-variations-by-hue-saturation-etc-like-css/6275>\
**Category:** Feature requests\
**Tags:** design\
**Created:** [August 14, 2024, 9:59am UTC](https://community.penpot.app/t/colour-variations-by-hue-saturation-etc-like-css/6275 "2024-08-14T09:59:29Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sulcalibur](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/sulcalibur/32/3205_2.png) [@Sulcalibur](https://community.penpot.app/u/Sulcalibur)\
**Post date:** [August 14, 2024, 9:59am UTC](https://community.penpot.app/t/colour-variations-by-hue-saturation-etc-like-css/6275/1 "2024-08-14T09:59:30Z")

</div>

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\
**Post date:** [August 15, 2024, 7:44am UTC](https://community.penpot.app/t/colour-variations-by-hue-saturation-etc-like-css/6275/2 "2024-08-15T07:44:48Z")

</div>

I’d love this too! Maybe even [OKLCH](https://www.smashingmagazine.com/2023/08/oklch-color-spaces-gamuts-css/) 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!

---

<div class="post-metadata">

**Author:** ![Sulcalibur](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/sulcalibur/32/3205_2.png) [@Sulcalibur](https://community.penpot.app/u/Sulcalibur)\
**Post date:** [November 20, 2024, 12:22pm UTC](https://community.penpot.app/t/colour-variations-by-hue-saturation-etc-like-css/6275/3 "2024-11-20T12:22:14Z")

</div>

😑 Now I’m going down a rabbit hole of how this can be achieved 🐇🕳

---

<div class="post-metadata">

**Author:** ![spuschmann](https://avatars.discourse-cdn.com/v4/letter/s/7feea3/32.png) [@spuschmann](https://community.penpot.app/u/spuschmann)\
**Post date:** [May 4, 2025, 8:12pm UTC](https://community.penpot.app/t/colour-variations-by-hue-saturation-etc-like-css/6275/4 "2025-05-04T20:12:38Z")

</div>

There is also another thread on this topic in this forum: [“Oklch color format support”](https://community.penpot.app/t/oklch-color-format-support/4210/5). IMHO both could be merged and discussed together there.