CLI command to create a group of color shades ready to be used in your UI library.
npx theme-color-shades a12345 # or any 6-digit hex color to serve as reference.
# To output as an array
npx theme-color-shades a12345 --format arrayYou can also choose them in themecolorshades.com and see how it displays in UI examples or to change the factors used in the algorithm.
This work is heavily based on Refactoring UI book.
When you choose a color to your application, you probably going to need a lighter or darker version of it to use in a background or text, for example.
Usually, a set of shades has 10 elements, going from 50 to 900, being 900 the darkest one:
{
"50": "#fce8f0",
"100": "#f5bcd1",
"200": "#eb93b0",
"300": "#dc6f90",
"400": "#cf496d",
"500": "#b63054",
"600": "#90233d",
"700": "#6c1426",
"800": "#430a14",
"900": "#170306"
}Converting the color to HSL format, from #a12345 to hsl(344, 64%, 38%), the algorigthm changes these 3 elements:
- Lightness: Goes from 5 to 95%.
- Hue: By starting in the middle of the set, rotate towards the nearest light hue in the color wheel for the 50-400 shades and rotate to the nearest dark hue for the 500-900 shades.
- Saturation: Raise the saturation in the edges, decrease it in the center.
Yes, of course. This process above may not work for all colors or may not give the expected result. However, for non-designers, picking a full shade may be a difficult task and Theme Color Shades aims to speed up it and give a solid set of shades that can always be changed.
To mitigate this, in the website, you can change the default multiplying factors to Hue and Saturation that generate the shades :)
If you want to propose a change to this process, feel free to open an issue or a pull request.