inspect
functions
brightness
@function brightness($color) { ... }
Description
Determine the brightnss of a color, adjusted for the visual brightnesses of different hues.
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$color | Any color value to be analysed | Color | —none |
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
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$color | The base color value, which will be returned with a subtle harmony color mixed in. | Color | —none |
$harmony | A harmony color to mix into your base color, or the name of a function like | Color or Function | 'complement' |
$median | The median amount of your harmony color to mix into your base color, given the same relative brightness. | Percentage | 16% |
$margin | The margin of weight-adjustment for mixing colors with different relative brihtness. A margin of | Percentage | 8% |
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
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$color | The initial color to be adjusted. | Color | —none |
$amount | The amount of black to mix in, from | Percentage | —none |
Returns
Color
—your new, darker color!
tint
@function tint($color, $amount) { ... }
Description
Mix a color with white.
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$color | The initial color to be adjusted. | Color | —none |
$amount | The amount of white to mix in, from | Percentage | —none |
Returns
Color
—your new, lighter color!