color_saturate¶

The color_saturate filter is designed to increase the saturation of a color. It adjusts the intensity or vividness of a color, making it appear more vibrant.

Functionality

Color Values: Takes a string representing a color in Hex, RGB, or HSL format.
Saturation Increase: Requires a numerical argument specifying the percentage by which to increase 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 more saturated color in the same format as the input (Hex, RGB, or HSL).

Syntax

    {{ input_color | color_saturate: percentage }}

Arguments

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

Code Samples

Example 1: Saturating a Hex Color

    {{ "#808080" | color_saturate: 50 }}

Output

    #bf4040 <!-- More saturated gray -->

Example 2: Saturating an RGB Color

    {{ "rgb(128, 128, 128)" | color_saturate: 25 }}

Output

   rgb(170, 102, 102)

Example 3: Saturating an HSL Color

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

Output

   hsl(120, 70%, 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 Saturated Colors: If the input color is already fully saturated (100%), the filter will have no effect.

Key Points¶

The color_saturate filter is useful for creating more vibrant or eye-catching color variations within your templates.
It can be used in conjunction with other color filters like color_desaturate or color_modify to fine-tune the appearance of colors.
Be aware that over-saturating colors can make them difficult to read or visually jarring.