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

collection.createColorVariable(
  name: string,
  value: string | {{VARIABLE_REFERENCE}} | {{CUSTOM_VALUE}},
  options?: {
    mode?: {{VARIABLE_MODE}}
  }
): 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

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

Designer Ability