color

A color from a color setting.

Tip

Use color filters to modify or extract properties of a color object.

Properties

alpha number: The alpha component of the color, which is a decimal number between 0.0 and 1.0.
blue number: The blue component of the color, which is a number between 0 and 255.
chroma number: The chroma component of the color, which is a decimal number between 0.0 and 0.5.
color_space string: The color space of the color. Returns 'srgb' or 'oklch'
green number: The green component of the color, which is a number between 0 and 255.
hue number: The hue component of the color, which is a number between 0 and 360.
lightness number: The lightness component of the color, which is a number between 0 and 100.
oklch string: The lightness, chroma, and hue values of the color, represented as a space-separated string.
oklcha string: The lightness, chroma, hue and alpha values of the color, represented as a space-separated string, with a slash before the alpha channel.
red number: The red component of the color, which is a number between 0 and 255.
rgb string: The red, green, and blue values of the color, represented as a space-separated string.
rgba string: The red, green, blue, and alpha values of the color, represented as a space-separated string, with a slash before the alpha channel.
saturation number: The saturation component of the color, which is a number between 0 and 100.

{

"alpha": 1,

"blue": 180,

"chroma": 0.16,

"color_space": "srgb",

"green": 79,

"hue": 227,

"lightness": 45,

"oklch": "47% 0.16 268",

"oklcha": "47% 0.16 268 / 1.0",

"red": 51,

"rgb": "51 79 180",

"rgba": "51 79 180 / 1.0",

"saturation": 56

}

{
  "alpha": 1,
  "blue": 180,
  "chroma": 0.16,
  "color_space": "srgb",
  "green": 79,
  "hue": 227,
  "lightness": 45,
  "oklch": "47% 0.16 268",
  "oklcha": "47% 0.16 268 / 1.0",
  "red": 51,
  "rgb": "51 79 180",
  "rgba": "51 79 180 / 1.0",
  "saturation": 56
}

Anchor to Referencing color settings directly

Referencing color settings directly

When a color setting is referenced directly, the hexidecimal color code is returned.

{{ settings.colors_accent_2 }}

{
  "settings": {
    "colors_accent_2": "#334fb4"
  }
}

Output

#334fb4

Was this section helpful?