Colors it is an essential element of the User interface as they represent your brand. However, color is the only element in the user interface that can get us into some tricky situations.
Allow me to explain.
Scenarios from the Client's point of view
If our client is already aware of the range of colors he/she is going to use in the application then for us developers nothing is better than that.
However, things take a different turn when our client comes with a blank slate and tells us to decide on the branding color aspect.
If you own an agency then your UI Designer will work that out for you as for freelancers things get a little tough!
At such times the best option is to suggest the ready-made color stack of whatever front-end framework (bootstrap or tailwind CSS) you're used to.
If your client decides to choose from the ready-made color stack then it's good, but what if he/she asks you to bring out more colors? Then the situation gets tricky.
These were the scenarios from the client's point of view but now let's take a look from the developer's point of view.
Scenarios from the Developer's point of view
As a developer, it's quite normal to use Bootstrap, Tailwind CSS or any other front-end UI library to work with the user interface.
However, what if you are working with Bootstrap and want to add Colors from Tailwind CSS? In such cases what will you do?
The common answer to this one simple question is to open the Tailwind CSS in the browser and just use the colors. But wait for Tailwind CSS color library is in RGB and since you're working with Bootstrap most of the colors are in hex format so are you going to use the colors in your same project in both formats?
At this time your answer will be either one of two:
Yes I will use both formats
No, I will convert RGB into Hex
So to overcome such tricky and tiresome situations, I came up with a simple solution, lets just bring all the colors from different front-end frameworks into one place and make it available in all the possible used formats!
Whether its HEX, RGB, RGBA, HSL, HSV, CMYK you will get everything.
This way as a developer it is possible for you to use any color from any UI library of your choice easily without the need to visit that particular website of the library and that too in any format you want.
Primary Color System
1. Bootstrap Color System: https://stackui.co/components/bootstrap_colors
2. Material Design Color System: https://stackui.co/components/material_design_colors
3. Tailwind CSS Color System: https://stackui.co/components/tailwind_css_colors
4. Neumorphic Color System: https://stackui.co/components/neumorphic_colors
5. Bulma CSS Color System:
https://stackui.co/components/bulma_colors
Now if you go to these links and click on View Properties you will find all the available color formats mentioned above.
We even have gradient color system with different color gradients used by many Popular brands like - Facebook, Instagram, WhatsApp, Soundcloud, Twitch etc.
Gradient Color System
https://stackui.co/components/gradient_colors
Gradient Color System is the only color system where you don't need to click on view properties. Just click on Color Box and you get the required gradient copied.
So without any hesitation feel free and go ahead and use all the possible resources given above!😁