Make color schemes a no brainer with sass
- 1. Make color schemes a no-brainer with Sass - Patrick Baselier
- 7. Color schemes and Sass
- 10. #FF8800 hsl(32, 100%, 50%) rgb(255, 136, 0) #206676 hsl(191, 57%, 29%) rgb(32, 102, 118)
- 14. CSS Sass
- 15. CSS Sass
- 16. CSS Sass
- 17. Sass CSS
- 18. Sass CSS
- 19. Sass CSS
- 21. R G B 255, 0, 0 0, 255, 0 0, 0, 255
- 22. 255, 255, 255
- 23. 255, 255, 0
- 24. 255, 127, 0
- 25. R 255, 0, 0
- 26. R 255, 0, 0 R 127, 0, 0 R 63, 0, 0
- 27. 255, 127, 127
- 28. #FF0000 #CC3333 #FF7575 #A80000 Hex 255, 0, 0 204, 51, 51 255, 117, 117 168, 0, 0 RGB
- 29. Color, tints and shades • Pick as base color (e.g. rgb(255, 0, 0)) • Decrease value of base color to create shades (e.g. rgb(127, 0, 0)) • Increase value of other colors equivalently to create tints (e.g. rgb(255, 127, 127))
- 30. Color, tints and shades • Not so easy when base color is a combination of RGB (e.g. rgb(0, 119, 255)) • Meet hsl()
- 31. HSL • Hue • 0o ≤ Hue ≤ 360o • Saturation • The colorfulness of a color relative to its own brightness • 0% ≤ Saturation ≤ 100% • Lightness • The light/darkness of a color from white to black • 0% ≤ Lightness ≤ 100%
- 32. 0o 240o 120o
- 33. #FF0000 #CC3333 #FF7575 #A80000 Hex 255, 0, 0 204, 51, 51 255, 117, 117 168, 0, 0 RGB 0, 100, 50 0, 60, 50 0, 100, 73 0, 100, 33 HSL
- 34. Color, tints and shades • Pick as base color (e.g. hsl(0, 100%, 50%)) • Change saturation to move to grey (e.g. hsl(0, 60%, 50%)) • Change lightness to lighten or darken the color (e.g. hsl(0, 100%, 73%) or hsl(0, 100%, 33%))
- 35. hsl(0, 100%, 50%) hsl(0, 60%, 50%) hsl(0, 100%, 73%) hsl(0, 100%, 33%) hsl(212, 100%, 50%) hsl(212, 60%, 50%) hsl(212, 100%, 73%) hsl(212, 100%, 33%)
- 36. $h: 0; $s: 100%; $l: 50%; $base-color: hsl($h, $s, $l); .base-color { background: $base-color; } .variant-1 { background: scale-color($base-color, $saturation: -40%); } .variant-2 { background: scale-color($base-color, $lightness: 23%); } .variant-3 { background: scale-color($base-color, $lightness: -17%); } Sass
- 37. $h: 212; $s: 100%; $l: 50%; $base-color: hsl($h, $s, $l); .base-color { background: $base-color; } .variant-1 { background: scale-color($base-color, $saturation: -40%); } .variant-2 { background: scale-color($base-color, $lightness: 23%); } .variant-3 { background: scale-color($base-color, $lightness: -17%); } Sass
- 38. Base color (e.g. hsl(0, 50%, 100%) Complement color (e.g. hsl(180, 50%, 100%) Complementary
- 39. $h: 0; $s: 100%; $l: 50%; $base-color: hsl($h, $s, $l); $compl-color: complement($base-color); .compl-0 { background: $compl-color; } .compl-1 { background: scale-color($compl-color, $saturation: -40%); } .compl-2 { ... } Sass
- 40. Base color (e.g. hsl(0, 50%, 100%) Secondary 2 (e.g. hsl(210, 50%, 100%) 180o-α α Secondary 1 (e.g. hsl(150, 50%, 100%) Triad
- 41. Base color (e.g. hsl(0, 50%, 100%) Secondary 1 (e.g. hsl(30, 50%, 100%) α Secondary 2 (e.g. hsl(210, 50%, 100%) Tetrad Complement color (e.g. hsl(180, 50%, 100%)
- 42. Base color (e.g. hsl(0, 50%, 100%) Secondary 1 (e.g. hsl(30, 50%, 100%) α Secondary 2 (e.g. hsl(330, 50%, 100%) Analogic
- 43. Base color (e.g. hsl(0, 50%, 100%) Secondary 1 (e.g. hsl(30, 50%, 100%) α Secondary 2 (e.g. hsl(330, 50%, 100%) Accented Analogic Complement color (e.g. hsl(180, 50%, 100%)
- 44. Demo
- 45. RGB RYB
- 46. Demo
- 49. Thank you