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