inspect

functions

brightness

@function brightness($color) { ... }

Description

Determine the brightnss of a color, adjusted for the visual brightnesses of different hues.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

Any color value to be analysed

Colornone

Returns

Number

The relative visual brightness of the color, from 0 (black) through 225959 (white).

manipulate

functions

harmonize

@function harmonize($color, $harmony: 'complement', $median: 16%, $margin: 8%) { ... }

Description

Mix a subtle harmony color into your base color, weighted by the relative brightness of the two colors.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

The base color value, which will be returned with a subtle harmony color mixed in.

Colornone
$harmony

A harmony color to mix into your base color, or the name of a function like complement or invert that can manipulate the base color and return another color value.

Color or Function'complement'
$median

The median amount of your harmony color to mix into your base color, given the same relative brightness.

Percentage16%
$margin

The margin of weight-adjustment for mixing colors with different relative brihtness. A margin of 8% with a median of 16% will return mixes weighted between 8% and 24% (16% ± 8%).

Percentage8%

Throws

  • $harmony #{$harmony} [#{type-of($harmony)}] is not a valid color for harmonizing.

shade

@function shade($color, $amount) { ... }

Description

Mix a color with black.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

The initial color to be adjusted.

Colornone
$amount

The amount of black to mix in, from 0%-100%.

Percentagenone

Returns

Color

your new, darker color!

tint

@function tint($color, $amount) { ... }

Description

Mix a color with white.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

The initial color to be adjusted.

Colornone
$amount

The amount of white to mix in, from 0%-100%.

Percentagenone

Returns

Color

your new, lighter color!