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.

Almir Filho

May 09, 2015

More Decks by Almir Filho

Other Decks in Design


  1. 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. getContrast50 = (hexcolor) -> hex = parseInt hexcolor, 16 if

    hex > 0xffffff/2 then 'black' else 'white' 50% contrast
  3. blend darken lighten saturate desaturate complement invert spin grayscale mix

    tint shade luminosity contrast transparentify stylus color functions
  4. p { color: #BADA55 + #C0FFEE; border-color: #770000 * #003300;

    } sass color operations p { color: white; border-color: black; } outputs
  5. RGB

  6. CMY