Color space and tone mapping

Match colors to your design tool with the output color space, and keep bright layers from clipping with tone mapping.

Matching colors from your design tool

A color space is the range of colors a display can show, plus the numbers used to name them. The same hex value names a slightly different color in two color spaces.

By default, Shaders converts every color into Display P3 linear, a wider color space than sRGB. Figma, Sketch and Adobe XD work in sRGB, so a hex copied from them can render slightly differently in Shaders.

To match your design tool exactly, set colorSpace to 'srgb' on the <Shader>:

<Shader color-space="srgb">
  <SolidColor color="#5b18ca" />
</Shader>

<Shader colorSpace="srgb">
  <SolidColor color="#5b18ca" />
</Shader>

<Shader colorSpace="srgb">
  <SolidColor color="#5b18ca" />
</Shader>

<Shader colorSpace="srgb">
  <SolidColor color="#5b18ca" />
</Shader>

const shader = await createShader(canvas, {
  colorSpace: 'srgb',
  components: [
    { type: 'SolidColor', props: { color: '#5b18ca' } },
  ],
})

Value	Description
`p3-linear`	Display P3 linear (default). Wide gamut, physically accurate blending.
`srgb`	sRGB. Matches hex colors from Figma, Sketch and Adobe XD exactly.

Choosing how gradients mix colors

Several gradient and color components have their own colorSpace prop. It's a different setting with the same name:

Output color space: set on the root <Shader>. It applies to the whole canvas.
Interpolation color space: set per component. It controls how that component blends between its colors, for example between colorA and colorB in a <LinearGradient>.

Interpolation accepts linear, oklch, oklab, hsl, hsv and lch. See each component page for which components support it and their defaults.

Taming bright values with tone mapping

Additive blend modes such as linearDodge, and stacked glows, can push a color channel above 1.0. That's brighter than a screen can show. With the default linear setting, those channels clip at 1.0 and highlight detail is lost.

Tone mapping squeezes bright values into what a screen can show, with a smooth curve instead of a hard cut. A camera's film curve handles overexposure the same way.

Set toneMapping on the root <Shader>:

<Shader tone-mapping="aces">
  <!-- your components -->
</Shader>

<Shader toneMapping="aces">
  {/* your components */}
</Shader>

<Shader toneMapping="aces">
  <!-- your components -->
</Shader>

<Shader toneMapping="aces">
  {/* your components */}
</Shader>

const shader = await createShader(canvas, {
  toneMapping: 'aces',
  components: [
    // your components
  ],
})

Value	Character
`linear`	No compression (default). Values pass through as they are.
`reinhard`	Classic `x / (1 + x)` curve. Gentle, natural roll-off.
`cineon`	Optimized filmic curve. Warm, contrasty highlights.
`aces`	ACES Filmic. The industry-standard cinematic look: punchy colors, slightly darker overall.
`agx`	AgX. A modern curve with the best hue accuracy at high saturation.
`neutral`	Khronos Neutral. Accurate, with minimal stylization.
`hable`	Uncharted 2 (Hable). Warm, smooth whites with a filmic shoulder.
`unreal`	Unreal Engine curve. Bright and smooth.

toneMapping and colorSpace are independent, so you can combine any pair. Tone mapping compresses brightness. The color space sets which colors the numbers name.

Next steps

Blending and masking: the blend modes, including the additive ones that push values past 1.0.
Shape effects: glass, neon and emboss inside 2D, 3D and SVG shapes.
Performance: what each layer costs and how to keep effects fast.