ChromaKey

chromaKey removes pixels that match a target color, which is useful for green-screen style effects.

interface ChromaKey {
  color: string;
  similarity?: number;
  blend?: number;
}

Property	Required	Range/format	Notes
color	Yes	hex color	Example: "#00ff00".
similarity	No	0 to 100	Higher values match more colors.
blend	No	0 to 100	Softens the keyed edge.

Example

Property fragment for a media visual. similarity and blend are unitless amounts on a 0–100 scale, not 0–1 fractions; supply them explicitly for a repeatable look. The preview demonstrates this feature with its recorded fixture.

{
  "chromaKey": {
    "color": "#00ff00",
    "similarity": 18,
    "blend": 8
  }
}

Used By

• Image Elements
• Video Elements
• GIF Elements
• SVG Elements (deprecated)

For HTML elements, use CSS (background, mix-blend-mode) through customCode instead of chromaKey.

A green-screen clip keyed over a background video (the green source was itself rendered by Zvid)

Watch video