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. 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. Presented in 2015 & 2016 at Amazon's WebDevCon, ConFoo, Breaking Development, Mobile+Web Dev Conference, Code Fellows Seattle, CascadiaFest, CSS Summit, CSS Brigade Vancouver, CSS Day Amsterdam, Future Insights Live, WebVisions NYC, and Albany UX.

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. Credit: HomeSpot HQ https://flic.kr/p/ePQ8wy

63. Credit: Scott Feldstein https://flic.kr/p/6kaePP

64. Credit: JD Hancock https://flic.kr/p/7Hg1aa

65. What You Think You See

67. Screens

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

71. Credit: flic.kr/p/gnmwty

73. Light

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

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

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

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

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

79. Responsive Color

84. Credit: Clive Darra https://flic.kr/p/5HjxAN

85. <link rel=”stylesheet” media=”print”
href=”css/print.css”>

86. @media print {
/* print styles here */
}

87. SASS

88. Color Variables

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

90. $green
$green-light
$green-dark

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

92. Lighten & Darken

93. lighten($purple, 20%)

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

96. darken($purple, 40%)

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

104. Saturate & Desaturate

105. saturate($blue, 70%)

108. Grayscale

111. Inverse

114. sassme.arc90.com/

115. sassme.arc90.com/

116. sassme.arc90.com/

117. Blend

118. .blending {
background-image: url(goat.png);
background-color: purple;
background-blend-mode: multiply;
}

119. .blending {
background-image: url(goat.png);
background-color: purple;
background-blend-mode: multiply;
}

120. .blending {
background-image: url(goat.png);
background-color: purple;
background-blend-mode: multiply;
}

122. multiply

123. screen

124. overlay

125. darken

126. lighten

127. color-dodge

128. color-burn

129. hard-light

130. soft-light

131. difference

132. exclusion

133. hue

134. saturation

135. color

136. luminosity

137. luminosity

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