Thank you for this tool! it's really helpful and you did such a great job with it. And I have some suggestions :) - Chosen color palettes should be in the url as a query params (so that we can share it with others and for navigation too) - Disable scroll when openeing modals - When I try to chosse a colors and click outside the color picker won't close unless I click again on the primary CTA and again. Thanks so much you solved such a problem for me :)
so glad I found this channel and purchased hover pro, starting on that refactoring UI ebook you recommended too man, thank you for the quality videos man
A couple notes on improvement: 1. Add hover interactions on your preview, because some buttons on hover may look different. 2. Would be good if there would be a 2nd page with a bit more examples as well. 3. Add rgb color notation without commas to your export rgb(0 0 0) And one last thing that may not be suitable to your tool is: to add transparent variants for your colors. You see, my biggest problem in color choice was not actually picking solid color on it's own, while it do a complex task. The problem goes with adding semitransparent colors. For example I have some background color and I have item/component with a different background color. In your examples it would be just simple color value, but I may need to have influence from background that is not one color, but gradient or may be an image as well, then my item may want to pass color from background to foreground and this shade with alpha become a problem. For a simplest case, if I have background with specific color and item should take influence from it and be whiter, I could instead of picking 2 solid colors, picking background and picking item background with alpha like rgb(255 255 255 / .8). But that example is simple, what if foreground should have a shade as well? Now you have a problem where --bg-color + (--item-bg-color * alpha) should be equal to some sort of --final-color, so this item bg color with alpha become math problem of "finding x" because, well, colors is not easy to calculate. As an example, for bg I may have color like #eba7b7, for a final color like #474253, but the item color background to match that final color I should have rgb(30 41 59 / .8); which is not obvious of how you would even calculate that. You can approximate alpha, but the color should be evaluated with a complex math.
EXACTLY! I just need something to get started with and starting with colors have always been difficult for me. You should get more views. Definitely earned my sub.
I’m using a package called “tinycolor2”! 😁 secondary color is just a hue rotation, other colors are lightening/darkening by fixed amount. Content colors are just checking that the contrasting color is light or dark and flipping them by a set amount (not fool proof but works 90% of the time, want to find a better way to do that though)
![VENEZUELA vs. ARGENTINA [1-1] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 9](http://i.ytimg.com/vi/SJfoPdeOPCQ/mqdefault.jpg)
Looks like a very useful tool for us devs. Yet another great video, amazing channel, keep on creating both content and the tools 👍
Thank you for this tool! it's really helpful and you did such a great job with it.
And I have some suggestions :)
- Chosen color palettes should be in the url as a query params (so that we can share it with others and for navigation too)
- Disable scroll when openeing modals
- When I try to chosse a colors and click outside the color picker won't close unless I click again on the primary CTA
and again. Thanks so much you solved such a problem for me :)
so glad I found this channel and purchased hover pro, starting on that refactoring UI ebook you recommended too man, thank you for the quality videos man
That’s amazing, thanks so much for your support!! You’ll love refactoring UI, I reference it constantly when I’m building UIs :)
Thank you for this! I have always struggled with picking or applying colors on my projects
Happy to hear it will help :)
A couple notes on improvement:
1. Add hover interactions on your preview, because some buttons on hover may look different.
2. Would be good if there would be a 2nd page with a bit more examples as well.
3. Add rgb color notation without commas to your export rgb(0 0 0)
And one last thing that may not be suitable to your tool is: to add transparent variants for your colors.
You see, my biggest problem in color choice was not actually picking solid color on it's own, while it do a complex task. The problem goes with adding semitransparent colors. For example I have some background color and I have item/component with a different background color. In your examples it would be just simple color value, but I may need to have influence from background that is not one color, but gradient or may be an image as well, then my item may want to pass color from background to foreground and this shade with alpha become a problem. For a simplest case, if I have background with specific color and item should take influence from it and be whiter, I could instead of picking 2 solid colors, picking background and picking item background with alpha like rgb(255 255 255 / .8). But that example is simple, what if foreground should have a shade as well? Now you have a problem where --bg-color + (--item-bg-color * alpha) should be equal to some sort of --final-color, so this item bg color with alpha become math problem of "finding x" because, well, colors is not easy to calculate. As an example, for bg I may have color like #eba7b7, for a final color like #474253, but the item color background to match that final color I should have rgb(30 41 59 / .8); which is not obvious of how you would even calculate that. You can approximate alpha, but the color should be evaluated with a complex math.
EXACTLY! I just need something to get started with and starting with colors have always been difficult for me. You should get more views. Definitely earned my sub.
Thank you!! Happy to hear it’ll help :)
daisyui themes are criminally slept on
Love DaisyUI!
Damn that is cool and will be useful
very useful thx a lot tom 🙌
Thank you! Happy I can help 😁
This is very much amazing. Please create an advanced tutorial on framer motion.
I’ll do an in depth course soon! :)
Very cool! How are you generating colors under the hood?
I’m using a package called “tinycolor2”! 😁 secondary color is just a hue rotation, other colors are lightening/darkening by fixed amount. Content colors are just checking that the contrasting color is light or dark and flipping them by a set amount (not fool proof but works 90% of the time, want to find a better way to do that though)
Very interesting!
Thank you! 😄
lolololol love this dude
❤️😎
Love your content, it's another level of Frontend.
I will subscribe you, do you have discord or anything, can we interact is ?