Successfully reported this slideshow.
Upcoming SlideShare
×

# 256 shades of R, G and B

294 views

Published on

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.

Published in: Software
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

• Be the first to like this

### 256 shades of R, G and B

1. 1. 256 SHADES of @loopinfinito R, G and B
2. 2. @almirfilho globo.com loop infinito zofe @caio_gondim booking.com loop infinito zofe
3. 3. zone of front-enders zofe.com.br @danielfilho @rafaelrinaldi @brunopassos
4. 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. 5. COLORS m o d a f o k i n g
6. 6. w h a t i s a COLOR
7. 7. light spectrum
8. 8. sun spectrum
9. 9. object color
10. 10. metal color
11. 11. retina rods and cones
12. 12. yellow
13. 13. iphone retina screen
14. 14. yellow
15. 15. this is a LIE
16. 16. everything is MATH
17. 17. 256? why
18. 18. 2 = 256 1 byte = 8bits 8
19. 19. 00 FF hexadecimal system to 0 255 decimal system to
20. 20. #BADA55 red green blue hex color
21. 21. #BADA55 16*16 256 * 256 * 256 16.777.216 colors 16*16 16*16
22. 22. #FF0000
23. 23. #00FF00
24. 24. #0000FF
25. 25. #FFFF00
26. 26. #000000
27. 27. #666666
28. 28. #CCCCCC
29. 29. #FFFFFF
30. 30. black or white?
31. 31. getContrast50 = (hexcolor) -> hex = parseInt hexcolor, 16 if hex > 0xffffff/2 then 'black' else 'white' 50% contrast
32. 32. 24ways.org/2010/calculating-color-contrast YIQ color space 50% contrast
33. 33. blend darken lighten saturate desaturate complement invert spin grayscale mix tint shade luminosity contrast transparentify stylus color functions
34. 34. p { color: #BADA55 + #C0FFEE; border-color: #770000 * #003300; } sass color operations p { color: white; border-color: black; } outputs
35. 35. c o l o r MODEL
36. 36. RGB
37. 37. CMY
38. 38. HSL/HSV
39. 39. c o l o r WHEEL
40. 40. n e w t o n
41. 41. Isaac Newton's color wheel, 1666
42. 42. Goethe color wheel
43. 43. Johannes Itten's color wheel
44. 44. Painter color wheel
45. 45. Subtractive color wheel
46. 46. RGB cube
47. 47. yellow red fuchsiablue aqua lime
48. 48. HARMONY c o l o r s w i t h
49. 49. monochromatic
50. 50. wilsonminer.com
51. 51. thenutone.com
52. 52. zample.me
53. 53. Picasso, Portrait of Angel Fernandez de Soto, 1903
54. 54. analogous
55. 55. whoorayrecords.com
56. 56. ecoki.com
57. 57. bigtop.it
58. 58. Rembrandt, Self Portrait with Two Circles, 1660
59. 59. Andy Warhol, Mao, 1973
60. 60. Picasso, Lá Vie, 1903
61. 61. Van Gogh, Wheatfield with Cypresses, 1889
62. 62. complementary
63. 63. Van Gogh, The Night Café, 1888
64. 64. Van Gogh, Irises, 1890
65. 65. Edvard Munch, The Scream, 1893
67. 67. Andy Warhol, Marilyn Diptych, 1962
68. 68. Willem de Kooning, Milkmaid, 1983
70. 70. Van Gogh, Café Terrace at Night, 1888
71. 71. Ellsworth kelly, Red Orange White Green Blue, 1968
72. 72. split complementary
73. 73. Mark Rhotko
74. 74. guideline != rule
75. 75. c o l o r FEELING
76. 76. love, drama, dynamism, power, passion, blood
77. 77. red logos
78. 78. energy, warning, enthusiasm, creativity, shock
79. 79. orange logos
80. 80. sunshine, caution, vibrancy, happiness, alert
81. 81. yellow logos
82. 82. nature, wealth, stability, environment, relaxation
83. 83. green logos
84. 84. calm, intelligence, honesty, depression, openness
85. 85. blue logos
86. 86. purity, truth, perfection, light, sacredness
87. 87. white logos
88. 88. mystery, death, elegance, formality
89. 89. black logos
90. 90. c o l o r ACCESSIBILITY
91. 91. contrast
92. 92. design for elderly users low quality monitors bad lightning
95. 95. W3C Content Accessibility Guidelines
96. 96. contrastrebellion.com
97. 97. contrast checker
98. 98. Luminosity Colour Contrast Ratio Analyser
99. 99. Colour Contrast Check
100. 100. color blindness
101. 101. affects ~8% of people
102. 102. protanopia normal deuteranopia tritanopia
103. 103. avoid colour-specific instructions http://24ways.org/2012/colour-accessibility/
104. 104. don’t rely on color coding http://24ways.org/2012/colour-accessibility/
105. 105. don’t rely on color coding http://24ways.org/2012/colour-accessibility/
106. 106. http://24ways.org/2012/colour-accessibility/ use a simulator
107. 107. Be a neo-pointillist artist
108. 108. thank you @loopinfinito ~ @almirfilho @caio_gondim