Create color variable

collection.createColorVariable(name, value)

Create a color variable with a name and value for the variable.

Once created, you can set color variables for: Text colors, Background colors, Border and text stroke colors, and Gradient color stops

Syntax

1
collection.createColorVariable(
2
  name: string,
3
  value: string | {{VARIABLE_REFERENCE}} | {{CUSTOM_VALUE}},
4
  options?: {
5
    mode?: {{VARIABLE_MODE}}
6
  }
7
): Promise<ColorVariable>

Parameters

• name : string - Name of the variable
• value: string | ColorVariable | CustomValue - Value of the variable. Value can be a string in one of four formats:
  • Color Name
  • Color RGB hex value
  • Color RGBA hex value
  • Custom value
• options: object - Optional parameters for the variable.
  • mode: VariableMode - The variable mode object. Get the variable mode by using the collection.getVariableModeByName() method.

Returns

Promise<ColorVariable>

A Promise that resolves to a ColorVariable object.

Example

1
// Get Collection
2
const collection = await webflow.getDefaultVariableCollection()
3
4
// Create Color Variable with a HEX Codre
5
const myColorVariable = await collection?.createColorVariable("primary", "#ffcc11")
6
console.log(myColorVariable)

Designer Ability