256 shades of R, G and B

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.

212b8b6589f7e98dae14e6517101f427?s=128

Caio Gondim

May 10, 2015
Tweet

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
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. w h a t i s a COLOR

  14. light spectrum

  15. None
  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

  53. None
  54. Subtractive color wheel

  55. None
  56. RGB cube

  57. yellow red fuchsia blue aqua lime

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

    h
  59. monochromatic

  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. wilsonminer.com

  68. thenutone.com

  69. zample.me

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

  71. analogous

  72. None
  73. None
  74. None
  75. None
  76. None
  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

  85. None
  86. None
  87. None
  88. None
  89. None
  90. None
  91. Van Gogh, The Night Café, 1888

  92. Van Gogh, Irises, 1890

  93. Edvard Munch, The Scream, 1893

  94. triadic

  95. None
  96. None
  97. None
  98. None
  99. None
  100. Andy Warhol, Marilyn Diptych, 1962

  101. Willem de Kooning, Milkmaid, 1983

  102. tetradic

  103. None
  104. None
  105. None
  106. Van Gogh, Café Terrace at Night, 1888

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

  108. split complementary

  109. None
  110. None
  111. None
  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

  146. None
  147. None
  148. Be a neo-pointillist artist

  149. thank you @loopinfinito ~ @almirfilho @caio_gondim