Graph Visualizer Color Scheme

Graph Visualizer Color Scheme

The color scheme is based on Google's Material Design color palette. Colors for AudioNodes range from Indigo to Teal, but some nodes such as AudioDestination, MediaStream/Element, and ScriptProcessor are exceptions.

AudioNode

We color AudioNodes based on their purposes.

• "Non-offline" Destination: #37474F (Blue Gray, 800)
  • AudioDestination of an AudioContext
• Offline Destination: #5D4037 (Brown, 700)
  • AudioDestination of an OfflineAudioContext
• Source: #009688 (Teal, 500)
  • Oscillator, AudioBufferSource
• Processor: #2196F3 (Blue, 500)
  • BiquadFilter, Convolver, Delay, DynamicsCompressor, IIRFilter, Panner, StereoPanner, WaveShaper
• Inspector: #00BCD4 (Cyan, 500)
  • Analyser
• Gain/Route: #3F51B5 (Indigo, 500)
  • Gain, ChannelMerger, ChannelSplitter
• Media Stream/Element: #9C27B0 (Purple 500)
  • MediaElementAudioSource, MediaStreamAudioDestination, MediaStreamAudioSource
• Deprecated: #C62828 (Red, 800)
  • ScriptProcessor

Edge and Ports

• Connection: #607D8B (Blue Gray)
• Input port: #4CAF50 (Green 500)
• Output port: #E91E63 (Pink 500)
• Port text: #000000 (Black)
• Port stroke: #000000 (Black)
• AudioParam input port: #CDDC39 (Lime 500)
• AudioParam port text: #B0BEC5 (Blue Gray 200)