This app is designed around a problem I've faced as a frontend software engineer: my UI person sends over some figma docs to turn into a react component/app, including one or two or three shades of a particular color. But, for any given color:
-
I'd like to have 11 shades up front, so I know I won't have to interrupt my flow to think about colors
-
I don't want to bother my UI person to come up with shades of a color beyond the one or two or three they care about
I found a few solutions online but I found them confusing to use, and they seemed to be using HSL rather than OKLCH. I've come up with a solution that takes as input the shades given by your UI person, and sends to your clipboard a colors object that you can add directly to your Tailwind of Unocss config.
For each row, given one input color, the OKLCH hue and chroma are extracted, and 11 shades are generated based on using that hue and chroma with 11 different lightness values.
Given more than one input color, the hues and chromas will be interpolated according to the lightnesses extracted. For example, given a light blue and a dark blue with differing hues and chromas, the generated shades that are lighter than the light blue will have hues and chromas matching the light blue, the generated shades that are darker than the dark blue will have hues and chromas matching the dark blue, and the shades in between will have hues and chromas that linearly interpolate between the light and dark blues.
Use more than one row in order to generate multiple sets of colors (e.g. 11 greens, 11 blues etc), where each row has the same set of lightness values.
- Adjust the hue and chroma for any input, by entering a number or using the slider
- Similarly, adjust the hue and chroma for any output, in which case the output will also become an input
A row can be in a state where it has no inputs, in which case you'd be able to set hue and chroma by adjusting any of the outputs. This could be useful if you're creating a palette from scratch rather than augmenting some colors you were given.
All the OKLCH values for each shade are shown in the app, so you don't have to wonder if you're correctly understanding what's described above.
The default lightness values are an average of the lightness values from a subset of Tailwind's colors, and are generated by this script
oklch.beauty is powered by culori