Responsive Color

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.

Aca8eb0a7adcd5bb914b01fc2f3c713d?s=128

Clarissa Peterson

July 16, 2015
Tweet

Transcript

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

    @clarissa ✦ June 2015
  2. None
  3. None
  4. None
  5. None
  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

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

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

  19. Saturation

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

  22. None
  23. None
  24. None
  25. Color Notation in CSS

  26. None
  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%);

  37. None
  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);

  47. None
  48. div { opacity: 0.2; }

  49. HSLa Notation

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

  51. Color Blindness

  52. Normal Deuteranope Protanope Tritanope

  53. None
  54. None
  55. None
  56. Credit: thecrazyfilmgirl https://flic.kr/p/5X3ixX

  57. None
  58. None
  59. None
  60. None
  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

  66. None
  67. Screens

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

  69. None
  70. None
  71. Credit: flic.kr/p/gnmwty

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

  80. None
  81. None
  82. None
  83. None
  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%); }
  95. None
  96. darken($purple, 40%)

  97. None
  98. $button: #b650d9; .button { background-color: $button; border:3px solid darken($button, 20%);

    box-shadow: 7px 6px 3px -2px lighten($button, 20%); }
  99. None
  100. None
  101. None
  102. None
  103. None
  104. Saturate & Desaturate

  105. saturate($blue, 70%)

  106. None
  107. None
  108. Grayscale

  109. None
  110. None
  111. Inverse

  112. None
  113. None
  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; }

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

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