Colors its an essential element of User interface as it represents your brand. However color is the only element in user interface that can get us into some tricky situations.
Allow me to explain..
Scenarios from Client's point of view
If our client is already aware with the range of colors he/she is going to use in the application then for us developers nothing is more 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 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 point of view but now lets take a look from developer's point of view.
Scenarios from Developer's point of view
As a developer its 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? at such cases what will you do?
The common answer to this one simple question is - Open the Tailwind CSS in browser and just use the colors. But wait Tailwind CSS color library is in rgb and but 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!😁
Top comments (0)