Color spaces

Syntope Engine stores a color in its own space, so a wide-gamut color is not flattened to hex when it comes in. The stored object is described on the color token page.

Supported spaces

All 14 DTCG color spaces can be stored, resolved and exported.

colorSpace	Components	Valid ranges	Picker in Syntope Tokens
srgb	r, g, b	0–1	sRGB
srgb-linear	r, g, b	0–1	None
hsl	h, s, l	h from 0 to below 360, s and l 0–100	HSL
hwb	h, w, b	h from 0 to below 360, w and b 0–100	None
lab	L, a, b	L 0–100, a and b any number	None
lch	L, C, h	L 0–100, C 0 or more, h from 0 to below 360	None
oklab	L, a, b	L 0–1, a and b any number	None
oklch	L, C, h	L 0–1, C 0 or more, h from 0 to below 360	OKLCH
display-p3	r, g, b	0–1	P3
a98-rgb	r, g, b	0–1	None
prophoto-rgb	r, g, b	0–1	None
rec2020	r, g, b	0–1	None
xyz-d65	X, Y, Z	0–1	None
xyz-d50	X, Y, Z	0–1	None

Any component can be "none" instead of a number. A value outside its range is refused on save. For example hsl(360 50% 50%) is refused. Write hsl(0 50% 50%).

Accepted input

The token dialog takes a CSS color that resolves to one of the 14 spaces, and keeps that space:

#3b82f6   #3b82f6ff   #38f   #38f8
rgb(59 130 246)        rgba(59, 130, 246, 0.5)
hsl(217 91% 60%)       hwb(217 23% 4%)
lab(54% 20 -70)        lch(54% 73 285)
oklab(0.65 -0.02 -0.17)
oklch(0.65 0.19 255)
color(display-p3 0.2 0.5 0.9)
color(rec2020 0.2 0.5 0.9)
rebeccapurple

Input in any other space is refused, not converted. Convert it to one of the 14 spaces first.

The picker only edits in its four spaces. If you use it on a color stored in one of the other ten, the value is rewritten in the picker’s space. To keep such a color in its space, type the value instead.

Conversion to Figma

Figma paints are sRGB, so applying a color goes through these steps:

stored space → sRGB → gamut mapping → clamp to 0–1 → Figma paint

Gamut mapping moves an out-of-gamut color to a nearby in-gamut color instead of cutting each channel separately, which keeps the hue closer. A "none" component counts as 0. alpha becomes the opacity of the paint.

The stored token does not change. Export still writes the original wide-gamut value. A COLOR Figma variable gets the same sRGB conversion, with alpha included.

Hex display

Alpha	Shown as
1	6 digits, #3B82F6
Below 1	8 digits, #3B82F680

Shorthand input such as #38f is stored in full. The hex field of the stored value is always 6 digits, because alpha has its own field.

Choosing a space

Situation	Space
Web-only system, tooling that expects sRGB	srgb
Lightness ramps	oklch, where equal lightness steps look more even
Modern displays	display-p3. The Figma canvas shows the sRGB mapping
Print or wide-gamut assets	prophoto-rgb or rec2020. The Figma canvas shows the sRGB mapping