Color Space

By default, Shaders uses Display P3 linear color space for output. This delivers vibrant, wide-gamut colors on modern displays. However, if you're copying hex colors from Figma, Sketch, or Adobe XD, those tools work in sRGB — so the same hex value may render slightly differently in Shaders.

To match your design tool exactly, set colorSpace to 'srgb':

<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' } }
  ]
})

Output space vs. gradient interpolation

The colorSpace prop on <Shader> controls the output rendering space — how final pixel values are interpreted by your display.

Several gradient and color components also have their own colorSpace prop that controls how colors interpolate between stops (for example, between colorA and colorB in a LinearGradient). These are two separate concepts:

• Output color space — set on the root <Shader>, affects the entire canvas output
• Interpolation color space — set per-component, controls color blending within that effect

Available interpolation modes (where supported): linear, oklch, oklab, hsl, hsv, lch. See individual component docs for options.

Tone mapping

When you layer additive blend modes like linearDodge or build up bright glows, color channels can exceed 1.0 (HDR values). In the default linear mode these are hard-clipped. Tone mapping compresses that range smoothly before display — the same way a camera's film curve handles overexposure.

Set toneMapping on the root <Shader> component:

<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: [/* ... */]
})

toneMapping and colorSpace are independent — they can be combined freely. toneMapping compresses the brightness range of the final image; colorSpace controls the color gamut used for output.