$type: "color" primitive

Color Token

Color tokens represent a single color value. The $value must be a string containing any valid CSS color — hex, RGB, HSL, named colors, or the special value transparent. Color tokens are among the most common token types and form the foundation of a design system's visual language.

Value Format

A string containing any valid CSS color value

When to Use

Use color tokens for backgrounds, text, borders, icons, and any other visual element that has a color property. They enable consistent brand colors across platforms and make global theme changes trivial.

Valid Example

Valid JSON .json

{
  "brand": {
    "primary": {
      "$value": "#0066cc",
      "$type": "color",
      "$description": "Primary brand color"
    },
    "secondary": {
      "$value": "hsl(210, 100%, 40%)",
      "$type": "color"
    }
  }
}

Common Mistake

Invalid — will fail validation

{
  "brand-primary": {
    "$value": 0066cc,
    "$type": "color"
  }
}

Paste the example above into the validator to test it yourself.

Open Validator

Related Token Types