Color

A color stored as a color space plus its components, so wide-gamut values such as Display P3 and OKLCH keep their own space.

Value format

{
  "$type": "color",
  "$value": {
    "colorSpace": "srgb",
    "components": [0.231, 0.51, 0.965],
    "alpha": 1,
    "hex": "#3b82f6"
  }
}

Field	Required	Allowed
colorSpace	Yes	One of the 14 color spaces
components	Yes	Three numbers within the ranges of that space, or "none" for a missing channel
alpha	No	0 to 1. Missing means 1
hex	No	A 6-digit sRGB fallback. It never holds alpha

Any other key is refused, and so is a plain string such as "#3b82f6" as $value.

In Syntope Tokens

The field takes a hex value, a CSS color or a reference. Color spaces lists the accepted forms.

Select the swatch to open the picker. It edits in sRGB, HSL, OKLCH and P3, with an alpha slider. The eyedropper (Pick color from selection) reads the first fill of the first selected layer. That fill must be solid, and its opacity is not read.

When you edit a token, the field shows a hex preview whatever the stored space is. Leave the field unchanged and the stored space stays. Type a new value and the space comes from what you type.

You cannot wrap a reference in a color function such as rgba({brand}, 0.5), because DTCG has no color functions. Create a second color token with the alpha you need.

Applying to layers

Under Apply token:

Target	Effect
fill	Replaces all fills of the layer with one solid paint
stroke	Replaces all strokes of the layer with one solid paint
drop shadow color	Recolors the first drop shadow
inner shadow color	Recolors the first inner shadow
gradient stop color X	Sets the color of the first stop in the layer’s first gradient fill
gradient stop color Y	Sets the color of the second stop in the same fill

alpha becomes the opacity of the paint. A wide-gamut color is mapped into sRGB on the canvas. The stored token keeps its original value.

fill and stroke replace paints

A layer with three stacked fills ends up with one. Use Figma’s undo to restore them if that was not intended. Each Apply is one undo step.

If the layer has no gradient fill, a gradient stop target replaces the first fill with a two-stop linear gradient. Both stops start from the existing solid color, or black.

Figma variables

Maps to a COLOR variable, using the same sRGB conversion as the canvas. See Figma variables.

Limits

• Only the first two gradient stops can be set. Set further stops in Figma.
• The shadow color targets need an existing shadow. Add the drop or inner shadow in Figma first, or apply a shadow token.