Upgrade to Pro — share decks privately, control downloads, hide ads and more …

256 Shades of R, G and B

256 Shades of R, G and B

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.

Loop Infinito

May 09, 2015
Tweet

More Decks by Loop Infinito

Other Decks in Design

Transcript

  1. 256 SHADES of
    @loopinfinito
    R, G and B

    View full-size slide

  2. @almirfilho
    globo.com
    loop infinito
    zofe
    @caio_gondim
    booking.com
    loop infinito
    zofe

    View full-size slide

  3. zone of front-enders
    zofe.com.br
    @danielfilho @rafaelrinaldi @brunopassos

    View full-size slide

  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.

    View full-size slide

  5. COLORS
    m o d a f o k i n g

    View full-size slide

  6. w h a t i s a
    COLOR

    View full-size slide

  7. light spectrum

    View full-size slide

  8. sun spectrum

    View full-size slide

  9. object color

    View full-size slide

  10. retina rods and cones

    View full-size slide

  11. iphone retina screen

    View full-size slide

  12. this is a
    LIE

    View full-size slide

  13. everything is
    MATH

    View full-size slide

  14. 2 = 256
    1 byte = 8bits
    8

    View full-size slide

  15. 00 FF
    hexadecimal system
    to
    0 255
    decimal system
    to

    View full-size slide

  16. #BADA55
    red green blue
    hex color

    View full-size slide

  17. #BADA55
    16*16
    256 * 256 * 256
    16.777.216
    colors
    16*16 16*16

    View full-size slide

  18. black or white?

    View full-size slide

  19. getContrast50 = (hexcolor) ->
    hex = parseInt hexcolor, 16
    if hex > 0xffffff/2 then 'black'
    else 'white'
    50% contrast

    View full-size slide

  20. 24ways.org/2010/calculating-color-contrast
    YIQ color space
    50% contrast

    View full-size slide

  21. blend
    darken
    lighten
    saturate
    desaturate
    complement
    invert
    spin
    grayscale
    mix
    tint
    shade
    luminosity
    contrast
    transparentify
    stylus color functions

    View full-size slide

  22. p {
    color: #BADA55 + #C0FFEE;
    border-color: #770000 * #003300;
    }
    sass color operations
    p {
    color: white;
    border-color: black;
    }
    outputs

    View full-size slide

  23. c o l o r
    MODEL

    View full-size slide

  24. c o l o r
    WHEEL

    View full-size slide

  25. Isaac Newton's color wheel, 1666

    View full-size slide

  26. Goethe
    color
    wheel

    View full-size slide

  27. Johannes Itten's color wheel

    View full-size slide

  28. Painter color wheel

    View full-size slide

  29. Subtractive color wheel

    View full-size slide

  30. yellow
    red
    fuchsia
    blue
    aqua
    lime

    View full-size slide

  31. HARMONY
    c o l o r s w i t h

    View full-size slide

  32. monochromatic

    View full-size slide

  33. wilsonminer.com

    View full-size slide

  34. thenutone.com

    View full-size slide

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

    View full-size slide

  36. whoorayrecords.com

    View full-size slide

  37. Rembrandt, Self Portrait with Two Circles, 1660

    View full-size slide

  38. Andy Warhol, Mao, 1973

    View full-size slide

  39. Picasso, Lá Vie, 1903

    View full-size slide

  40. Van Gogh, Wheatfield with Cypresses, 1889

    View full-size slide

  41. complementary

    View full-size slide

  42. Van Gogh, The Night Café, 1888

    View full-size slide

  43. Van Gogh, Irises, 1890

    View full-size slide

  44. Edvard Munch, The Scream, 1893

    View full-size slide

  45. Andy Warhol, Marilyn Diptych, 1962

    View full-size slide

  46. Willem de Kooning, Milkmaid, 1983

    View full-size slide

  47. Van Gogh, Café Terrace at Night, 1888

    View full-size slide

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

    View full-size slide

  49. split
    complementary

    View full-size slide

  50. guideline
    !=
    rule

    View full-size slide

  51. c o l o r
    FEELING

    View full-size slide

  52. love, drama, dynamism,
    power, passion, blood

    View full-size slide

  53. energy, warning,
    enthusiasm, creativity,
    shock

    View full-size slide

  54. orange logos

    View full-size slide

  55. sunshine, caution,
    vibrancy, happiness,
    alert

    View full-size slide

  56. yellow logos

    View full-size slide

  57. nature, wealth,
    stability, environment,
    relaxation

    View full-size slide

  58. calm, intelligence,
    honesty, depression,
    openness

    View full-size slide

  59. purity, truth,
    perfection, light,
    sacredness

    View full-size slide

  60. mystery, death,
    elegance, formality

    View full-size slide

  61. c o l o r
    ACCESSIBILITY

    View full-size slide

  62. design for
    elderly users
    low quality monitors
    bad lightning

    View full-size slide

  63. good
    bad
    http://www.w3.org/WAI/wcag-curric/sam26-0.htm

    View full-size slide

  64. http://www.laspositascollege.edu/accessibility/contrast-example.php
    good
    bad

    View full-size slide

  65. W3C Content Accessibility Guidelines

    View full-size slide

  66. contrastrebellion.com

    View full-size slide

  67. contrast
    checker

    View full-size slide

  68. Luminosity Colour Contrast Ratio Analyser

    View full-size slide

  69. Colour Contrast Check

    View full-size slide

  70. color
    blindness

    View full-size slide

  71. affects
    ~8%
    of people

    View full-size slide

  72. protanopia
    normal
    deuteranopia
    tritanopia

    View full-size slide

  73. avoid colour-specific instructions
    http://24ways.org/2012/colour-accessibility/

    View full-size slide

  74. don’t rely on color coding
    http://24ways.org/2012/colour-accessibility/

    View full-size slide

  75. don’t rely on color coding
    http://24ways.org/2012/colour-accessibility/

    View full-size slide

  76. http://24ways.org/2012/colour-accessibility/
    use a simulator

    View full-size slide

  77. Be a
    neo-pointillist
    artist

    View full-size slide

  78. thank you
    @loopinfinito
    ~
    @almirfilho
    @caio_gondim

    View full-size slide