Gradient

A composite type combining color and number(normalized to 1) to form the stops of a CSS gradient, as defined in 9.6.

JSON

{
  "rainbow": {
    "$type": "gradient",
    "$value": [
      { "color": "red", "position": 0 },
      { "color": "orange", "position": 0.175 },
      { "color": "yellow", "position": 0.325 },
      { "color": "lawngreen", "position": 0.5 },
      { "color": "blue", "position": 0.675 },
      { "color": "indigo", "position": 0.825 },
      { "color": "violet", "position": 1 }
    ]
  }
}

YAML

rainbow:
  $type: gradient
  $value:
    - color: red
      position: 0
    - color: orange
      position: 0.175
    - color: yellow
      position: 0.325
    - color: lawngreen
      position: 0.5
    - color: blue
      position: 0.675
    - color: indigo
      position: 0.825
    - color: violet
      position: 1

Property	Type	Description
$type	string	Required. "gradient"
$value	object	Required. Specify an array of objects with color and position properties.
$description	string	(Optional) A description of this token and its intended usage.

Notes

• This token is currently missing information on whether this is a linear, radial, or conic gradient. In most Cobalt plugins, linear gradient is assumed.

Tips & recommendations

• Culori is the preferred library for working with color. It’s great both as an accurate, complete color science library that can parse & generate any format. But is also easy-to-use for simple color operations and is fast and lightweight (even on the client).
• Prefer the OKLCH format for declaring colors (why?). It’s not only a futureproof standard; it also allows for better color manipulation than sRGB/hex and is more perceptually-even.