This is a general discussion thread and I would love to hear what designers think about color in design.
A few questions that I personally have to start the discussion are:
- What methods do you use to find your color palette?
- How do you know it's the right palette?
- How do you determine which elements get what color?
- Do you recommend any resources for this topic?
Top comments (6)
I used to use this tool for choosing colors: paletton.com/ (it had another name back then). It shows which colors fit together with others mathematically (using color theory).
From my recent findings, this website offers prebuilt color schemes: coolors.co/
The general rule of thumb for text readability is that the lightness/darkness contrast between text and background should be at least 50%, for example, if the background is white rgb(255, 255, 255), then the text should be no lighter than middle gray rgb(128, 128, 128).
Hey Ryan!
Whenever I design a website/product/whatever, the most important question is: What do I actually design? I know, sounds a bit crazy, but it's really important. Example: If you design a banking app for elderly people, most likely, you want to show how reliable and secure it is, you want to gain trust. If you design a funky festival app, you face a whole different challenge and target group. Most likely, you want your app to appear young, fresh and happy.
This ideas are the groundwork for choosing some colors. There are great guides for color psychology, which color is associated with which mood/value. I have appended a color guide from this website (lifehacker.com/5991303/pick-the-ri...), which I used sometimes.
Another important tool is the color wheel. Most likely, your art teachers showed it to you and never told you, why this is important. Complementary colors are opposite on the color wheel and have a good contrast. If you want two or more colors for whatever reason, choose one starting color and then play with complementary contrasts or draw a triangle in the color wheel and see, what what color combinations you get then. Always compare it to your color guide.
You could also use different saturations of you colors, but let's not make things too complicated here. But most important: NEVER use colors like rgb(255, 0, 0) or rgb(0, 255, 0); that's just awful and doesn't allow brand identity. If you want to use red, why wouldn't you go a bit crazy and use a hue of pink?
Most likely, you want one "action" color, like I call it. This is the color you use for all important buttons, links or active UI elements. Choose a white or light gray background and use a dark gray or black for your text and headings. There are contrast standards worth googling, but most likely: If you can read the text very clearly, you're safe.
Colored backgrounds are more complex, because then you have a lot of interactions between lines, areas and whatever, so usually it's safer to use grey values for normal text and backgrounds (at best, with good contrast). Important fact: Colors surrounded by dark grey or black seem more vibrant.
If you use more than one action color, be aware that yellow and orange is associated with "warning", red is used for destructive actions and green can be used for "OK!", hence it's risky to use color combinations if some of the colors are used for buttons. A green "Delete"-Button would confuse users, if there is also a yellow "Cancel"-Button next to it. If you have only red as action color, on the other hand, no problem. Blue is usually neutral, hence Apple uses it as standard in iOS and macOS.
This is definitely not a complete guide for color usage, but I hope it's a start. If you have questions: I'm happy to help.
I’m not a designer by any means but I tend to go with a few rules when I do design things.
And I also use coolors.co to play around with palettes to get a feel for the different colours! Hope that helps!
I can only use my companies Branding Guide unfortunately!
For personal stuff, I saw this Dev.to post ages ago and saved it, and it has been fantastic.
Best websites for free gradients and color schemes/palettes for faster workflow
Hitarth Chudgar
thanks dude
-Bit of contrast.
-Not too many, not too few.
-If two things fulfill the same, or similar purposes, they should look the same.
This is just what I think.