Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

hci
ui
ux
design

What is the color theory in UI?

Sheza Naveed

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Color theory is the collection of all the rules and guidelines used to communicate with users and make the interface visually appealing to the user.

Colors are categorized into the following groups:

  • primary (red, blue, yellow)
  • secondary (mixes of primary colors)
  • tertiary (mixes of primary and secondary colors)

Colors have the following properties:

  • hue: how the color appears (e.g., “is blue”)
  • chroma: how pure is the color: i.e., if it has shades (black added), tints (white added), or tones (grey added)
  • lighting: how pale or saturated the color appears to be

Using the colors carefully to craft an interface is an important part of user experienceUX design. Colors should make the interface visually appealing as well as offer good usability. Designers use the additive color model for screen design. In this model, red, blue and green are primary colors.

Different color schemes can be used in the design process:

  1. Analogous: Use any three colors placed beside each other on the color wheel. White is added to make “high-key” analogous color schemes.
Newton's color wheel
Analogous color scheme
  1. Monochromatic: Take one hue and create different elements using different tints and shades.
Monochromatic color scheme
  1. Complementary: Maximize contrast using opposite color pairs, i.e., blue/yellow.
Split color scheme
  1. Split-complementary: Soften contrast by adding colors to either side of the complementary color pair.
Split complementary color scheme
  1. Triadic: Maintain harmony and make contrast higher by using three colors that are 120° apart on the color wheel
Triadic color scheme
  1. Tetradic: Use four colors in which there are two sets of complementary colors and choose one dominant color. Take warm and cool colors into account.
Tetradic color scheme
  1. Square: Use four colors that are 90° apart on the color wheel.
Square color scheme

Colors should have an overall positive impact on the user and must reflect the design.

RELATED TAGS

hci
ui
ux
design

CONTRIBUTOR

Sheza Naveed
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring