Choose your colors wisely- Color theory for ui/ux designers
--
Imagine going to the hospital and seeing every wall colored in a bright red, the chairs are yellow and the staff is wearing orange coats… no, just no. Just imagining that makes me feel awful, if I ever went into a place like that I’d immediately walk out.
The same thing happens with designs, if you don’t choose the right colors people are gonna walk out. And choosing colors is not just about aesthetics and how pretty your design looks.
Hey, I’m Rudri and here I’ll try my best to help you figure out the basics of colors - terms for color, their meaning, where its best to use them in your designs and some tips from what I’ve learned so far.
Primary colors: Red, blue and yellow are the 3 main colors.
Secondary colors: They are made by mixing the primary colors. Like orange, green and violet.
Terms you should know
Hue: The pure color or a color of the visual spectrum (Rainbow colors) is known as hue.
Value: It refers to the darkness or lightness of the hue. There are two parts of value -
Tint = Hue + white
Shade = Hue + black
Tone = Hue + grey
Saturation: the intensity of the color is known as saturation or chroma. The color that has the lowest saturation is white.
Difference between color and hue? Color can be of any value, tone, or saturation like it can be “blood red”, but hue is just the pure color like plain red, no makeup and no filters.
Warm and Cold colors
Everything is connected with nature and so are colors. We get different vibes and are unconsciously affected from the colors that we see, cause its linked with our experiences and nature.
Warm: Colors like red, orange, yellow, brown gives a warm feeling as they are connected with warm things like fire , sun and coffee.
Cold: Blue, green and violet gives us a cool feeling as they're associated with sea, sky and trees.
Symbolism and meaning
Color has a different meaning depending on your audience’s nationality, religion/beliefs , age and gender.
How is colored associated with this all? Well in India orange is a color of bravery and courage but in Egypt its a color for mourning. A nursery should be full of fun colors, but a bank should have eye catching yet safe colors like blue. So before choosing the color for your project, do some research about your target audience.
Meaning of some basic colors-
Red: Strength, power, danger, passion, love, desire
Brand color of big companies like Coca-Cola, Netflix, YouTube
Here you can see how red is used minimally to highlight the CTA button
If you want to use red in the background or in a extreme way then always use a muted red, same applies for every bright warm color. So that its easier for the user to navigate and doesn’t burn their eyes.
Blue: Trust, loyalty, wisdom, intelligence, confidence, faith, and truth
Brand color of Facebook, Twitter, Ford, Oreo
Largely used for apps related to finance , as blue signifies trust and loyalty. Can use for links,CTA buttons, and probably anywhere
Yellow: Joy, energy, happiness, confidence, positivity, light and warmth
Brand color of McDonalds, Ikea, National Geographic, Cheerios
Again, used in the background as a muted color. Use yellow when you want to create a joyful atmosphere, can also be used for food related designs.
Green: Growth, relaxation, harmony, freshness, fertility, safety, health
Brand color of Starbucks, Spotify, Sprite, WhatsApp
When you don’t want the design to look too serious nor too childish or cheerful, use green. It also relaxes the eye and also keeps the users attention. can be used in travel apps/sites, neon and bright green for music and sports.
Orange: Creativity, cheerful, determination, encouragement
Brand color of Fanta, Nickelodeon, Dunkin (donuts)
Whenever I see orange I think of kids and food. Keep in mind orange is one of the least liked colors, it can make or break the design so use it carefully in your designs. Use in food apps/sites or when you want to give a cute yet bold look
Violet: Royalty, Luxurious, ambition, wisdom, mysticism, magic, spirituality
Brand color of Yahoo, Cadbury.
Personally I think purple/violet is one of the prettiest colors, it just gives that magical feeling, doesn't it? It should be used when you want to create a youthful vibe, like in music apps, or a fashion shopping app , or even in mediation apps.
Black: Classy, bold, elegant, minimal, sophisticated , stylish, authorative, formal, serious
Brand color of Nike, Adidas, Prada, Apple, Sony, Zara, Lamborgini
You see everyone loves black, whenever in doubt just use black. It gives that classy and bold look that will just grab the users attention, if used in the correct way. Tip- if using black text on a white or contrasting background used light black (no I don’t mean grey) or muted black, cause it will be easier to read. You can use it anywhere, just avoid using it in ui where you want it to be more fun and not so serious.
White: Purity, Grace, Innocence, Clarity, Simple
It is used in every single design.
Grey: Sad, Dull, basic, balance, formal, professional
You can use it in texts that you don’t want to be highlighted much, in backgrounds or even in icons sometimes.
