Color Filters

Apply color transformations and effects to graphics

Color filters modify the colors of rendered content. They can be applied to any drawing operation through the paint system.

ColorMatrix

Apply a color transformation matrix to modify colors.

Name	Type	Description
matrix	number[]	20-element color matrix
children	ReactNode	Content to apply filter to

The color matrix is a 4x5 matrix that transforms RGBA values:

[ R' ]   [ m[0]  m[1]  m[2]  m[3]  m[4]  ]   [ R ]
[ G' ]   [ m[5]  m[6]  m[7]  m[8]  m[9]  ]   [ G ]
[ B' ] = [ m[10] m[11] m[12] m[13] m[14] ] × [ B ]
[ A' ]   [ m[15] m[16] m[17] m[18] m[19] ]   [ A ]
                                             [ 1 ]

import { Canvas, Circle, ColorMatrix } from "@shopify/react-native-skia";

const ColorMatrixDemo = () => {
  // Grayscale matrix
  const grayscale = [
    0.33, 0.33, 0.33, 0, 0,
    0.33, 0.33, 0.33, 0, 0,
    0.33, 0.33, 0.33, 0, 0,
    0,    0,    0,    1, 0
  ];

  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={128} cy={128} r={64} color="red">
        <ColorMatrix matrix={grayscale} />
      </Circle>
    </Canvas>
  );
};

Common Matrices

Grayscale

const grayscale = [
  0.2126, 0.7152, 0.0722, 0, 0,
  0.2126, 0.7152, 0.0722, 0, 0,
  0.2126, 0.7152, 0.0722, 0, 0,
  0,      0,      0,      1, 0
];

Sepia

const sepia = [
  0.393, 0.769, 0.189, 0, 0,
  0.349, 0.686, 0.168, 0, 0,
  0.272, 0.534, 0.131, 0, 0,
  0,     0,     0,     1, 0
];

Invert Colors

const invert = [
  -1,  0,  0, 0, 1,
   0, -1,  0, 0, 1,
   0,  0, -1, 0, 1,
   0,  0,  0, 1, 0
];

Adjust Brightness

const brightness = (amount: number) => [
  amount, 0,      0,      0, 0,
  0,      amount, 0,      0, 0,
  0,      0,      amount, 0, 0,
  0,      0,      0,      1, 0
];

OpacityMatrix

Helper function for creating opacity matrices:

import { OpacityMatrix } from "@shopify/react-native-skia";

const matrix = OpacityMatrix(0.5); // 50% opacity

BlendColor

Blend a color with the rendered content using blend modes.

Name	Type	Description
color	Color	Color to blend
mode	BlendMode	Blend mode to use
children	ReactNode	Content to apply filter to

import { Canvas, Circle, BlendColor } from "@shopify/react-native-skia";

const BlendColorDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={128} cy={128} r={64} color="blue">
        <BlendColor color="yellow" mode="multiply" />
      </Circle>
    </Canvas>
  );
};

Blend Modes

Available blend modes:

• "multiply" - Multiply colors
• "screen" - Screen blend
• "overlay" - Overlay blend
• "darken" - Darken
• "lighten" - Lighten
• "colorDodge" - Color dodge
• "colorBurn" - Color burn
• "hardLight" - Hard light
• "softLight" - Soft light
• "difference" - Difference
• "exclusion" - Exclusion
• "hue" - Hue
• "saturation" - Saturation
• "color" - Color
• "luminosity" - Luminosity

Lerp

Interpolate between two color filters.

Name	Type	Description
t	number	Interpolation factor (0-1)
children	ReactNode	Two color filters to interpolate

import { Canvas, Image, ColorMatrix, Lerp } from "@shopify/react-native-skia";

const LerpDemo = () => {
  const grayscale = [/* grayscale matrix */];
  const sepia = [/* sepia matrix */];

  return (
    <Canvas style={{ flex: 1 }}>
      <Image image={myImage} x={0} y={0} width={256} height={256}>
        <Lerp t={0.5}>
          <ColorMatrix matrix={grayscale} />
          <ColorMatrix matrix={sepia} />
        </Lerp>
      </Image>
    </Canvas>
  );
};

LumaColorFilter

Converts colors to their luminance values.

import { Canvas, Circle, LumaColorFilter } from "@shopify/react-native-skia";

const LumaDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={128} cy={128} r={64} color="red">
        <LumaColorFilter />
      </Circle>
    </Canvas>
  );
};

LinearToSRGBGamma

Converts colors from linear to sRGB gamma space.

import { Canvas, Circle, LinearToSRGBGamma } from "@shopify/react-native-skia";

const GammaDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={128} cy={128} r={64} color="lightblue">
        <LinearToSRGBGamma />
      </Circle>
    </Canvas>
  );
};

SRGBToLinearGamma

Converts colors from sRGB to linear gamma space.

import { Canvas, Circle, SRGBToLinearGamma } from "@shopify/react-native-skia";

const GammaDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={128} cy={128} r={64} color="lightblue">
        <SRGBToLinearGamma />
      </Circle>
    </Canvas>
  );
};

Combining Filters

Color filters can be nested to create complex effects:

import {
  Canvas,
  Image,
  ColorMatrix,
  BlendColor,
  LinearToSRGBGamma
} from "@shopify/react-native-skia";

const CombinedFiltersDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Image image={myImage} x={0} y={0} width={256} height={256}>
        <LinearToSRGBGamma>
          <ColorMatrix matrix={grayscale} />
          <BlendColor color="sepia" mode="multiply" />
        </LinearToSRGBGamma>
      </Image>
    </Canvas>
  );
};

Imperative API

You can also create color filters imperatively:

import { Skia } from "@shopify/react-native-skia";

// Create color filter
const colorFilter = Skia.ColorFilter.MakeMatrix(grayscaleMatrix);
const blendFilter = Skia.ColorFilter.MakeBlend(
  Skia.Color("yellow"),
  BlendMode.Multiply
);

// Apply to paint
const paint = Skia.Paint();
paint.setColorFilter(colorFilter);

Related

• Image Filters - Apply effects to images
• Blend Modes - Compositing operations
• Paint Properties - Styling options