Error
These filters allow you to dynamically edit colors. This allows you to make well designed pages or sections of pages with just a single base color. The color you provide can be in several different formats. These include:
Lightens the color by a provided percentage.
"Item": { ... "Attributes":{ BackgroundColor: '#ee7625', } }
{{ Item | Attribute:'BackgroundColor' | Lighten:'20%' }}
#f5b183
Darkens the color by a provided percentage.
{{ Item | Attribute:'BackgroundColor' | Darken:'20%' }}
#a0480c
Desaturates (mutes) the color by a provided percentage.
{{ Item | Attribute:'BackgroundColor' | Desaturate:'20%' }}
#d67a3c
Saturates (makes the color richer) the color by a provided percentage.
{{ Item | Attribute:'BackgroundColor' | Saturate:'20%' }}
#fe7214
Decreases the opacity level by the given percentage. This makes the color less transparent (opaque).
"Item": { ... "Attributes":{ BackgroundColor: 'rgba( 238, 118, 37, 0.8 )', } }
{{ Item | Attribute:'BackgroundColor' | FadeIn:'20%' }}
rgba( 238, 118, 37, 1 )
Increases the opacity level by the given percentage. This makes the color more transparent.
{{ Item | Attribute:'BackgroundColor' | FadeOut:'20%' }}
rgba( 238, 118, 37, 0.8 )
Adjusts the hue by the specified percentage (10%) or degrees (10deg).
{{ Item | Attribute:'BackgroundColor' | AdjustHue:'20%' }}
#74ed25
Tints (adds white) the specified color by the specified amount.
{{ Item | Attribute:'BackgroundColor' | Tint:'20%' }}
#f19151
Shades (adds black) the specified color by the specified amount.
{{ Item | Attribute:'BackgroundColor' | Shade:'20%' }}
#be5e1e
Mixes the specified color with the input color with the given amount.
{{ Item | Attribute:'BackgroundColor' | Mix:'#4286f4','20%' }}
#cc794e
Returns the color in greyscale.
{{ Item | Attribute:'BackgroundColor' | Grayscale }}
#898989