Hex to hsl - dynamic color variants

Need Help
#1

Hi! I have a repeater with a color picker field and I want to automatically create different variants for each color and then I want to add all primary colors and variants to the dropdown field.

I know how to add colors from the repeater to the dropdown field but I don’t know how to convert 8 digit hex to hsl to create different variants (e.g. lighter color, darker color, semi-transparent color).

After creating variants in hsl, the color should be converted back to 8-digit hex to display color in dropdown field.
image

Can anyone help?

#2

I had to do something similar to create a custom Tailwind color palette, so my client could choose a different color theme for different pages.

I used Chroma JS to edit the main color (hex from colorpicker) and convert the generated color back to hex.

I created a new partial and made my palette like this:

<script>
  var primary_600 = chroma('{{ this.theme.primary_color }}').darken(0.5).rgb();
  var primary_700 = chroma('{{ this.theme.primary_color }}').darken(1).rgb();
</script>

At the end I just made a css variable with that color, so I could use it with Tailwind.

<script>
  var style = document.createElement("style");
  style.innerHTML = ":root {";
  style.innerHTML = style.innerHTML + "--color-primary-600: "+ primary_600 +";";
  style.innerHTML = style.innerHTML + "--color-primary-700: "+ primary_700 +";";
  style.innerHTML = style.innerHTML + "}";
  document.head.appendChild(style);
</script>

Chroma JS: https://gka.github.io/chroma.js/

Good luck! If you have any further questions, let me know :slight_smile:

2 Likes
#3

Thank you, I will check this script :slight_smile: