Choose your colors wisely- Color theory for ui/ux designers

Rudri Trivedi
5 min readJul 22, 2021


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

Designer Jobs App by Patryk Polak
Designer Jobs App by Patryk Polak

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.

Nike UI Red Concept Ervin Halebic

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

Landing Page Wallo App — Finance App 😁 by Habibi 🤖

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.

Dance like a king — Landing page by alex aleksandrov

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.

Travigo — Travel Dashboard ✈️ by Andika Wiraputra

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

Food Dashboard Concept 🌮 by Amelia Nurvita🐻

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.

Music Player • Mobile Application by Diana Medvedieva

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.

Landing page by Oleg Frolov

White: Purity, Grace, Innocence, Clarity, Simple

It is used in every single design.

Objest Clock by Gregory Loshakov

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.

Beyerdynamic Mobile site by Anthony Goodwin