Ways to define a color
A color in Finqu’s Liquid interface is defined as one of the following types
| Type | Description |
|---|---|
| name | A color name, like blue or black. For color names values listed in here are supported. |
| HEX | A HEX code describing the color, like #000000 for black |
| RGB | A string formatted in CSS RGB definition, like rgb(0, 0, 0) |
| HSL | A string formatted in CSS HSL definition, like rgb(0, 0%, 0%) |
If the given color cannot be parsed, a null is returned from any of these filters listed in here. An alpha channel can be defined in rgba() format as well as in HEX format with trailing digits, i.e. #00000080 for rgba(0, 0, 0, 0.5).
Color component
Color filters use color components to manipulate colors. These components are defined as follows
Filter definition
| Component | Description |
|---|---|
| alpha | Color transparency, a value between 0-1 |
| red, green or blue | Component in RGB, a value between 0-255 |
| hue | Color hue, a value between 0-360 |
| saturation | Color saturation, a value between 0-100 |
| lightness | Color lightness, a value between 0-100 |
brightness_difference
Calculate the brightness difference between two colors.
Input
{{ 'black' | brightness_difference: 'white' }}
Output
255
color_contrast
Calculate the contrast ratio between two colors.
Input
{{ 'black' | color_contrast: 'white' }}
{{ 'white' | color_contrast: 'black' }}
Output
21
21
color_darken
Darkens the input color by given amount. Accepts a value between 0 and 100.
Input
{{ '#ef5fa0' | color_darken: 10 }}
Output
#ea3184
color_desaturate
Desaturates the input color by given amount. Accepts a value between 0 and 100.
Input
{{ '#ef5fa0' | color_desaturate: 10 }}
Output
#e668a1
color_difference
Calculate the difference between two colors.
Input
{{ 'black' | color_difference: 'white' }}
Output
765
color_extract
Get the perceived brightness of the given color. This is useful for example when ensuring a adequate contrast between background and the foreground.
Input
{{ '#ef5fa0' | color_brightness }}
Output
159.04482
color_lighten
Lighten the input color by given amount. Accepts a value between 0 and 100.
Input
{{ '#ef5fa0' | color_lighten: 10 }}
Output
#f48dbc
color_mix
Blends two colors together by the given amount. Accepts a value between 0 and 100.
Input
{{ '#ef5fa0' | color_mix: 'white', 10 }}
Output
#fdeff6
color_modify
Modify the given component of the color.
Input
{{ '#ef5fa0' | color_modify: 'alpha', 0.5 }}
Output
rgba(239, 95, 160, 0.5)
color_saturate
Saturates the input color by given amount. Accepts a value between 0 and 100.
Input
{{ '#ef5fa0' | color_saturate: 10 }}
Output
#f8569f
color_to_hex
Converts a color to it’s HEX value.
Input
{{ 'black' | color_to_hex }}
{{ 'rgb(0, 0, 0)' | color_to_hex }}
{{ 'rgba(0, 0, 0, 0.5)' | color_to_hex }}
Output
#000000
#000000
#00000080
color_to_hsl
Converts a color to it’s HSL value.
Input
{{ '#000000' | color_to_hsl }}
{{ 'black' | color_to_hsl }}
{{ 'rgb(0, 0, 0)' | color_to_hsl }}
Output
hsl(0, 0%, 0%)
hsl(0, 0%, 0%)
hsl(0, 0%, 0%)
color_to_rgb
Converts a color to it’s RGB value.
Input
{{ '#000000' | color_to_rgb }}
{{ 'black' | color_to_rgb }}
{{ 'hsl(0, 0%, 0%)' | color_to_rgb }}
Output
rgb(0, 0, 0)
rgb(0, 0, 0)
rgb(0, 0, 0)