Subscribe
Sign in
UI Colors — Tailwind CSS color generator & editing tool
UI Colors is a tool to create, edit, preview, export and save Tailwind CSS colors.
19
Replies
@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 :(
@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.
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
Composer