Session slides from Future Insights Live, Vegas 2015: https://futureinsightslive.com/las-vegas-2015/ Color is one of the first things we learn how to do in CSS — and yet many of us don't ever go further than typing hex numbers handed to us by a designer. But getting colors to appear on a screen is just the beginning. Discover the secrets behind hex color values, and how to use simple math to adjust color attributes like saturation and brightness. Find out why colors look different on different devices, and what you can do about it. Learn how to adjust colors with media queries to make sure your colors look their best on any screen size. Find out how user context may affect the appropriate colors for a website. And finally, learn how you can make this whole color thing a lot less complicated by using a CSS preprocessor like Sass to manage your color choices and create color variations automatically.

1. Image credit: Dave Gough www.flic.kr/p/oDGsY
Responsive Color
Clarissa Peterson ✦ @clarissa ✦ June 2015

6. Credit: flic.kr/p/7E3TZ6

7. Credit: Steve Snodgrass flic.kr/p/8twyMD

8. Credit: flic.kr/p/fczzhQ

9. http://commons.wikimedia.org/wiki/File:IBM_PC_5150.jpg

10. Credit: flic.kr/p/6AELnT

11. Credit: flic.kr/p/4Mioyn

12. Hue - Value - Saturation

13. Hue

14. Credit: MaxPower commons.wikimedia.org/wiki/File:HLSColorSpace.png

15. Value

17. Credit: Zoetnet flic.kr/p/8oKkbJ

18. Credit: Zoetnet flic.kr/p/8oKkbJ

19. Saturation

21. Credit: Pawsitive Candie N flic.kr/p/7Rb4Yp

25. Color Notation in CSS

27. Credit: Pengo commons.wikimedia.org/wiki/File:Pixel_geometry_01_Pengo.jpg

28. 256256 256

29. RGB Notation

30. 0-2550-255 0-255

31. color: rgb(200,0,100);

32. color: rgb(75%,0%,50%);

33. 00-FF00-FF 00-FF

34. color: #A9C862;

35. HSL Notation

36. color: hsl(120, 100%, 50%);

38. color: hsl(120, 100%, 50%);

39. color: hsl(120, 100%, 50%);

40. color: hsl(120, 100%, 50%);

41. color: hsl(120, 50%, 50%);

42. color: hsl(120, 50%, 20%);

43. color: hsl(120, 50%, 80%);

44. Opacity

45. RGBa Notation

46. color: rgba(150,0,25,1);
color: rgba(0%,50%,40%,0.5);

48. div { opacity: 0.2; }

49. HSLa Notation

50. color: hsla(120, 100%, 50%, .5);

51. Color Blindness

52. Normal Deuteranope
Protanope Tritanope

56. Credit: thecrazyfilmgirl https://flic.kr/p/5X3ixX

61. Perception of Color

62. https://flic.kr/p/ePQ8wy

63. https://flic.kr/p/6kaePP

64. What You Think You See

66. http://www.psy.ritsumei.ac.jp/~akitaoka/color12e.html

69. Screens

70. Credit: Rusty Clark flic.kr/p/dyy44R

74. Credit: Jeremy Keith flic.kr/p/o9thWy

75. Credit: flic.kr/p/gnmwty

76. Light

77. Credit: Quinn Dombrowski flic.kr/p/cqpNFU

78. Credit: Caroline flic.kr/p/bq1X3o

79. Credit: ClearFrost flic.kr/p/o9mSXd

80. @media (light-level: dim) {
/* change the colors */
}

81. Credit: Jeremy Keith flic.kr/p/o9thWy

82. https://flic.kr/p/iNtUwx

83. Screen Size

88. SASS

89. Color Variables

90. p { color: #278232; }
$green: #278232;
p { color: $green; }

91. $green
$green-light
$green-dark

92. $primary-background-color
$button-border

93. Lighten & Darken

94. lighten($purple, 20%)

95. .box1 { background-color: #b650d9; }
.box2 { background-color: #d9a4eb; }
$purple: #b650d9;
.box1 { background-color: $purple; }
.box2 { background-color:
lighten($purple, 20%); }

97. darken($purple, 40%)

99. $button-bg: #b650d9;
.button {
background-color: $button-bg;
border:3px solid darken($button, 20%);
box-shadow: 7px 6px 3px -2px
lighten($button, 20%);
}

105. Saturate & Desaturate

106. saturate($blue, 70%)

109. Grayscale

112. Inverse

115. sassme.arc90.com/

116. sassme.arc90.com/

117. sassme.arc90.com/

119. Credit:Tuncay flic.kr/p/njc9ph
Clarissa Peterson
clarissapeterson.com
@clarissa