Color filters
Color filters change or extract properties from CSS color strings. These filters are commonly used with color theme settings.
color_to_rgb
Anchor link to section titled "color_to_rgb"Converts a CSS color string to CSS rgb() format.
If the input color has an alpha component, then the output will be in CSS rgba() format.
color_to_hsl
Anchor link to section titled "color_to_hsl"Converts a CSS color string to CSS hsl() format.
If the input color has an alpha component, then the output will be in CSS hsla() format.
color_to_hex
Anchor link to section titled "color_to_hex"Converts a CSS color string to hex6 format.
Hex output is always in hex6 format. If there is an alpha channel in the input color, it will not appear in the output.
color_extract
Anchor link to section titled "color_extract"Extracts a component from the color. Valid components are alpha, red, green, blue, hue, saturation and lightness.
color_brightness
Anchor link to section titled "color_brightness"Calculates the perceived brightness of the given color. Uses W3C recommendations for calculating perceived brightness, for the purpose of ensuring adequate contrast.
color_modify
Anchor link to section titled "color_modify"Modifies the given component of a color.
- Red, green and blue values should be a number between 0 and 255
- Alpha should be a decimal number between 0 and 1
- Hue should be between 0 and 360 degrees
- Saturation and lightness should be a value between 0 and 100 percent.
The filter will return a color type that includes the modified format — for example, if you modify the alpha channel, the filter will return the color in rgba() format, even if your input color was in hex format.
color_lighten
Anchor link to section titled "color_lighten"Lightens the input color. Takes a value between 0 and 100 percent.
color_darken
Anchor link to section titled "color_darken"Darkens the input color. Takes a value between 0 and 100 percent.
color_saturate
Anchor link to section titled "color_saturate"Saturates the input color. Takes a value between 0 and 100 percent.
color_desaturate
Anchor link to section titled "color_desaturate"Desaturates the input color. Takes a value between 0 and 100 percent.
Blends together two colors. Blend factor should be a value between 0 and 100 percent.
If one input has an alpha component, but the other does not, an alpha component of 1 will be assumed for the input without an alpha component.
color_contrast
Anchor link to section titled "color_contrast"Calculates the contrast ratio between two colors. Returns the numerator part of the ratio, which has a denominator of 1. For example, for a contrast ratio of 3.5:1, the filter returns 3.5.
With regards to accessibility, WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
The order in which you specify the colors does not matter. The filter will automatically detect the lighter and darker colors.
color_difference
Anchor link to section titled "color_difference"Calculates the color difference or distance between two colors. With regards to accessibility, the W3C suggests that the color difference should be greater than 500.
brightness_difference
Anchor link to section titled "brightness_difference"Calculates the perceived brightness difference between two colors. With regards to accessibility, the W3C suggests that the brightness difference should be greater than 125.