Generating Palettes

Once the initial hue, saturation, lightness, contrast, and theme are in place – we can generate dynamic palettes based on those values.

While themes can be set universally, palettes need to be recalculated based on mode. By default, we apply both to the [data-ccs-colors] attribute.

$steps (integer)

scss

$steps: 4 !default;

The number of tints and shades to create on either side of the base colors.

Used By

@mixin colors()

@mixin gradient()

$fades (boolean | number)

scss

$fades: false !default;

Optionally generate desaturated seconday *-fade palettes for each base palette. Number values will be used as the hsla() alpha value, adding transparency to the faded palette.

Used By

@mixin colors()

@mixin gradient()

$gradients (boolean)

scss

$gradients: false !default;

Generate a striped gradient for each color palette – prime, accent, and *-fade if required. These are useful for showing the colors generated.

Used By

@mixin colors()

@mixin gradient()

@mixin colors()

Generate custom-property color palettes with a given number of tint/shade variations – dynamically based on the inherited hue, saturation, lightness, mode (light/dark), and accent theme.

Parameters & Output

$colors: map-keys($hues) (list | string)

The color names to generate

$steps: $steps or 4 (integer)

The number (each) of tints and shades to generate

$fades: $fades (boolean | number)

Optionally generate desaturated seconday *-fade palettes for each base palette. Number values will be used as the hsla() alpha value, adding transparency to the faded palette.

$gradients: $gradients (boolean)

Generate a striped gradient for each color palette – prime, accent, and *-fade if required. These are useful for showing the colors generated.

{CSS output} (code block)

CSS custom properties to generate each color in the requested palettes, based on the starting hue, saturation, lightness, and accent theme.

Requires

@mixin gradient()

$steps (integer)

$fades (boolean | number)

$gradients (boolean)

@mixin gradient()

Generate striped CSS gradients for each palette. These are useful for visualizing the available generated colors.

Parameters

$colors: map-keys($hues) (list | string)

The color names to generate

$steps: $steps or 4 (integer)

The number (each) of tints and shades to generate

$fades: $fades (boolean | number)

Optionally generate desaturated seconday *-fade palettes for each base palette. Number values will be used as the hsla() alpha value, adding transparency to the faded palette.