Skip to main content

Color Filters

Color Matrix

Creates a color filter using the provided color matrix. A playground to build color matrices is available here.

NameTypeDescription
matrixnumber[]Color Matrix (5x4)
children?ColorFilterOptional color filter to be applied first.
tsx
import { Canvas, ColorMatrix, Image, useImage } from "@shopify/react-native-skia";
 
const MatrixColorFilter = () => {
const image = useImage(require("./assets/oslo.jpg"));
if (!image) {
return null;
}
return (
<Canvas style={{ flex: 1 }}>
<Image
x={0}
y={0}
width={256}
height={256}
image={image}
fit="cover"
>
<ColorMatrix
matrix={[
-0.578, 0.99, 0.588, 0, 0, 0.469, 0.535, -0.003, 0, 0, 0.015,
1.69, -0.703, 0, 0, 0, 0, 0, 1, 0,
]}
/>
</Image>
</Canvas>
);
};
tsx
import { Canvas, ColorMatrix, Image, useImage } from "@shopify/react-native-skia";
 
const MatrixColorFilter = () => {
const image = useImage(require("./assets/oslo.jpg"));
if (!image) {
return null;
}
return (
<Canvas style={{ flex: 1 }}>
<Image
x={0}
y={0}
width={256}
height={256}
image={image}
fit="cover"
>
<ColorMatrix
matrix={[
-0.578, 0.99, 0.588, 0, 0, 0.469, 0.535, -0.003, 0, 0, 0.015,
1.69, -0.703, 0, 0, 0, 0, 0, 1, 0,
]}
/>
</Image>
</Canvas>
);
};

Matrix Color Filter

BlendColor

Creates a color filter with the given color and blend mode.

NameTypeDescription
colorColorColor
modeBlendModesee blend modes.
children?ColorFilterOptional color filter to be applied first.
tsx
import { Canvas, BlendColor, Group, Circle } from "@shopify/react-native-skia";
const MatrixColorFilter = () => {
const r = 128;
return (
<Canvas style={{ flex: 1 }}>
<Group>
<BlendColor color="lightblue" mode="srcIn" />
<Circle cx={r} cy={r} r={r} />
<Circle cx={2 * r} cy={r} r={r} color="red" />
</Group>
</Canvas>
);
};
tsx
import { Canvas, BlendColor, Group, Circle } from "@shopify/react-native-skia";
const MatrixColorFilter = () => {
const r = 128;
return (
<Canvas style={{ flex: 1 }}>
<Group>
<BlendColor color="lightblue" mode="srcIn" />
<Circle cx={r} cy={r} r={r} />
<Circle cx={2 * r} cy={r} r={r} color="red" />
</Group>
</Canvas>
);
};

Lerp

Creates a color filter that is linearly interpolated between two other color filters.

NameTypeDescription
tnumberValue between 0 and 1.
childrenColorFilterThe two filters to interpolate from.
tsx
import { Canvas,ColorMatrix, Image, useImage, Lerp } from "@shopify/react-native-skia";
 
const MatrixColorFilter = () => {
const image = useImage(require("./assets/oslo.jpg"));
if (!image) {
return null;
}
const blackAndWhite = [
0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0,
];
const purple = [
1, -0.2, 0, 0, 0, 0, 1, 0, -0.1, 0, 0, 1.2, 1, 0.1, 0, 0, 0, 1.7, 1, 0,
];
return (
<Canvas style={{ flex: 1 }}>
<Image
x={0}
y={0}
width={256}
height={256}
image={image}
fit="cover"
>
<Lerp t={0.5}>
<ColorMatrix
matrix={purple}
/>
<ColorMatrix
matrix={blackAndWhite}
/>
</Lerp>
</Image>
</Canvas>
);
};
tsx
import { Canvas,ColorMatrix, Image, useImage, Lerp } from "@shopify/react-native-skia";
 
const MatrixColorFilter = () => {
const image = useImage(require("./assets/oslo.jpg"));
if (!image) {
return null;
}
const blackAndWhite = [
0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0,
];
const purple = [
1, -0.2, 0, 0, 0, 0, 1, 0, -0.1, 0, 0, 1.2, 1, 0.1, 0, 0, 0, 1.7, 1, 0,
];
return (
<Canvas style={{ flex: 1 }}>
<Image
x={0}
y={0}
width={256}
height={256}
image={image}
fit="cover"
>
<Lerp t={0.5}>
<ColorMatrix
matrix={purple}
/>
<ColorMatrix
matrix={blackAndWhite}
/>
</Lerp>
</Image>
</Canvas>
);
};

LinearToSRGBGamma

Creates a color filter that converts between linear colors and sRGB colors.

NameTypeDescription
children?ColorFilterOptional color filter to be applied first.
tsx
import { Canvas, BlendColor, Group, Circle, LinearToSRGBGamma } from "@shopify/react-native-skia";
const MatrixColorFilter = () => {
const r = 128;
return (
<Canvas style={{ flex: 1 }}>
<Group>
<LinearToSRGBGamma>
<BlendColor color="lightblue" mode="srcIn" />
</LinearToSRGBGamma>
<Circle cx={r} cy={r} r={r} />
</Group>
</Canvas>
);
};
tsx
import { Canvas, BlendColor, Group, Circle, LinearToSRGBGamma } from "@shopify/react-native-skia";
const MatrixColorFilter = () => {
const r = 128;
return (
<Canvas style={{ flex: 1 }}>
<Group>
<LinearToSRGBGamma>
<BlendColor color="lightblue" mode="srcIn" />
</LinearToSRGBGamma>
<Circle cx={r} cy={r} r={r} />
</Group>
</Canvas>
);
};

SRGBToLinearGamma

Creates a color filter that converts between sRGB colors and linear colors.

NameTypeDescription
children?ColorFilterOptional color filter to be applied first.
tsx
import { Canvas, BlendColor, Group, Circle, SRGBToLinearGamma } from "@shopify/react-native-skia";
const MatrixColorFilter = () => {
const r = 128;
return (
<Canvas style={{ flex: 1 }}>
<Group>
<SRGBToLinearGamma>
<BlendColor color="lightblue" mode="srcIn" />
</SRGBToLinearGamma>
<Circle cx={r} cy={r} r={r} />
</Group>
</Canvas>
);
};
tsx
import { Canvas, BlendColor, Group, Circle, SRGBToLinearGamma } from "@shopify/react-native-skia";
const MatrixColorFilter = () => {
const r = 128;
return (
<Canvas style={{ flex: 1 }}>
<Group>
<SRGBToLinearGamma>
<BlendColor color="lightblue" mode="srcIn" />
</SRGBToLinearGamma>
<Circle cx={r} cy={r} r={r} />
</Group>
</Canvas>
);
};