Responsive Color

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 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.

Transcript

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. 256 256 256
29. RGB Notation
30. 0-255 0-255 0-255
31. color: rgb(200,0,100);
32. color: rgb(75%,0%,50%);
33. 00-FF 00-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