smart-swatch
smart-swatch copied to clipboard
Adjust brightness
I have had some troubles adjusting lightness in my color palette for a recent project. The main problem I encounter is that this library automagically detects the color that is closest to the one I set, and generates the base palette accordingly.
That leaves me with small space to change if I really don't want to keep a 0.1 gap between colors, which is my case. This relates to issue #12.


This is a small change I did on the go, and I cannot see draft pull requests, so I just opened a normal PR, but it might need some reviewing. https://github.com/ivan-dalmet/smart-swatch/pull/19
Let me know your thoughts on this and if you would consider merging it 😄
Hi @mikemajara Thanks for the PR! I understand the need :)
A few things that needs to be handled before merging it:
- [ ] Find a better name than "Brightness" for the UI because I find it confusing. Maybe "Brightness max."?
- [ ] Add limits to the slider to prevent swatches like this:
- [ ] Mask this setting in an "Advanced" section (Collapse or Panel?)
- [ ] Save this setting in the URL to allow "Copy URL" to save the complete state.
@ivan-dalmet amazing! Agreed on all points.
- Better name I would go for 1 word. But honestly dunno which one makes more sense... Maybe Tone?
- I'll work on those limits. This was really just a rushed draft, any input is welcome.
- limiting the gap?
- making the step smaller?
- IMHO I wouldn't say this is advanced, so unless there are more settings to come, I'd leave it in view since I don't think this is too intrusive. I'm also OK with placing that inside a Collapse anyways.
- I'll add this as an encoded parameter!
PS: I saw chakra-ui is outdated, it might make sense to update it before changing. Thoughts?
For the update of Chakra UI if you have time to make a PR it will be so kind! ❤️