Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

256 Shades of R, G and B

246 views

Published on

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.

Published in: Design
  • Be the first to comment

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
  66. 66. triadic
  67. 67. Andy Warhol, Marilyn Diptych, 1962
  68. 68. Willem de Kooning, Milkmaid, 1983
  69. 69. tetradic
  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
  93. 93. goodbad http://www.w3.org/WAI/wcag-curric/sam26-0.htm
  94. 94. http://www.laspositascollege.edu/accessibility/contrast-example.php good bad
  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

×