Color filters

Color filters change or extract properties from CSS color strings. These filters are commonly used with color theme settings.

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

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

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

Extracts a component from the color. Valid components are alpha, red, green, blue, hue, saturation and lightness.

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

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

Lightens the input color. Takes a value between 0 and 100 percent.

color_darken

Darkens the input color. Takes a value between 0 and 100 percent.

color_saturate

Saturates the input color. Takes a value between 0 and 100 percent.

color_desaturate

Desaturates the input color. Takes a value between 0 and 100 percent.

color_mix

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

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

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

Calculates the perceived brightness difference between two colors. With regards to accessibility, the W3C suggests that the brightness difference should be greater than 125.

Input

On this page