Skip to content

color_to_rgb

The color_to_rgb filter is designed to convert color values from Hexadecimal (Hex) or HSL (Hue, Saturation, Lightness) format to RGB (Red, Green, Blue) format within your Liquid pages. RGB is a widely used color model for digital displays, and this filter facilitates working with colors in a consistent format.

Functionality

  • Color Values: Takes a color value as input, expecting it to be in either Hex or HSL format.
  • Hex Input:
    • Supports both shorthand (#RGB) and longhand (#RRGGBB) Hex color codes. For instance, #f00 (shorthand) and #ff0000 (longhand) both represent red.
  • HSL Input:
    • Supports both HSL (hsl(H, S%, L%)) and HSLA (hsla(H, S%, L%, A)) formats.
      • H (Hue): Angle on the color wheel (0-360 degrees)
      • S (Saturation): Intensity of color (0-100%)
      • L (Lightness): Brightness (0-100%)
      • A (Alpha): Opacity (0-1, where 0 is transparent and 1 is opaque)
  • Conversion: Converts the input color to its equivalent RGB representation.
  • Output: Returns a string representing the color in RGB format.
    • For opaque colors (no transparency), the format is rgb(R, G, B), where R, G, and B are integers (0-255) representing red, green, and blue intensities, respectively.
    • For colors with transparency, the format is rgba(R, G, B, A), where A is the alpha value (0 to 1).

Syntax

    {{ input_color | color_to_rgb }}

Arguments

The color_to_rgb filter does not require any arguments.

Code Samples

Example 1: Converting from Hex to RGB

    {{ "#FF0000" | color_to_rgb }}  <br>
    {{ "#F00" | color_to_rgb }}     <br>
    {{ "#0f08" | color_to_rgb }}    <br>
Output 
    rgb(255, 0, 0)
    rgb(255, 0, 0)
    rgba(0, 255, 0, 0.5)

Example 2: Converting from HSL to RGB

    {{ "hsl(120, 50%, 25%)" | color_to_rgb }}  <br>
    {{ "hsla(240, 100%, 50%, 0.5)" | color_to_rgb }}  <br>
Output 
    rgb(64, 128, 64)
    rgba(0, 0, 255, 0.5)

Outliers and Special Cases

  • Invalid Input: If the input string is not a valid Hex or HSL color, the filter will return nil.
  • Non-String Input: If the input is not a string, the filter will return an empty string.
  • Alpha Values: The filter preserves alpha (transparency) values when converting from HSLA to RGBA.

Key Points

  • The color_to_rgb filter is useful for standardizing color representation, making it easier to manipulate colors in JavaScript, CSS, or other contexts that primarily use RGB.
  • It allows for seamless color conversion within Liquid pages.
  • Ensure that the input string is a valid Hex or HSL color to avoid unexpected results.