Visual design & handoff

Color basics

Ludovic Delmas
October 14, 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 vault

402

Back to vault

402

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