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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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.