Colors

Color is the secret weapon all UI UX designers need to know how to master. It is the ability you didn’t know you needed until you had it. It's a subtle and useful tool that is usually not noticed by users, but it can greatly affect the user experience. Color shades create different contexts and can influence how we perceive the overall UI UX design. 

‍

Different color shades carry different meanings, so based on this, we need to associate the right colors with the message we want to send to our users. Green can make us think about nature, hiking, traveling, etc. Shades of blue can make us feel calm and stir positive feelings and emotions. Or, think about how the black color, can give an elegant look to the design. 

‍

Every color carries a different meaning; depending on its shade, our brain responds to it differently. Colors have always been a way of expression, a part of our personality, and an aesthetic choice. So, as we become more and more addicted to technology and our digital interfaces, the need for a UI UX design that will be interactive, accessible, and help our users have the best user experience became a subject that was put in the center of attention in recent times. 

‍

Even more so, the lifespan of attention is slowly decreasing due to the continuous advancements of technology. Our users need web and app designs that can make them navigate or scroll through the platform as flawlessly as possible. Colors play an essential role in your Figma design process. Depending on the colors you integrate into your design, you can trigger different situations and create a good user experience or vice versa.  

‍

Think about it – you can be designing a new Figma design project for a food company. So, you start your UX research and find the right Figma fonts and all the elements you need in your digital design. You will also need to make a color analysis carefully. 

See what your users prefer and which colors they associate with the food industry. If you go with black as the primary color, you will probably generate a bad user experience which is far from intuitive. However, instead of using dark color palettes, you can go for more earthy tones, which help the user anticipate the purpose of your design. 

‍

Use a color picker and see which color is more fitting to the message you want to send. It can be chartreuse color, pink shades, lila, peach fuzz, or pearl white color. I know what you may be thinking: “What color is chartreuse?”. Well, green and yellow make chartreuse, a shade from the green color palette that can easily catch the user's attention. 

‍

But don’t get too far when adding colors to your Figma design, as you can risk transforming your design into something like the graphic design is my passion memes. 

‍

Depending on the way our eyes perceive color, each of them carries a different psychological meaning and can be used to transmit a separate message. Colors can also be seen as a way of sharing a message and talking with your audience without the first glance they take on your design. It's a fast and effective way in which UI UX designers can analyze user behavior and see how different colors can affect the overall user experience in the design. 

‍

Even more so, user experience from a design represents the journey our potential users can go through once they interact with the web or app design.  So, those elements that made the Figma designs, including colors, play an important role when interacting with digital platforms. Based on the color we integrate into our design, we can influence our users’ next step and help drive sales or determine the time that is spent on the digital platform that we have created. A visually appealing design drives a longer timespan used scrolling or navigation in our design. It can make different elements pop, hide others, and build the path in a design. 

‍

UX design is all about making sure that when someone uses our products, apps, services, and so on, they enjoy using them and are easy to use. 

‍

And, if you don’t know who the father of the “user experience” is, Don Norman, a designer and cognitive scientist, introduced the term back in 1995. In fact, he was an innovator, becoming the first person to hold the "UX" job title when he joined Apple.

“I invented the term because I thought human interface and usability were too narrow: I wanted to cover all aspects of the person’s experience with a Industrial design, graphics, the interface, physical interaction, and the manual are all part of the system.” - Don Norman. 

‍

Indeed, the term came to life only in the mid-90s. But long before Don Norman, there was Walt Disney, considered one of the first actual UX designers ever. Yes, UX and UX design are currently mainly used in tech. But user experience happens everywhere around us, and regardless of where we are, or any action we take is based on a set of emotions and instructions. 

‍

Think about it –  we can be at the library and waiting for the librarian to help us get a new book. If the waiting time is too long, we can be influenced to have a bad user experience. Or when we are on the road and we see red signs – we instantly think that we need to pay attention and see what the signs are about. The color we see is our trigger. 

‍

And for a more magical example, Disney is all about providing unexpected experiences for everyone. Theme parks, animated films, storytelling – everything Disney does is about focusing on giving us unforgettable moments and putting us at the center of everything they do. 

‍

Walt Disney was a master at understanding the needs of his audience and carefully choosing and checking every tiny detail to ensure that everyone would have a great user experience. We combine the right complementary colors, analyze whether or not we deliver what our audience needs, and follow a design style that can have the outcome we wish. 

‍

After all, that’s what UX is all about. UX and UX design represents the relationship between our users and our products. Can they use it easily and efficiently? Do they feel excited when using it? Well, yes, they should. But maybe there were times when you did not understand where to find a specific section on a website. That’s not your fault – not you as a user, at least. 

‍

For example, let’s say you’re shopping online for clothes. How easy is it to find that blue T-shirt you really want? Does the checkout process give you a headache? Or is it straightforward? All of these represent the user experience. 

‍

The goal of UX is to create products that leave a positive impression when it comes to functionality. But in order to achieve all these, we must also understand what our customers want. Their wishes. Their wants. And most importantly – their pain points with their current products. 

‍

The bottom line: in order to deliver a good user experience we need to be careful at any detail, and color has a bigger power over our design than we sometimes realize. 

1. ‍Choosing The Primary Color

This is the basis of your UI UX design, as it covers most of it - 60%. It will set the tone and atmosphere for your page, so consider a few aspects before you pick one. When designing for brands, we must consider the brand identity. By respecting it, we can ensure the brand message is conveyed.

Another important aspect that we have to consider during the design process is our target audience. For example, if our public mainly consists of Gen Z, we would strive to create dynamic and playful interfaces.  The final aspect we should pay attention to is our design goal. If we want our app design to convey a positive and joyful message, we will never select dark and bleak hues.

2. Choosing The Secondary Color

The second color, which covers 30% of the user interface design, must complement the primary shade. We can use the color wheel to identify what colors match our first selection. Think about integrating complementary colors, such as red and green, into your designs.

An essential property that the secondary color has to possess is contrast. The shades we pick should be distinctive enough to avoid blending in. The secondary shade also supports the overall mood of the website. We use this color for design elements such as the brand logo, headings, icons, and subtitles. A great example of color theory use is in the design of the McDonald’s page - yellow perfectly complements the famous red background while conveying a youthful and energetic message. 

3. Choosing The Accent Color

The remaining 10% of the design acts as a pop of color. Similarly to the secondary element, we should keep contrast and mood in mind when we select the accent. Choosing the accent may be a little challenging because you already have to keep the other two colors in mind. Do not worry, there are countless sources of inspiration on the internet from which you can borrow ideas. This 10% is reserved to highlight elements such as call-to-action buttons and badges. 

Our brain is one of the most complex organs. It is the powerhouse that helps us function, process triggers, and respond to different stimuli that we encounter. It controls how we think, the way we act and breathe, any motor skill, and the way we perceive everything around us, including colors. 

‍

Colors are more than a simple swatch on a design. They are a way of expression and can help our potential audience understand what will be the design about. It can let the users know when they are completing an input wrongly, whether or not their delivery has been sipped by only looking at the colors used in the app or web design. 

‍

Researchers Andrew Elliot and Markus Maier got more in-depth with the power of color psychology quoting that “Color clearly has aesthetic value, but it can alsocarry specific meaning and convey specific information. Frominfancy onward, persons encounter both explicit and subtle pair-ings between colors and particular messages, concepts, and expe-riences in particular situations.”.  

‍

And, to go even further we can address the fact that color shades are usually split into two categories: cold and worm colors, based on their tones and undertones. Worm hues are color shades such as red, yellow, and orange. And, on the other hand, we have cold hues where we can find blue shades, green, and purple color pallets. 

‍

Even more so, in a design, it’s important to not go overboard with the colors and find a primary color palette and use it. Having a consistent design is the key factor when it comes to designing and choosing the right tone for your design. Finding your tone of voice and your brand image can be influenced by the color palette you choose to integrate into our design. Based on the color you choose you can have an earthy design, an elegant digital design, or you can even help your potential users feel comfortable when navigating. 

‍

Even more so, the designer needs to keep in mind that he is not the one who is addressing the problem. You might have some colors that you think are beautiful colors. Yet, your audience might think otherwise and have a different approach to the design. So, choose the primary colors based on the color analysis and integrate color palettes that suit your user’s preferences. 

‍

Another layer that comes on when choosing your design is the stakeholders or the client you are working for. This is where your design needs to mix and match with their preferences. Here, they can choose their favorite color or a specific shade or tint that is not really the best fit for your design. But don’t forget – there is a lifeline even for this situation – and that is product testing. 

‍

And, with product testing, you can see how your potential users might react to your product and see if the design is going in the right direction. So, keep your design clear and use the design essentials you can integrate into your Figma design. 

• How does color psychology work?

Colors can convey emotions and trigger certain feelings which can influence behavior and modify how potential users can see and react to the design. So, designers need to understand how color works in a design. And, whether they are warm or cool color tones, they can create different moods. Think about it – a digital design that has green as the primary color can make your user feel calm and relaxed, so it can be soothing for a meditation app. On the other hand, a pink or purple color design can spark creativity and make your users feel inspired and creative. However, you need to keep in mind that designs have different meanings based on the place we are located. 

‍

• Branding

In the design process when choosing the right colors you need to always keep them in the back of your head – the brand image. If you already know which is the brand’s logo, the brand’s values and what is the message that the design needs to send out, then you need to use a color wheel that will reflect your brand’s identity. The message colors should align with the message the brand is targeting, helping the users understand the visual design.

‍

• Color scheme 

A color scheme is made out of the colors that are used in a Figma design. A color scheme needs to be made out of the colors used in the design process. There can be monochromatic colors, complementary colors, and analogous colors. When creating a color scheme, we need to keep in mind that those colors are the ones that make your branding a whole and need to be suitable for your target audience. 

‍

• User testing

As with any part of the design we need to see and test how the audience is reacting to the colors we used in the design. With the color analysis you will have obtained, you will see what your users prefer and how you can make the user experience even better. You will also need to test the colors on more devices and see how they react on more devices. Based on that, you will be sure that your design is easy to read and the colors used are readable. 

‍

• Use color to your advantage

Colors have the power to guide the users in the design. With colors, you can let your users know whether or not they have entered the correct input. Or you can help users navigate the web or app design as important information is highlighted in different shades. You can also use a color palette to highlight the CTAs and divide the different sections from your design. 

‍

Believe it or not, 93% of us are influenced by these UI UX design visual factors when deciding to purchase any product. As users, we are so accustomed to seeing them that we often underestimate their power and influence over how we perceive things. But good UI UX designers will always avoid falling into this trap because color is one of the first aspects they must consider during the design process. To make their job more efficient, they often choose to follow a set of predefined rules.

Surely, some creatives have a native talent for mixing and organizing shades. However, most of us will not risk going with our personal preferences when creating something that addresses our users’ needs. So, what are the principles of design that every one of us should follow when it comes to colors? A commonly used principle in the UI UX design world is the rule of 60-30-10.

This interesting convention comes from the universe of color theory and serves as a means of achieving visual harmony. It is not exclusively used by digital designers - fashion and interior designers also follow it for guidance. This rule is pretty straightforward – every color scheme should comprise three different colors in the following amounts:

• The 60%. In UI design, this is reserved for the dominant hue, which is a primary color in most cases. It will serve as the base shade of the design.
• The 30%. The secondary color is still somewhat visible. This is primarily reserved for elements such as the logo or medium components such as cards and carousels.‍
• The 10%. The accent color is used as a means of highlighting the design. For example, an accent hue can emphasize elements such as call-to-action buttons.

We have now established that color theory is instrumental in UI UX design. Now, we should focus on learning how to apply these principles of design in our web and app design to obtain visually spectacular pages that also take functionality into account.

1. Choosing The Primary Color

This is the basis of your UI UX design, as it covers most of it - 60%. It will set the tone and atmosphere for your page, so consider a few aspects before you pick one. When designing for brands, we must consider the brand identity. By respecting it, we can make sure that the brand message is conveyed.

Another essential aspect that we have to consider during the design process is our target audience. For example, if our public mainly consists of Gen Z, we would strive to create dynamic and playful interfaces.  The final aspect we should pay attention to is our design goal. If we want our app design to convey a positive and joyful message, we will never select dark and bleak hues.

2. Choosing The Secondary Color

The second color, which covers 30% of the user interface design, must complement the primary shade. We can use the color wheel to identify what colors match our first selection. Think about integrating complementary colors, such as red and green, into your designs.

An essential property that the secondary color has to possess is contrast. The shades we pick should be distinctive enough to avoid blending in. The secondary shade also supports the overall mood of the website. We use this color for design elements such as the brand logo, headings, icons, and subtitles. A great example of the use of color theory is in the design of the McDonald’s page - yellow perfectly complements the famous red background while conveying a youthful and energetic message. 

3. Choosing The Accent Color

The remaining 10% of the design acts as a pop of color. Similarly to the secondary element, we should keep contrast and mood in mind when we select the accent. Choosing the accent may be a little challenging because you already have to keep the other two colors in mind. Do not worry. There are countless sources of inspiration on the internet from which you can borrow ideas. This 10% is reserved to highlight elements such as call-to-action buttons and badges. 

‍

The power of colors and how colors influence our emotions

‍

Colors speak volumes. Colors can make a statement and create a specific mood beforehand, given the color shade you see. Colors carry meaning and can also be used to repose our feelings and emotions. Even more so, the color wheel and the color picker were created for us to use color and leverage their power of expression. Think about UI UX design and how we can attribute a specific color to send a message in this world of digital interfaces. 

‍

To better understand how color can influence us, we need to understand what color is. Color is the result of light. The response comes into play once the light is reflected on certain surfaces. For the human eye to perceive color, light is mandatory. The science of color was discovered by Isaac Newton. 

As the human eye can see infinite color shades, scientists further wondered whether or not a color wheel or color palate can be defined using the primary colors we encounter daily. Which he further proves to be true. Newton demonstrated that only seven primary colors are in the color wheel, as seven planets were discovered and seven musical notes in the diatonic scale. Newton's color palette includes red, blue, yellow, green, blue, indigo, and violet, creating the RGB color wheel. 

‍

This was the setting stone when it came to the science of colors, which is nowadays widely used in UI UX design. The color theory divides color into specific criteria based on their shared qualities. Based on the color spectrum and with the help of an RGB color picker, we can divide colors into hue, tint, tone, and shades. 

‍

We can divide the hex cod on the color wheel with color analysis and see primary, secondary, and tertiary colors. With the help of the color wheel, we can also see the connection between colors and make sure that the colors you use in your web or app design are harmonious.

Based on this, we have different categories of colors, such as:

‍

Analogous color – Analogous colors are situated next to each other on the color wheel. Whether they are warm colors such as red, orange, or cold colors, they are placed next to the colors with the same characteristics. 

Complementary colors – Complementary colors are situated on the opposite side of the color wheel, representing the contrasting color of the one chosen. Let’s say you want to integrate purple into your web or app design and highlight different sections of the UI design. To make sure they stand out, you must incorporate the opposite color from the complementary color spectrum, such as yellow and purple. 

Split complementary colors – Split colors use the two colors situated on each side of their complementary color. 

Triadic colors – Triadic colors are the three evenly placed colors from a triangle on the color wheel. 

‍

Color terminology  

‍

Hue – A hue is the name given to a color. It represents the pure color of a certain element, such as blue, violet, yellow, or green. 

Tint – A tint in the color palette is the definition of the color that is obtained when mixing the hue or the pure color with white. It is a lighter color obtained to brighten the hue color, having the ability to range from lighter to darker tones as close as they can get to the original color shade, which means moving the color picker closer to the white. 

Tone – A tone in the color wheel represents the mixture of hue colors with shades of gray. For UI UX design, it can be defined as moving the color picker closer to the gray color spectrum. 

Shade – A color shade in the color wheel is the outcome of adding black to the hue color. A color shade must not contain white or gray shades.   

Whether it is navy, pastel blue, royal blue, or any other blue hex code, this color carries a strong and meaningful message – suggesting everything will be fine. It is a calming color that can make the user feel balanced. The color blue is also an inclusive color, as color-blind people can also see it. 

‍

Shades of blue can produce chemicals in our brains that have proven to make the viewers calmer, releasing the feeling of peacefulness. It is a dramatic color which can be easily observed. The color of nature used in excess can also negatively affect the design, as too much blue can make your UI design feel cold and deliver the wrong message. 

‍

Blue is a primary color, so if you wonder what colors make blue, you won’t find any answers. Blue can help you have a design that communicates an important message, such as a balanced and united design. 

‍

Accessibility is one of the essential features that can be found in a design, and having a design that makes all the users feel comfortable and like they are part of the whole is what every designer needs to take care of. So, don’t forget that blue offers an experience that all possible users can see. Many UI UX designers choose shades of blue for companies related to banking and user data protection. Blue is also a calming color and is an excellent alternative for the website design for medical service providers. Depending on the tint of blue, it can be monotonous or communicate the feeling of sadness and longing to the users.

‍

Why do we like the color blue

• It is the color we can easily find in nature. We can find blue everywhere. We can immediately see the sky when we first step out of the door. Blue is the color of water, sea, and lakes and can occupy most of the planet, being one of the most encountered colors available. 
• It’s one of the most encountered colors in UI  UX design. We can see shades of blue ranging from navy and royal blue to another blue hex code, such as baby blue or pastel blue. 
• A useful color for UI designers. Shades of blue represent one of the most useful colors used in web and app design. It is a color that suggests safety and success, and it provides a good user experience. 
• A sense of calm. Using a blue hex code can help the UI UX design provide a good user experience and flawless web and app design navigation. Shades of blue can also be used to communicate a safe environment. Pastel blue, royal, and navy blue are used widely on traveling sites – think about Booking, Ryanair, or social media websites such as Facebook, which has as its primary color. Incorporating shades of blue will make your UI design seem trustworthy and create a more credible design. 

‍

Famous brands that use blue as their primary color in their design are Facebook, Dell, HP, Visa, Oral-B, PayPal, P&G, LinkedIn, Disney, and Philips.

Big brands that use blue as their primary color carry the appearance of optimism, and when using dark blue shades, they give off a professional and classy look. Think about the streaming platform Disney+, where a darker shade of blue is used in the digital interface design. The look that it gives is elegant and trustworthy. 

Visa also uses blue in its digital design to convey a readable and to confer the users a web and app design that can be easily scrolled through and offer them a trusted appearance. 

So, you can incorporate shades of blue to create a design that can be trusted and have an elegant and sleek look. 

The color red is another primary color that can not be created from the combination of other colors. Shades of red colors, such as burgundy, dark red, scarlet, or dark red, can influence the way we see a design and catch the user’s attention more easily. The color red is usually associated with fire, love, passion but also warfare. Think about it – when we see red, we stop and look, yet it is usually used to highlight unfinished actions. It can be used for CTA in the UI UX design or to draw the user’s attention to topics that carry more meaning to the design. 

‍

Think about YouTube, Netflix, or any other big brand that uses shades of red as their primary color. The dark red that we can encounter on Netflix’s interface is used to recreate the feel and look of a real-life theater. 

‍

Why do we use red:

‍

• Shades of red also symbolize action, a robust design that gives off energy and passion. It is a color that motivates and stimulates but simultaneously makes the user cautious and ready to act.
• This bold color instantly captures the attention of the viewer. It is the brightest and hottest hue in the color wheel. While it is excellent for making an impact, we must be careful not to abuse it when creating the user interface. Shades of red can become easily tiring to the eye. 
• Red may be an excellent choice for a CTA button but a disastrous one for the background of a page. As far as symbolism goes, it evokes feelings of passion and energy but can also emulate anger. News outlets use this color quite a lot.
• Don’t overdo it with the color red. Although red is a great color to use in your app and web design, sometimes the use of red can come with more significant meaning as it can sometimes make the design feel full and cluttered, causing a bad user experience. So, pay attention to the use of red and try to include it to draw attention to specific elements. 

And, if you were wondering what color can result from the combination of red and blue, the answer is purple. If another question that strikes your mind is red and green, make what color? The answer is brown. 

‍

Famous brands using red design:

‍

A few famous brands that use red as their primary color are Netflix, Coca Cola, RedBull, Wendy’s, and Target. And, there is no wonder in the choice made by those big brands. Red is among the most preferred colors and is considered by many the most beautiful colors from the spectrum.

‍

The color is also encountered in the retail and consumer industry, where it is used to spark excitement. Think about it – when buying a new pair of jeans or when finding that comfortable pair of sneakers you’ve been searching for, the feeling you are looking for is excitement. And brands such as H&M or Nike know how to offer users that. 

‍

In the world of tech, we can find Adobe, Oracle, Lenovo, and YouTube, which use red as their primary color to draw attention and audience. So, next time you are looking for your primary color palette, you can integrate shades of red into it.

One of UI design’s greatest cliches is the use of green for subjects related to nature. It also inspires peace, safety, prosperity, and overall positive attributes. If you want to convey that your brand is environmentally conscious, green would be the safest pick.

Shades of green can be seen as natural colors. Pastel green, forest green, light green, and dark green can be seen as calming, mitigating, and color shades that trigger a good mood. Think about it – green can be seen as the color of health, luck, and nature. Depending on the design we are thinking of creating we can incorporate shades of green in our design when starting a project in the health or food industry. 

Why use green in your UI UX design/

• Calming color – Light green, light green, pastel green, and forest green are some of the shades available that can create a worm design where our users can have a good user experience and navigate or scroll easily through it.
• Conveys health – Seeing the color green in a UI UX design can create an image that seems and feels healthy and can make the whole design more appealing. Think about how green plants make us feel alive and have an overall better mood.
• Green is nature – different shades of green 

Green is among the colors that have a calming effect - it could be of great use for somebody who wants to develop a wellness-related website or app. Put simply, 9 out of 10 times, people will associate green with nature.

Famous brands that use green in their design are Starbucks, Android, Acer, Hulu, TicTac, Spotify, Sprite, Lacoste, and WhatsApp.

Green is a calming color that is widely used for companies’ logos, mainly in the consumer goods and retail industries. The color can create a harmonious perception of the product and will also create a sense of growth, health, luck,  and sustainability. 

You can take an RGB color Picker and see the shades that those giants from different industries use green as their primary color to elevate their product’s quality. Starbucks or Sprite delivers products that need to have a certain degree of quality. Green has a sustainable look and can help a brand seem sustainable, organic, and fresh. 

Spotify uses a neon green color that can be seen as a revitalization. It combines the earthy aspect of green and a neon color that pops out and draws attention towards it. Even more so, when used in the dark mode it can be easily seen.

‍

So, depending on the app or web design that you are about to start you need to keep in mind that different shades carry different meanings.

The most widespread symbolism of purple is creativity and luxury. The color purple is one of the most spread colors in UI UX tech design. It is obtained when combining red and blue and it is used in a user interface to symbolize creativity, pride, and dignity. Throughout history, purple was associated with royalty because purple dye was very inaccessible.

The connotation of imaginativeness sends the message that a page will fall into the artsy side when its main theme is a shade of purple. Hence, this hue is a great pick for the UI UX design of websites related to arts, beauty, and fashion. On the other hand, a sports app would not benefit from purple-dominant visuals. 

Why use purple in the design?

• It stands out – using the color purple in a design can help the image draw attention to it. It helps a message stand out and it can carry the user to the image of a starry night or a lila sunset. 
• It makes your design feel and look elevated – When using Lila or the color purple in your design it can create your web or app design feel and look better, superior, and even more lavish UI UX design.
• It’s a versatile color – The color purple or any of its shades from the color pallet can be used in your Figma design as it can offer you the possibility of combining it with many other shades from the color spectrum. UI UX designers can even go from pairing different shades of purple to complementary colors and other pastels that might match the shade. Just take the color picker and take it from one hex code to another until you find the perfect match.
• Intuitive – As it is a color shade that can be easy to follow and has a spiritual meaning, it gives the user the possibility to follow easily the UI design. Creating a design that is easy to read and shares a powerful message. 

Some of the famous brands that use purple as their primary color are: Yahoo Mail, Milka, Cadbury, Twitch, Taco Bell, and Wonka. 

Purple is the color of creativity and big brands are used to generate creativity. Used by Yahoo and Twich, purple color shades have the purpose of offering inspiration and have an original and extravagant appearance. Milka, Cadbury, or Wonka use shades of purple in their design as it is a distinctive, sleek, and luxurious color, at the same time offering the user a great user experience.

The black color is widely used in almost every UI UX design. Whether it is from elements such as different cards, the font used in the UI UX design, or dividers. Each element used in the design has its purpose, and black shade will also be mainly used in dark mode. 

And if you are wondering whether or not is black a color, the answer is that the color black is the absence of color absorption. It is the response we see when color and light are missing. 

Why use black in design?

• Elegant design – Using black in your design can make it feel and look elegant and sleek. A dark design can be easier to follow, and it reduces eye strain, triggering a better user experience.
• Dark mode – Incorporating different shades of black into your design will help you create the dark mode that becomes mandatory in every design. Dark themes help the user navigate your design more easily. It helps create a flawless user experience, and it helps the user navigate better when the lights are dimmer.
• Stands out  – A dark design helps the UI UX design make a statement. When presenting a product that is sleek and elegant you can use a dark design and make the product stand out. Think about the UI UX design when presenting jewelry, watches, or any other high-end product. 
• It's impersonal – The use of a dark color such as black will make your design feel strung, but the color will give the app or web design a cold feel. So, we can not incorporate a dark design on every project that we have, and depending on what product we are building a web and app for we can see if a black design is the fit for it. Think about it – when designing for a food company or a children's website we can’t use a black design, so try and see whether or not it is the proper color for your design. 

The color of happiness - yellow is striking and sets a positive tone for the design. One of its main associations is with the concept of youthfulness, making it appropriate for apps and websites targeted toward children. As a tip, we should avoid overusing yellow because it can easily become obnoxious due to its brightness. So, try and pair it and balance it with a color palette that includes a more neutral color palette that contains grey, white, and black. 

If you were wondering what colors make yellow, well the answer is easy – none. Yellow, red, and blue are primary colors that can not be obtained from other colors. However, pastel yellow and other shades of yellow can be obtained with a combination of grey, white, or black. 

Why use yellow in design?

• Energetic – Having a happy and upbeat design can give your users a good user experience even from the beginning. Yellow is a natural color that conveys warmth and attracts attention towards it. It is bright and vigorous and can stimulate the brain. 
• Eye-catching – An eye-catching design is the dream of every UI UX designer.  So, having the ability to introduce shades of yellow or to use a yellow color palette can help your design be seen as eye-grabbing is what we can do to make sure of. A yellow color palette has normally the ability to draw attention towards it and can be implemented in CTAs and small details that we want to stand out.
• Think about the context – Depending on the context we can decide whether or not we can integrate yellow color shades into our design. Think about it – in some cultures yellow is seen as the color used in warnings. And, on the other hand, we can see yellow used to signify luck or happiness.

Famous brands that use yellow as their primary color are McDonald’s, Lay’s, Nikon, Snapchat, DHL, MailChimp, Carhartt, and Shell. Yellow is usually used to convey high visibility and to be spotted easily by the viewers. It is a happy and joyful color that can spark positivity and it is a symbol of determination and success.

It is the color of sunshine and is associated with hope and it is encountered in digital designs with the purpose of delivering a cheerful and bright design. Think about Lay’s or McDonald’s who use yellow as their primary color to suggest a warm and welcoming experience that attracts attention. The color yellow is used to promise a fun and eye-catching experience making the users trust and love the products. 

Yellow can help establish the brand’s identity and can guide the users through the app or web design. And don’t forget that it is a great color you can use in your UI UX to grab attention or for CTA’s.

Pink color represents love, cheerfulness, and creativity. It is a color that brings calm and can be used in your UI design to create a playful atmosphere. Yet, depending on the location we are, shades of pink can carry a different meaning. In some cultures, pink color is used to target an audience that is made mainly of females. So, you can encounter pink as the primary color in designs that are the main product in the beauty and fashion industry.  

‍

Why use pink in UI UX design?

• Warmth – Using light pink, hot pink, and other pink color codes can make your Figma design more appealing to your targeted audience and have a better overall user experience. 
• It's playful – A pink color code can make you feel less stressed, less overwhelmed, and have a good user experience. It is a color that can be integrated into designs for children and any design that can have a playful look. 
• Creativity – With the help of different shades of pink we can stimulate creativity and innovation. So, if you are launching a new product on the market you can incorporate shades of pink into your UI/UX design to motivate your users to give it a try. 
• Calmness – the color pink can also be used to reduce the levels of anger and integrate them into mindfulness and meditation apps.

‍

Some of the most famous brands that use pink in their design are Barbie and PINK. Those brands make use of the color pink in order to create a safe and friendly environment where emotions are welcomed. Pink can also be used to spark euphoria, compassion, and a space where those feelings can be nurtured. 

The orange color symbolizes a playful and youthful UI UX Figma design. It has the purpose of conveying a  creative and friendly user experience. A Figma user interface that uses an orange color code can help create a platform that is warm and energetic.

• Engagement – Using orange as the primary color in a Figa design can spark innovation and help the users engage with the web or app design. Platforms such as Hub Spot, Wild Souls, or Chirplay, use shades of orange to highlight different CTA’s and important parts of the design.  
• Calming – Burnt orange, peach fuzz, or orange pastel are the orange hex codes any UI designer needs to know for a more earth color palette. So, if you are advertising or building a web or app design for a food company or plant-based food company you can use some of the more earthy shades of orange.
• Bold – The orange color can also be the center of attention when used properly. Bright orange can be used to help certain elements stand out and be remembered while more earth tones can get you thinking about the sunset and the sunrise. The combination of those different shades of orange can result in different flavors that are associated with the design and create a story.

Famous brands that use orange in their design are Dunkin' Donuts, Nickelodeon, Mastercard, Timberland, Soundcloud, and Reese’s. The purpose of an orange design is that it can catch the attention easily and highlight the important details. 

Orange is a warm color that creates the impression of an affordable experience while having a youthful and playful appearance.

White color can be encountered in almost any Figma design. It can be used to color the background of your app and web design or it can be used in different elements of your design. Combining different shades and adding gradients to your design be simple, modern, and elegant. 

‍

Pearl white color, winter mood, oatmeal, and other white color shades can be used in the design to create a clean and minimalist interface. So, if you are looking to create a design that is simple, easy to follow, and professional you can try and integrate different shades of white in it.

‍

Why use white color in UI UX design?

‍

• Simplicity – White color can make your design feel and look simple. Think about all the white elements we to make our user interface be readable and more easier to navigate. Even more so, using a white color code such as pearl white can help us prioritize the content and see which are the CTA’s and the messages we need to focus on from the user interface. 
• Trustworthy – A mostly white design is mainly used to make the Figma design trustworthy. White color is often associated with innocence, so, having a white design will help the user interpret it as neutral.
• Minimalism – Having a minimalist design has become everyone’s favorite approach when starting a new project, and incorporating white can help you deliver that look.

The brown color is mostly used when designing neutral and earth components. Brown is an earth tone that can be encountered from the ground to anywhere we look in nature. It can be used to create the look of authenticity and tradition in the design. It is a color that transmits warmth and helps the design convey a sense of reliability and stability. 

Every color influences our mind and how we react to it and, a brown color code will make your design feel secure and give it a sense of strength. So, those brown details can give a sense of comfort and sophistication.

‍

Why use brown in your UI UX design?

• Tradition – Incorporating brown color into your app and web design can help you deliver a design that has strong roots. Using brown in your design can be integrated into web and app design that has furniture as a product. 
• Organic look – The brown color has a sense of earthiness to it. It is associated with nature and can create an organic look to the design. 
• Stability – A brown color code used in a UI UX design can also indicate a stable environment. So, designers can add shades of brown color to their designs in order to give them a more grounded look.

‍

Some of the most famous brands that use brown in their design are M&M, UPS, Nespresso, Hershey’s, Louis Vuitton, and Cracker Barrel. Brown is used to create a feeling of authenticity, and elegance and give off an sleek look of the design. It is an earthy color that combines a traditional look with a modern point of view. So, you can incorporate brown shades into your UI UX design to create a link between new and old.