zColor()

Using zColor(), you can specify in your schema that a string has to be a color.

In the Remotion Studio, a color picker will be displayed, allowing you to change and validate the color.

import {z} from 'zod';
import {zColor} from '@remotion/zod-types';

const myCompSchema = z.object({
  color: zColor(),
});

Compatibility

Browsers			Servers			Environments
Chrome	Firefox	Safari	Node.js	Bun	Serverless Functions	Client-side rendering	Server-side rendering	Player	Studio

Schema validation works in all listed environments. The visual editor is only available in Remotion Studio.