Picking colors is often frustrating: so many options! Art history, cultural differences, color theory, brand guidelines, and usability inform our decisions. This presentation offers a systematic approach to color for UX design. Based on value contrast first, we will approach color selection as a system, rather than a series of unrelated choices.

1. Color for UX design
Maria Matveeva
Head of Design at DockYard @rgbcolor @dockyard

2. Photo by Elliott Engelmann
Where do I start?
How do I explain decisions to a client?
How do I deal with differing opinions?
How do I know the colors will work well?
There’s too many options!

5. Moscow
Sacramento
Montréal
Baltimore
Washington, D.C.
Boston (to be continued)

6. UX Design

7. DockYard.com @dockyard

8. Photo by Elliott Engelmann
Where do I start? Contrast.
How do I explain decisions to a client? Focus on goals.
How do I deal with differing opinions? It’s OK.
How do I know the colors will work well? Test.
There’s too many options! Pick a process. Follow it.

10. Are we in control?

14. 1. Art History
2. Culture & context
3. Color theory
4. Making it work for UX design

15. 1: Art History
ART HISTORY | CULTURE & CONTEXT | COLOR THEORY | MAKING IT WORK FOR UX

18. Natural System of Colors, Moses Harris – 176

19. Pigments

22. Holy!
Also holy!
OK for commoners

23. 14th - 15th century

24. The Milkmaid
Vermeer (c. 1658)

25. Industrial Revolution

26. 1. Chemical pigments

27. William Perkin’s Mauve

28. Ooh! New
pigment!
Real artists use
tasteful muted colors
Average
Artwork
Saturation
All art since the 1500s

29. 2. Tube paints

31. Winsor & Newton, John Goffe Rand

32. One color at a time
Slow process
Prepared by artist
In studio
More colors at once
Fast, spontaneous
Available to buy
Portable

33. First WYSIWYG editor

34. The Hay Wain
John Constable
(1821)

35. Haystacks, Midday
Claude Monet
(1890)

36. The Night Café
Vincent Van Gogh
(1888)

37. Self portraits by
Vincent Van Gogh
(1880s)

38. 1914—1918

39. Things get weird & scary

40. Vassily Kandinsky
1936

41. Vassily Kandinsky
1936

42. Vassily Kandinsky
1936

43. Color as content

45. Mark Rothko
1950s

46. IKB: the International Klein Blue - first pigment as art, 1958

50. trendlist.org

51. Any color you want!

52. Andy Warhol
1960s

53. Andy Warhol
1960s

55. Unchangeable pigment
Color for realism
Impression (from nature)
Expression (from the inside)
Color as content
What color would you like?

56. 2: Culture & Context
ART HISTORY | CULTURE & CONTEXT | COLOR THEORY | MAKING IT WORK FOR UX

58. What’s wrong
with this fence?

62. “Wine-color” sea?

65. Dark Light

66. Which
one is the
blue?

67. 粉红, fěn hóng,
literally "powder red"
红
“red”

68. JeongMee Yoon

69. 1637
Anthony Van

71. “Money” or “The Prophet”?

75. Mary or URL or Krishna?

79. Communism or traditional bridal-wear?

83. A monk’s robe, or an alert message?

86. Politics +
Cultural context +
Language differences +
How important is color?
Check your assumptions

87. 3: Color Theory
ART HISTORY | CULTURE & CONTEXT | COLOR THEORY | MAKING IT WORK FOR UX

89. COMPLEMENTARY
Vibrant when used together

90. ANALOGOUS
Colors strengthen each other

91. ETC…
Colors in relation to each other

92. HUE
most common understanding of “color”*

93. SHADE
how much black?

94. TINT
How much white?

95. CHROMA
(Also “saturation”) - how close to gray?

96. GRAY EQUIVALENT
How light or dark does the hue appear?

97. GRAY EQUIVALENT
How light or dark does the hue appear?

98. Difficult to read -
only hue contrast
Difficult to read -
only hue contrast
Easier to read -
value contrast
Easier to read -
value contrast
Value contrast → Readability

99. Value contrast → Readability → Accessibility

102. Color Sphere
Albert Munsell – 1900

104. vs.
Munsell color systemPhotoshop color picker (HSB)

107. 4: Make it work for UX Design!
ART HISTORY | CULTURE & CONTEXT | COLOR THEORY | MAKING IT WORK FOR UX

108. Photo by Elliott Engelmann
Where do I start?
How do I explain decisions to a client?
How do I deal with differing opinions?
How do I know the colors will work well?
There’s too many options!

109. Is it pretty?

110. (Do I like it?)

111. Defend your
decisions
Color has a job to do

112. Show related Symbol
!
Psychology
Represent data AestheticBranding

113. Google “UX design color guide”
guidance may vary

115. A system

116. 1. Resolve the contrast
in grayscale sketches
2. Select the color
for audience and goal
3. Refine

117. 1. Resolve contrast

120. 2. Select the color

121. 2. Select the color
× (Users) × (Goals) =
}{

122. Brand color
Active, engaging
Not reserved

123. I want this
gold color
to “POP”
Complimentary

126. Branding

129. Refine → awesome

130. 1. Don’t forget proportion
2. Sketch in color
3. Use hue contrast sparingly
4. Not-black and not-white
5. Adjust one thing
6. Remove colors

131. 1. Don’t forget proportion!

135. https://www.google.com/design/spec/style/color.html

136. design-seeds.com
palettes via Pinterest

138. 2. Sketch with color

143. 3. Use hue contrast sparingly
Difficult to read -
only hue contrast
Difficult to read -
only hue contrast
Easier to read -
value contrast
Easier to read -
value contrast

144. ColorBrewer.org

146. 4. Not-black and not-white

148. 5. Adjust one thing at a time

149. vs.
Munsell color systemPhotoshop color picker (HSB)

151. 6. Remove color

152. 6. Remove color

155. 6a… or don’t remove color!

158. 1. Don’t forget proportion
2. Sketch in color
3. Use hue contrast sparingly
4. Not-black and not-white
5. Adjust one thing
6. Remove colors

159. Have a backup

161. trello.com

163. Steps to color success:
Grey
sketches
Key words:
tone, subject
Colors relate
to keywords
Combinations
and color theory
Proportion,
refinement

164. WHAT TO EXPECT
- Avoiding surprises earns you…

166. Photo credit: Flickr user mariachily

167. Thank you!
Maria Matveeva | @rgbcolor
#UXPA2016 | http://www.uxpa2016.org/sessionsurvey

168. Maria Matveeva
@rgbcolor @DockYard
Over to you…

169. Fun facts