The document discusses a variety of color notations and techniques utilized in web design, including RGB, HSL, and their variations with opacity. It mentions responsive design practices involving color adjustments based on light levels and the use of preprocessors like Sass for color management. Additionally, the document references color perception issues such as color blindness and includes numerous image credits sourced from various online platforms.

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