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
Tweet

More Decks by Almir Filho

Other Decks in Design

Transcript

  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