color_desaturate¶

The color_desaturate filter is designed to decrease the saturation of a color. It adjusts the intensity or vividness of a color, making it appear more muted or closer to gray.

Functionality

Color Values: Takes a string representing a color in Hex, RGB, or HSL format.
Saturation Decrease: Requires a numerical argument specifying the percentage by which to decrease the saturation. This value should be between 0 and 100.
Color Adjustment: Modifies the saturation component of the color, maintaining the original hue and lightness.
Output: Returns a string representing the less saturated (more muted) color in the same format as the input (Hex, RGB, or HSL).

Syntax

    {{ input_color | color_desaturate: percentage }}

Arguments

percentage: The percentage (0 to 100) by which to decrease the saturation.

Code Samples

Example 1: Desaturating a Hex Color

    {{ "#FF0000" | color_desaturate: 50 }}

Output

    #800000  <!-- Less saturated red -->

Example 2: Desaturating an RGB Color

    {{ "rgb(0, 255, 0)" | color_desaturate: 25 }}

Output

   rgb(128, 191, 128)

Example 3: Desaturating an HSL Color

    {{ "hsl(120, 50%, 50%)" | color_desaturate: 20 }}

Output

  hsl(120, 30%, 50%)

Outliers and Special Cases¶

Invalid Input: If the input is not a valid color string (Hex, RGB, or HSL) or the percentage is out of the allowed range (0-100), the filter may return an error or an unexpected result.
Fully Desaturated Colors: If the input color is already fully desaturated (0%), the filter will have no effect.

Key Points¶

The color_desaturate filter is helpful for creating more subdued or subtle color variations within your templates.
It can be used for de-emphasizing elements, creating backgrounds, or establishing a calmer visual tone.
It can be used in combination with other color filters like color_saturate or color_modify for fine-grained control over color adjustments.