256 shades of r, g and b
TRANSCRIPT
256 SHADES of
@loopinfinito
R, G and B
@almirfilho
globo.comloop infinito
zofe
@caio_gondim
booking.comloop infinito
zofe
zone of front-enderszofe.com.br
@danielfilho @rafaelrinaldi @brunopassos
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.
COLORSmoda f o k i n g
w h a t i s a
COLOR
light spectrum
sun spectrum
object color
metal color
retina rods and cones
yello
w
iphone retina screen
yellow
this is a
LIE
everything is
MATH
256?why
2 = 2561 byte = 8bits
8
00 FFhexadecimal system
to
0 255decimal system
to
#BADA55red green blue
hex color
#BADA5516*16
256 * 256 * 256
16.777.216 colors
16*16 16*16
#FF0000
#00FF00
#0000FF
#FFFF00
#000000
#666666
#CCCCCC
#FFFFFF
black or white?
getContrast50 = (hexcolor) -> hex = parseInt hexcolor, 16 if hex > 0xffffff/2 then 'black' else 'white'
50% contrast
24ways.org/2010/calculating-color-contrast
YIQ color space
50% contrast
blend darken lighten saturate desaturate complement invert spin
grayscale mix tint shade luminosity contrast transparentify
stylus color functions
p { color: #BADA55 + #C0FFEE; border-color: #770000 * #003300; }
sass color operations
p { color: white; border-color: black; }
outputs
c o l o r
MODEL
RGB
CMY
HSL/HSV
c o l o r
WHEEL
n e w t o n
Isaac Newton's color wheel, 1666
Goethe color wheel
Johannes Itten's color wheel
Painter color wheel
Subtractive color wheel
RGB cube
yellow
red
fuchsiablue
aqua
lime
HARMONYco l o r s w i t h
monochromatic
Picasso, Portrait of Angel Fernandez de Soto, 1903
analogous
Rembrandt, Self Portrait with Two Circles, 1660
Andy Warhol, Mao, 1973
Picasso, Lá Vie, 1903
Van Gogh, Wheatfield with Cypresses, 1889
complementary
Van Gogh, The Night Café, 1888
Van Gogh, Irises, 1890
Edvard Munch, The Scream, 1893
triadic
Andy Warhol, Marilyn Diptych, 1962
Willem de Kooning, Milkmaid, 1983
tetradic
Van Gogh, Café Terrace at Night, 1888
Ellsworth kelly, Red Orange White Green Blue, 1968
split complementary
Mark Rhotko
guideline != rule
c o l o r
FEELING
love, drama, dynamism, power, passion, blood
red logos
energy, warning, enthusiasm, creativity,
shock
orange logos
sunshine, caution, vibrancy, happiness,
alert
yellow logos
nature, wealth, stability, environment,
relaxation
green logos
calm, intelligence, honesty, depression,
openness
blue logos
purity, truth, perfection, light,
sacredness
white logos
mystery, death, elegance, formality
black logos
c o l o rACCESSIBILITY
contrast
design for
elderly users low quality monitors
bad lightning
goodbad
http://www.w3.org/WAI/wcag-curric/sam26-0.htm
http://www.laspositascollege.edu/accessibility/contrast-example.php
good
bad
W3C Content Accessibility Guidelines
contrast checker
Luminosity Colour Contrast Ratio Analyser
Colour Contrast Check
color blindness
affects ~8%
of people
protanopia
normal
deuteranopia
tritanopia
avoid colour-specific instructions
http://24ways.org/2012/colour-accessibility/
don’t rely on color coding
http://24ways.org/2012/colour-accessibility/
don’t rely on color coding
http://24ways.org/2012/colour-accessibility/
http://24ways.org/2012/colour-accessibility/
use a simulator
Be a neo-pointillist
artist
thank you@loopinfinito
~ @almirfilho @caio_gondim