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.

C61a787d4d03535b394d39443fbebc16?s=128

Loop Infinito

May 09, 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.