Make color schemes a no brainer with sass

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