Hi!
Although the default Tailwind CSS colors are great, sometimes you need a customized color family. For example when you want to use brand colors or the design you are working on needs less vibrant colors.
It is a time-consuming process to create a nice looking color family based on a given hexcode. It took me hours of tweaking in a design tool like Figma to create a custom and nice looking color family, test it on UI elements and implement it in Tailwind CSS.
That's why I created UI Colors.
1. Create a color family based on a hexcode or pick a color
2. Bulk edit the entire color family (to reduce saturation for example)
3. Tweak individual colors for perfection
4. Show UI examples
5. Export the code
6. Save the changes
I would love to receive feedback! So feel free to suggest ideas for improvement :)
Cheers,
Erik
Report
@erikdevries_nl It's a handy tool. It's going to be very useful for me.
This is actually really neat, especially the `View in UI` area. Great work.
Also, a great example of why we should use HSL more often because of the easy customizability.
@typicalmitul Thank you! You're completely right. Hexcode and RGB are not intuitive to work with. HSL is way better! LCH / HCL would be even better, but not supported except in Safari :(
Report
Great tool for my students. Also, if nobody uses Tailwind. Thanks! 🙏🏻
@david_maciejewski It would be nice if this tool can help your students. It's not necessarily for Tailwind only. You can export the SCSS or CSS variables and I'm adding SVG export to use in Figma / Sketch / some design tool.
Replies
UI Colors
UI Colors
Composer
UI Colors
UI Colors
UI Colors
UI Colors
UI Colors
UI Colors