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.