Skip to content

color_modify

The color_modify filter allows you to dynamically adjust specific components (red, green, blue, alpha, hue, saturation, or lightness) of a color. It supports modification of colors represented in Hex, RGB, or HSL formats.

Functionality

  • Color Values: Takes a color value as input, expecting it to be in Hex, RGB, or HSL format.
  • Hex Input:
    • Supports both shorthand (#RGB) and longhand (#RRGGBB) Hex color codes.
  • RGB Input:
    • Supports both RGB (rgb(R, G, B)) and RGBA (rgba(R, G, B, A)) formats, where A is the alpha (transparency) value (0 to 1).
  • HSL Input:
    • Supports both HSL (hsl(H, S%, L%)) and HSLA (hsla(H, S%, L%, A)) formats.
  • Component Modification: Modifies the specified color component by the given value.
  • Output: Returns a string representing the modified color in the same format as the input.

Syntax

    {{ input_color | color_modify: component_name, new_value }}

Arguments

  • component_name: A string specifying the component to modify. Valid values are:
    • "red", "green", "blue" (for RGB): Accepts integer values between 0 and 255.
    • "alpha" (for RGB/HSL): Accepts decimal values between 0 and 1.
    • "hue" (for HSL): Accepts integer values between 0 and 360.
    • "saturation", "lightness" (for HSL): Accepts integer values between 0 and 100 (representing percentages).
  • new_value: The new value to assign to the specified color component.

Code Samples

Example 1: Modifying RGB Components

    {{ "rgb(200, 100, 50)" | color_modify: "blue", 200 }} <br>
    {{ "#FF8000" | color_modify: "red", 128 }} <br>
Output 
    rgb(200, 100, 200)
    #808000
Example 2: Adjusting Alpha (Transparency) 
    {{ "rgba(255, 0, 0, 0.5)" | color_modify: "alpha", 0.8 }}  <br>
    {{ "#FF000080" | color_modify: "alpha", 0.2 }}  <br>
Output 
    rgba(255, 0, 0, 0.8)
    #FF000033
Example 3: Modifying HSL Components

    {{ "hsl(120, 50%, 50%)" | color_modify: "lightness", 75 }}   <br>
    {{ "hsla(240, 60%, 30%, 0.5)" | color_modify: "hue", 180 }}  <br>
Output 
    hsl(120, 50%, 75%)
    hsla(180, 60%, 30%, 0.5)

Outliers and Special Cases

  • Invalid Input: If the input color string is invalid or the component name is unrecognized, the filter will return an empty value or an error.
  • Out-of-Range Values: If the new_value is outside the allowed range for the specified component, it might be clamped to the nearest valid value or an error might occur.

Key Points

  • The color_modify filter provides a flexible way to dynamically alter specific aspects of a color, such as making it darker, lighter, more saturated, or more transparent.
  • It is useful for creating visual effects, highlighting elements, or generating variations of a base color scheme.
  • Be sure to provide valid color input, component names, and new values within the allowed range to ensure correct behavior.