color_lighten¶

The color_lighten filter is designed to increase the lightness of a color. It adjusts the perceived brightness of a color, making it appear paler or closer to white.

Functionality

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

Syntax

    {{ input_color | color_lighten: percentage }}

Arguments

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

Code Samples

Example 1: Lightening a Hex Color

    {{ "#336699" | color_lighten: 20 }}

Output

    #5588bb <!-- Lighter blue -->

Example 2: Lightening an RGB Color

    {{ "rgb(51, 102, 153)" | color_lighten: 10 }}

Output

   rgb(81, 132, 183)

Example 3: Lightening an HSL Color

    {{ "hsl(210, 50%, 40%)" | color_lighten: 30 }}

Output

   hsl(210, 50%, 70%)

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 Lightened Colors: If the input color is already fully lightened (100% lightness), the filter will have no effect.

Key Points¶

The color_lighten filter is useful for creating variations of a base color that are more pastel or subdued.
It can be used in conjunction with other color filters like color_darken or color_modify for fine-grained control over color adjustments.
Be aware that over-lightening colors can reduce contrast and make them less visually impactful.