Filters
color filters
Last updated: · Published:
Convert colors between different formats (RGB, HEX, HSL, RGBA)
color_to_rgb
Converts a color value to RGB format. Accepts hex colors, color names, and other color formats.
Input
{{ "#ff0000" | color_to_rgb }}
{{ "red" | color_to_rgb }}
{{ "rgb(255, 0, 0)" | color_to_rgb }}
Output
rgb(255, 0, 0)
rgb(255, 0, 0)
rgb(255, 0, 0)
hex_to_rgba
Converts a hex color to RGBA format with customizable alpha transparency.
Input
{{ "#ff0000" | hex_to_rgba }}
{{ "#00ff00" | hex_to_rgba: 0.5 }}
{{ "#0000ff" | hex_to_rgba: 0.8 }}
Output
rgba(255, 0, 0, 1)
rgba(0, 255, 0, 0.5)
rgba(0, 0, 255, 0.8)
color_to_hex
Converts a color value to hexadecimal format. Works with RGB, color names, and other color formats.
Input
{{ "rgb(255, 0, 0)" | color_to_hex }}
{{ "red" | color_to_hex }}
{{ "hsl(0, 100%, 50%)" | color_to_hex }}
Output
#ff0000
#ff0000
#ff0000
color_to_hsl
Converts a color value to HSL (Hue, Saturation, Lightness) format. Works with RGB, hex colors, color names, and other color formats.
Input
{{ "#ff0000" | color_to_hsl }}
{{ "rgb(255, 0, 0)" | color_to_hsl }}
{{ "red" | color_to_hsl }}
{{ "rgba(255, 0, 0, 0.5)" | color_to_hsl }}
Output
hsl(0, 100%, 50%)
hsl(0, 100%, 50%)
hsl(0, 100%, 50%)
hsl(0, 100%, 50%)
The HSL format is useful for color manipulation and creating color variations, as it separates the hue (color), saturation (intensity), and lightness (brightness) components.