Skip to content
evmux Knowledge Base

Chroma Key Options

The Chroma Key Options panel provides background removal controls for video layers.

Location

Appears in the Layer Toolbar when a video/camera layer is selected.

Panel Layout

Horizontal row of color option buttons (36x36px each):

┌──────────────────────────────────────────────┐
│  [Custom]  [Green]  [Blue]  [Disable]        │
└──────────────────────────────────────────────┘

Color Options

ButtonColorTooltipAction
CustomSampled color“Pick color from video”Opens eyedropper
Green#0bde0b“Remove green color”Standard green screen
Blue#0072ff“Remove blue color”Blue screen removal
DisableBan icon“Disable Chromakey”Turns off chroma key

Button States

Normal State

  • Gray background (light: #bfbfcc, dark: #383e4c)
  • 2px border matching dialog background

Selected State

  • Blue highlight border (#0096ff)
  • Light blue background (light: #e6f3ff, dark: #31435c)

Custom Color Picker

The custom button displays:

  • The currently sampled color as background
  • Eyedropper icon (i_picker)
  • Icon color adapts for contrast (black on light, white on dark)

Color Display

When a custom color is selected:

  • Button background shows the HSV color converted to RGB
  • Brightness calculation determines icon color

Interactions

Selecting Preset Colors

  1. Click Green or Blue button
  2. Chroma key activates immediately
  3. Selected button shows highlight

Using Color Picker

  1. Click the Custom (eyedropper) button
  2. Cursor changes to color picker
  3. Click on the video to sample color
  4. Panel closes, chroma key applies

Disabling

  1. Click the Disable button (ban icon)
  2. Chroma key effect removed
  3. Original video restored

Panel Container

  • Class: tool_bar_drop_item
  • Height: 38px
  • Centered flex layout

Button Styling

width: 36px
height: 36px
margin: 0 5px
border-radius: 6px
border: 2px solid