DEV Community

loading...
Cover image for Choose the correct color palette for your next project!

Choose the correct color palette for your next project!

Jash Gopani
・Updated on ・3 min read

Hello guys,πŸ™‹β€β™‚οΈ
this short article is about my recent side project called

COLORINATOR

doofenshmirtz

It is a quick color palette generator based on the 60-30-10 rule of UI design. You can use the color palettes generated by this website for any kind of project; apps, website, ppts and almost everywhere.

One of the main highlight is that you can see the real time preview of the theme colors! This will help you to get an idea of which color combination works best for your project.

Because this website is responsive, you will have no trouble using it from any device.
Responsive

Motivation

I used to get confused about what color scheme should I use for my projects. There are numerous colour palette generators available, but the problem is that most of those provide too many possibilities, and many of them just produce random colours that may or may not work well together.

To minimize this ambiguity, I developed this simple solution, which selects a primary color based on user input or at random, and then derives secondary and accent colors depending on the contrast ratio.

60-30-10 rule

To explain you in short, use a main/primary color on 60% of your elements as a theme color. Out of remaining 40%, you can use a secondary color on 30% elements which need user attention or provide valuable information to user. The rest 10% will be action elements which can be colored with Accent color to give them a distinct look from the rest of the elements.

If you observe carefully, the primary color is used as background color. Secondary color is almost white with slight tint of primary color...which is used for elements that require user focus like the user input field. The Accent color is used to highlight the website footer.
On inverting the theme, the primary and secondary colors are swapped and applied the same way.
With this type of theming, you can get an idea of how you can use the colors in your project.

So where do you get these colors from ?

The user can provide a main color which is intended to be used as a primary color for the project or the user can go for a random color as primary color using the random button.
On getting the primary color, the app calculates the font color for the website and the secondary and accent colors that go with the primary color.
How does it calculate secondary and accent colors ? The answer lies in this article

Apart from this, the accent color is either calculated based on the logic mentioned in the article or the color opposite to the primary color is picked from the color wheel.

Best way to use this ?

Get a primary color of your choice from anywhere on the net. Paste the primary color hex code in the input field and voila! You will get the most suitable secondary and accent color combination for your primary color.
Also, if you hit enter for the same hex code, you will get slight variations for secondary and accent colors too.
I have very well documented everything on in my github readme. If still you have any doubts/ suggestions you can comment them below and I'll get back to youπŸ˜‰

Features to be added

  • Copy button on saved theme palettes, to individually copy the hex code to clipboard
  • Import and export themes
  • You suggest

Do use this app for your upcoming projects and let me know what better can be done. Thank you!

Discussion (10)

Collapse
aileenr profile image
Aileen Rae

Totally agree on how online colour palette generators offer too many options - it's far too complex for someone like me with no design experience.

This is perfect for grabbing a simple colour scheme for small side-projects. Thanks so much for sharing πŸŽ‰

Collapse
jashgopani profile image
Jash Gopani Author

Thanks a lot ! do share your reviews after using it 😁

Collapse
aileenr profile image
Aileen Rae

I tried this out for prettifying an interview-style question I was working on and I love the convenience of this! I have an new feature suggestion too.

codepen.io/aileen-r/pen/ExWqxXX

I picked a base colour but I found there wasn't enough visual contrast between the accent colour and my base colour. I followed the guide in the source article you linked to and got to a orangey-yellow accent colour, but in your tool I get a muted orange which didn't pop as much. There's a commented-out line in the codepen CSS to try switching the two accent colors I tried.

I think I just cranked the hue and saturation values up further than you did? The article suggested ranges after all. I think a great feature would be an option to tweak the secondary and accent colours within the range suggested in that source article, possibly with slider inputs? What do you think?

Thread Thread
jashgopani profile image
Jash Gopani Author • Edited

Firstly, Thanks a lot for giving such a quick and detailed feedback ! It is a very positive feeling when your project is used by other community members !πŸ˜‡
In a very recent commit, I had intentionally muted the colors a bit (afterall color choices are subjective). So adding a slider will surely make this more configurable πŸ™Œ.
You can contribute too the source code to if you wish to...else I will be working on this further as soon as I get time πŸ™ˆ.

Collapse
cmuralisree profile image
Chittoji Murali Sree Krishna

nice, the only thing i lack about building websites is finding a better color scheme, thats why i always stick to gruvbox colorScheme

Collapse
vanshsh profile image
Vansh Sharma

Great πŸ‘πŸ‘πŸ‘

Collapse
bearevans profile image
Bear Evans

Bookmarked it and will definitely use this for my next side project. Thank you!

Collapse
jashgopani profile image
Jash Gopani Author

Very happy to hear this πŸ™Œ

Collapse
ki11switch profile image
Ki11switch

Very nice πŸ‘πŸ½

Collapse
jashgopani profile image
Jash Gopani Author

Thanks @ki11switch