The importance of the correct usage of colors, accessibility, contrast, color theory, and how to manipulate correctly these 256 shades of red, green and blue for a better user experience in the web.

1. 256 SHADES of
@loopinfinito
R, G and B

2. @almirfilho
globo.com
loop infinito
zofe
@caio_gondim
booking.com
loop infinito
zofe

3. zone of front-enders
zofe.com.br
@danielfilho @rafaelrinaldi @brunopassos

4. It is important to view
knowledge as sort of a
semantic tree - make sure you
understand the fundamental
principles, ie the trunk and
big branches, before you get
into the leaves/details or
there is nothing for them to
hang on to.

5. COLORS
m o d a f o k i n g

13. w h a t i s a
COLOR

14. light spectrum

16. sun spectrum

17. object color

18. metal color

19. retina rods and cones

20. yellow

21. iphone retina screen

22. yellow

23. this is a
LIE

24. everything is
MATH

25. 256?
why

26. 2 = 256
1 byte = 8bits
8

27. 00 FF
hexadecimal system
to
0 255
decimal system
to

28. #BADA55
red green blue
hex color

29. #BADA55
16*16
256 * 256 * 256
16.777.216
colors
16*16 16*16

30. #FF0000

31. #00FF00

32. #0000FF

33. #FFFF00

34. #000000

35. #666666

36. #CCCCCC

37. #FFFFFF

38. black or white?

39. getContrast50 = (hexcolor) ->
hex = parseInt hexcolor, 16
if hex > 0xffffff/2 then 'black'
else 'white'
50% contrast

40. 24ways.org/2010/calculating-color-contrast
YIQ color space
50% contrast

41. blend
darken
lighten
saturate
desaturate
complement
invert
spin
grayscale
mix
tint
shade
luminosity
contrast
transparentify
stylus color functions

42. p {
color: #BADA55 + #C0FFEE;
border-color: #770000 * #003300;
}
sass color operations
p {
color: white;
border-color: black;
}
outputs

43. c o l o r
MODEL

44. RGB

45. CMY

46. HSL/HSV

47. c o l o r
WHEEL

48. n e w t o n

49. Isaac Newton's color wheel, 1666

50. Goethe
color
wheel

51. Johannes Itten's color wheel

52. Painter color wheel

54. Subtractive color wheel

56. RGB cube

57. yellow
red
fuchsiablue
aqua
lime

58. HARMONY
c o l o r s w i t h

59. monochromatic

67. wilsonminer.com

68. thenutone.com

69. zample.me

70. Picasso, Portrait of Angel Fernandez de Soto, 1903

71. analogous

77. whoorayrecords.com

78. ecoki.com

79. bigtop.it

80. Rembrandt, Self Portrait with Two Circles, 1660

81. Andy Warhol, Mao, 1973

82. Picasso, Lá Vie, 1903

83. Van Gogh, Wheatfield with Cypresses, 1889

84. complementary

91. Van Gogh, The Night Café, 1888

92. Van Gogh, Irises, 1890

93. Edvard Munch, The Scream, 1893

94. triadic

100. Andy Warhol, Marilyn Diptych, 1962

101. Willem de Kooning, Milkmaid, 1983

102. tetradic

106. Van Gogh, Café Terrace at Night, 1888

107. Ellsworth kelly, Red Orange White Green Blue, 1968

108. split
complementary

112. Mark Rhotko

113. guideline
!=
rule

114. c o l o r
FEELING

115. love, drama, dynamism,
power, passion, blood

116. red logos

117. energy, warning,
enthusiasm, creativity,
shock

118. orange logos

119. sunshine, caution,
vibrancy, happiness,
alert

120. yellow logos

121. nature, wealth,
stability, environment,
relaxation

122. green logos

123. calm, intelligence,
honesty, depression,
openness

124. blue logos

125. purity, truth,
perfection, light,
sacredness

126. white logos

127. mystery, death,
elegance, formality

128. black logos

129. c o l o r
ACCESSIBILITY

130. contrast

131. design for
elderly users
low quality monitors
bad lightning

132. goodbad
http://www.w3.org/WAI/wcag-curric/sam26-0.htm

133. http://www.laspositascollege.edu/accessibility/contrast-example.php
good
bad

134. W3C Content Accessibility Guidelines

135. contrastrebellion.com

136. contrast
checker

137. Luminosity Colour Contrast Ratio Analyser

138. Colour Contrast Check

139. color
blindness

140. affects
~8%
of people

141. protanopia
normal
deuteranopia
tritanopia

142. avoid colour-specific instructions
http://24ways.org/2012/colour-accessibility/

143. don’t rely on color coding
http://24ways.org/2012/colour-accessibility/

144. don’t rely on color coding
http://24ways.org/2012/colour-accessibility/

145. http://24ways.org/2012/colour-accessibility/
use a simulator

148. Be a
neo-pointillist
artist

149. thank you
@loopinfinito
~
@almirfilho
@caio_gondim