make color schemes a no brainer with sass
TRANSCRIPT
Make color schemes a no-brainer with Sass - Patrick Baselier
Color schemes and Sass
#FF8800
hsl(32, 100%, 50%)
rgb(255, 136, 0)
#206676
hsl(191, 57%, 29%)
rgb(32, 102, 118)
MonochromaticCOMPLEMENTARY
TriadTetrad
AnalogicAccented Analogic
CSS
Sass
CSS
Sass
CSS
Sass
Sass
CSS
Sass
CSS
Sass
CSS
#FF0000
#CC3333
#FF7575
#A80000
Hex
R G B
255, 0, 0 0, 255, 0 0, 0, 255
255, 255, 255
255, 255, 0
255, 127, 0
R
255, 0, 0
R
255, 0, 0
R
127, 0, 0
R
63, 0, 0
255, 127, 127
#FF0000
#CC3333
#FF7575
#A80000
Hex
255, 0, 0
204, 51, 51
255, 117, 117
168, 0, 0
RGB
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))
Color, tints and shades• Not so easy when base color is a combination of RGB
(e.g. rgb(0, 119, 255))• Meet hsl()
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%
0o
240o
120o
#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
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%))
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%)
$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
$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
Base color(e.g. hsl(0, 50%, 100%)
Complement color(e.g. hsl(180, 50%, 100%)
Complementary
$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
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
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%)
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
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%)
Demo
RGB RYB
Demo
github.com/bazzel/sass-color-schemes
Thank you