Tint & Shade Utilities

@function tint()

Mix a color with white to get a lighter tint.

Parameters & Return

$color: (String | list)

The name of a color in your palette, with optional adjustments in the form of (<function-name>: <args>).

$percentage: (Percentage)

The percentage of white to mix in. Higher percentages will result in a lighter tint.

@return (Color)

A calculated css-ready color-value based on your global color palette.

Requires

@function color()

@function shade()

Mix a color with black to get a darker shade.

Parameters & Return

$color: (String | list)

The name of a color in your palette, with optional adjustments in the form of (<function-name>: <args>).

$percentage: (Percentage)

The percentage of black to mix in. Higher percentages will result in a darker shade.

@return (Color)

A calculated css-ready color-value based on your global color palette.

Requires

@function color()