Color

Colour tokens are stored in the DTCG colour object form — a colour space plus raw components — not as a hex string. That is what makes wide-gamut colours (P3, OKLCH) survive the round trip.

---

Value format

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

Field	Meaning
colorSpace	One of the 14 supported spaces
components	The channel values in that space. A channel may be the string "none"
alpha	0–1. Stored separately, never baked into hex
hex	A 6-digit sRGB fallback, always present

---

What you can type

The value field accepts any CSS colour string the parser understands, as long as it resolves to one of the supported colour spaces:

#3b82f6           #3b82f6ff        #38f
rgb(59 130 246)   rgba(59, 130, 246, 0.5)
hsl(217 91% 60%)  hwb(217 23% 4%)
oklch(0.65 0.19 255)
lab(...)  lch(...)  oklab(...)
color(display-p3 0.2 0.5 0.9)
rebeccapurple

You can also enter a reference: {global.color.primary.500}.

If the string parses to a space DAES does not support, the value is rejected rather than silently converted, with the message “Enter hex, rgb(), hsl(), or a token reference.”

---

The colour picker

The picker lets you edit in four spaces:

Space	Emitted as	Channel range
sRGB	rgb(r g b / a)	0–255
HSL	hsl(...)	CSS ranges
OKLCH	oklch(...)	CSS ranges
Display P3	color(display-p3 …)	0–1

Pasting a value in one of these four switches the picker to that mode automatically. The other ten supported spaces can be stored and exported, but not edited with the sliders — type them into the field instead.

There is also an eyedropper that reads the first solid fill of the first selected layer.

---

How it is displayed

The token tile shows a swatch plus a hex string: 6 digits when alpha is 1, 8 digits when alpha is below 1.

---

Applying to Figma

Default target: Fill.

Target	Behaviour
Fill	Replaces the layer’s entire fill list with one solid paint
Stroke	Replaces the layer’s entire stroke list with one solid paint
Drop shadow colour	Recolours the first drop shadow effect. Errors with “add a Drop Shadow effect first” if the layer has none
Inner shadow colour	Same, for the first inner shadow
Gradient stop colour X / Y	Writes stop 0 or stop 1 of the first gradient fill. If the layer has no gradient, a two-stop linear gradient is created from the existing solid fill (or black)

alpha becomes the paint’s opacity in Figma, clamped to 0–1.

Fill and stroke are replacing, not additive

Applying a colour to a layer with three stacked fills leaves one fill. This is deliberate — a token describes the colour, not a layer composition — but it is destructive if you were layering paints.

Wide-gamut colours

Figma paints are sRGB. A P3, Rec2020, or out-of-sRGB OKLCH colour is gamut-mapped into sRGB on apply — perceptually nudged into range rather than channel-clipped. The stored token keeps the original wide-gamut value, so export is unaffected; only what you see on the Figma canvas is mapped.

---

Notes and limits

• Only two gradient stops are addressable. A gradient with more stops can be recoloured at index 0 and 1 only.
• The gradient targets silently do nothing on a layer that does not support fills, rather than reporting an error.
• Exporting to a Figma Variable only works when the token has a #RRGGBB hex — see Figma Variables.