Visual design & handoff

Color basics

Ludovic Delmas
November 6, 2020

Color can be very tricky. Because the color picker offers millions of possible values, it can either be your best friend or your worst enemy.

Color is made of three elements: hue, saturation, and value.

Hue, which is the color itself. 

Saturation is the intensity of the hue. The more saturated the hue, the more vivid. The less saturated the hue, the duller it is.  

Value is the brightness of a hue. The more that hue is mixed with white, the brighter it becomes. And the more it’s mixed with black, the darker it becomes.

Now that we covered the three elements of color, let’s talk about the color wheel.

On one side, are cool colors: purple, blue, and green.

On the other side, are warm colors: red, orange, and yellow.

The color wheel is also composed of primary, secondary, and tertiary colors. There are 3 primary colors: red, yellow and blue.

There are also 3 secondary colors: green, orange, purple. These are created by mixing two primary colors together.

And there are 6 tertiary colors: red-orange, yellow-orange, yellow-green, blue-green, blue-purple, and red-purple. These are created by mixing primary and secondary colors.

When it comes to color, harmony matters. Color harmony is especially useful if you’re the one responsible to create a color palette for a new product.

You might have heard of terms like monochromatic, complementary, or triadic. These are some of the most useful color harmony rules. 

Monochromatic is a color harmony rule where your color palette consists of only one hue. For example, the yellow at the top is the base hue. The colors beneath it are based on that same hue, but with different saturation and brightness values. 

Another useful color harmony is complementary. These are the two hues that are visual opposites on the color wheel like yellow and purple. A great example of a complementary logo is the Krispy Kreme Doughnuts logo because red and green are on opposite sides of the wheel.

Finally, there is triadic which are the colors that are equidistant from each other on the color wheel. Here are a few examples on the color wheel, purple, orange, green, or blue, yellow, red, etc. Here is a famous example of a triadic logo: Burger King’s. 

See how all three of these colors play off of each other? That’s color harmony in action.

There are a more color harmony rules out there. Color.adobe.com is a great tool to view and create these color schemes.

Back to library
402
Back to library
402
WRITTEN BY
Ludovic Delmas
DATE
October 14, 2020
FEATURED ARTICLES
Difference Between Graphic Designer vs UX Designer vs UI Designer
Getting started
SWOT analysis
Research & understanding
Do UX designers need to know how to code?
Getting started
What is UX?
Getting started
RECOMMENDED COURSE
Free UX course
Course
What is UX?
2
Getting started
Why is UX important?
3
Getting started
What is the UX process?
4
Getting started
What is design thinking?
5
Getting started
What do UX designers do?
6
Getting started
UX vs UI
7
Getting started
Do UX designers need to know how to code?
8
Getting started
Recommended UX books
9
Getting started
UX university programs: Pros & cons
12
Getting started
UX bootcamps: Pros & cons
13
Getting started
6 brutal truths aspiring UX designers don't want to hear
14
Getting started
Difference Between Graphic Designer vs UX Designer vs UI Designer
15
Getting started
Intro to research & understanding
101
Research & understanding
Finding a problem to solve
102
Research & understanding
SWOT analysis
103
Research & understanding
Competitive analysis
104
Research & understanding
Heuristic evaluation (usability evaluation)
105
Research & understanding
Task analysis
106
Research & understanding
Stakeholder interview
107
Research & understanding
Framing the problem
108
Research & understanding
Research plan
109
Research & understanding
Survey
110
Research & understanding
User interview
111
Research & understanding
Card sorting
112
Research & understanding
Customer journey map
113
Research & understanding
Empathy map
114
Research & understanding
Affinity diagram
115
Research & understanding
Personas
116
Research & understanding
Contextual inquiry
117
Research & understanding
Diary study
120
Research & understanding
Eye tracking
121
Research & understanding
Intro to IA
201
IA & wireframing
Layout + CRAP
203
IA & wireframing
Site map
204
IA & wireframing
Scenarios
205
IA & wireframing
Storyboards
206
IA & wireframing
Low vs high-fidelity
207
IA & wireframing
Sketching
208
IA & wireframing
Wireframes
209
IA & wireframing
User flows
210
IA & wireframing
Intro to usability testing
301
Prototyping & usability testing
Usability testing plan
302
Prototyping & usability testing
Prototypes
304
Prototyping & usability testing
Research report
305
Prototyping & usability testing
Typography basics
401
Visual design & handoff
Color basics
402
Visual design & handoff
Color accessibility
403
Visual design & handoff
Pixels vs points
404
Visual design & handoff
Layout + 8pt grid system
405
Visual design & handoff
Design system
406
Visual design & handoff
UX writing
408
Visual design & handoff
"Final" usability test
409
Visual design & handoff
UX portfolio basics
501
UX portfolio
Your portfolio is just another UX project
502
UX portfolio
Choosing a site builder for your UX portfolio
503
UX portfolio
UX portfolio inspiration
504
UX portfolio
5 tips for junior UXers asking for portfolio feedback
505
UX portfolio

Join hundreds of

designers learning UX

Take our free 7-day UX design course for graphic designers, complete your first UX project in just a few days, and see what you think.
😎 You're awesome! We'll send you an email with the next steps. 🎊
👻 It looks like there's a ghost in the machine. Please try again.