256 shades of R, G and B

The importance of the correct use of colors, accessibility, contrast, color theory, and how to handle correctly these 256 levels of red, green and blue for a better user experience on the web.

Transcript

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 fuchsia blue 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. good bad 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