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. 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.
  2. 6.
  3. 7.
  4. 8.
  5. 9.
  6. 10.
  7. 11.
  8. 12.
  9. 15.
  10. 20.
  11. 22.
  12. 25.
  13. 30.
  14. 31.
  15. 32.
  16. 33.
  17. 34.
  18. 35.
  19. 36.
  20. 37.
  21. 39.

    getContrast50 = (hexcolor) -> hex = parseInt hexcolor, 16 if

    hex > 0xffffff/2 then 'black' else 'white' 50% contrast
  22. 41.

    blend darken lighten saturate desaturate complement invert spin grayscale mix

    tint shade luminosity contrast transparentify stylus color functions
  23. 42.

    p { color: #BADA55 + #C0FFEE; border-color: #770000 * #003300;

    } sass color operations p { color: white; border-color: black; } outputs
  24. 44.

    RGB

  25. 45.

    CMY

  26. 46.
  27. 53.
  28. 55.
  29. 56.
  30. 60.
  31. 61.
  32. 62.
  33. 63.
  34. 64.
  35. 65.
  36. 66.
  37. 69.
  38. 71.
  39. 72.
  40. 73.
  41. 74.
  42. 75.
  43. 76.
  44. 78.
  45. 79.
  46. 85.
  47. 86.
  48. 87.
  49. 88.
  50. 89.
  51. 90.
  52. 94.
  53. 95.
  54. 96.
  55. 97.
  56. 98.
  57. 99.
  58. 102.
  59. 103.
  60. 104.
  61. 105.
  62. 109.
  63. 110.
  64. 111.
  65. 116.
  66. 124.
  67. 130.
  68. 146.
  69. 147.