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
@loopinfinito
R, G and B
@almirfilho
globo.com
loop infinito
zofe
@caio_gondim
booking.com
loop infinito
zofe
zone of front-enders
zofe.com.br
@danielfilho @rafaelrinaldi @brunopassos
It is important to view
knowledge as sort of a
semantic tree - make sure you
understand the fundamental
principles, ie the...
COLORS
m o d a f o k i n g
w h a t i s a
COLOR
light spectrum
sun spectrum
object color
metal color
retina rods and cones
yellow
iphone retina screen
yellow
this is a
LIE
everything is
MATH
256?
why
2 = 256
1 byte = 8bits
8
00 FF
hexadecimal system
to
0 255
decimal system
to
#BADA55
red green blue
hex color
#BADA55
16*16
256 * 256 * 256
16.777.216
colors
16*16 16*16
#FF0000
#00FF00
#0000FF
#FFFF00
#000000
#666666
#CCCCCC
#FFFFFF
black or white?
getContrast50 = (hexcolor) ->
hex = parseInt hexcolor, 16
if hex > 0xffffff/2 then 'black'
else 'white'
50% contrast
24ways.org/2010/calculating-color-contrast
YIQ color space
50% contrast
blend
darken
lighten
saturate
desaturate
complement
invert
spin
grayscale
mix
tint
shade
luminosity
contrast
transparentif...
p {
color: #BADA55 + #C0FFEE;
border-color: #770000 * #003300;
}
sass color operations
p {
color: white;
border-color: bla...
c o l o r
MODEL
RGB
CMY
HSL/HSV
c o l o r
WHEEL
n e w t o n
Isaac Newton's color wheel, 1666
Goethe
color
wheel
Johannes Itten's color wheel
Painter color wheel
Subtractive color wheel
RGB cube
yellow
red
fuchsiablue
aqua
lime
HARMONY
c o l o r s w i t h
monochromatic
wilsonminer.com
thenutone.com
zample.me
Picasso, Portrait of Angel Fernandez de Soto, 1903
analogous
whoorayrecords.com
ecoki.com
bigtop.it
Rembrandt, Self Portrait with Two Circles, 1660
Andy Warhol, Mao, 1973
Picasso, Lá Vie, 1903
Van Gogh, Wheatfield with Cypresses, 1889
complementary
Van Gogh, The Night Café, 1888
Van Gogh, Irises, 1890
Edvard Munch, The Scream, 1893
triadic
Andy Warhol, Marilyn Diptych, 1962
Willem de Kooning, Milkmaid, 1983
tetradic
Van Gogh, Café Terrace at Night, 1888
Ellsworth kelly, Red Orange White Green Blue, 1968
split
complementary
Mark Rhotko
guideline
!=
rule
c o l o r
FEELING
love, drama, dynamism,
power, passion, blood
red logos
energy, warning,
enthusiasm, creativity,
shock
orange logos
sunshine, caution,
vibrancy, happiness,
alert
yellow logos
nature, wealth,
stability, environment,
relaxation
green logos
calm, intelligence,
honesty, depression,
openness
blue logos
purity, truth,
perfection, light,
sacredness
white logos
mystery, death,
elegance, formality
black logos
c o l o r
ACCESSIBILITY
contrast
design for
elderly users
low quality monitors
bad lightning
goodbad
http://www.w3.org/WAI/wcag-curric/sam26-0.htm
http://www.laspositascollege.edu/accessibility/contrast-example.php
good
bad
W3C Content Accessibility Guidelines
contrastrebellion.com
contrast
checker
Luminosity Colour Contrast Ratio Analyser
Colour Contrast Check
color
blindness
affects
~8%
of people
protanopia
normal
deuteranopia
tritanopia
avoid colour-specific instructions
http://24ways.org/2012/colour-accessibility/
don’t rely on color coding
http://24ways.org/2012/colour-accessibility/
don’t rely on color coding
http://24ways.org/2012/colour-accessibility/
http://24ways.org/2012/colour-accessibility/
use a simulator
Be a
neo-pointillist
artist
thank you
@loopinfinito
~
@almirfilho
@caio_gondim
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
 256 shades of R, G and B
Upcoming SlideShare
Loading in …5
×

256 shades of R, G and B

279 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
  • 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
  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

×