Your Alexa Consoles
Sign In
Sign In

Echo Button Animations

This topic provides colors and animation sequences that you can use to animate Echo buttons. To learn how to use this information, see Control Echo Buttons.

Colors

On Echo Buttons, colors might not render as expected. The tables in this section provide examples of colors that you can use for the color parameter in your animation sequences, and how the colors are likely to appear when rendered on Echo Buttons. Keep in mind that if Echo Button batteries are low, the colors might shift.

These are simply examples to provide a starting point. You can use any hex value for the color parameter.

Basic Colors

Name Hex Value Swatch Rendered on Echo Buttons
white FFFFFF    
red FF0000    
orange FF3300    
green 00FF00    
blue 0000FF    
purple 4B0098    
yellow FFD400    
black* 000000    

* Black means that the LED is completely off.

Neon Colors

Name Hex Value Swatch Rendered on Echo Buttons
magenta FC0031    
tangerine FF6600    
lime 98F700    
violet BA00FC    
lemon FFFF00    
cyan 00EEFF    

Muted Colors

Name Hex Value Swatch Rendered on Echo Buttons
brick 670801    
bronze 591C01    
olive 368300    
indigo 960DF3    
gold 594901    
teal 035043    

Pastel Colors

Name Hex Value Swatch Rendered on Echo Buttons
coral FF5428    
wheat FFA024    
kiwi 5BDF24    
lavender CABAFF    
khaki FFFF25    
sky 71E7FF    

Animations

This section provides JSON snippets that you can use in your animation sequences.

As described in Defining Animations, each animation sequence contains one or more steps. For each step, you specify a duration, color, and blend. In the simplest case, an animation consists of one step, which simply turns a button the specified color for the specified duration, and either blends in to that color from the previous color, or switches to the color without any transition.

In the provided JSON, replace the following placeholders with your own values:

  • duration – The duration in milliseconds to render the color. Minimum: 1. Maximum: 65,535.
  • color – The color to render. Specify this as an RGB hexadecimal value (RRGGBB). Do not put # before the value.
  • cycles – The number of times to repeat the entire sequence.

Basic Animations

Name Schema Example Visual

Solid

 
"sequence": [
  {
    "durationMs": duration,
    "color": color,
    "blend": false
  },
  {
    "durationMs": 500,
    "color": color,
    "blend": true
  }
]

"sequence": [
  {
    "durationMs": 3000,
    "color": "FFFFFF",
    "blend": false
  },
  {
    "durationMs": 500,
    "color": "000000",
    "blend": true
  }
]
Echo Button Animation (Solid)

Fade in

 
"sequence": [
  {
    "durationMs": 1,
    "color": "000000",
    "blend": true
  },
  {
    "durationMs": duration,
    "color": color,
    "blend": true
  }
]

"sequence": [
  {
    "durationMs": 1,
    "color": "000000",
    "blend": true
  },
  {
    "durationMs": 3000,
    "color": "FFFFFF",
    "blend": true
  }
]
Echo Button Animation (Fade In)

Fade out

 
"sequence": [
  {
    "durationMs": 1,
    "color": color,
    "blend": true
  },
  {
    "durationMs": duration,
    "color": "000000",
    "blend": true
  }
]

"sequence": [
  {
    "durationMs": 1,
    "color": "FFFFFF",
    "blend": true
  },
  {
    "durationMs": duration,
    "color": "000000",
    "blend": true
  }
]
Echo Button Animation (Fade Out)

Crossfade

 
"repeat": cycles,
"sequence": [
  {
    "durationMs": durationOne,
    "color": colorOne,
    "blend": true
  },
  {
    "durationMs": durationTwo,
    "color": colorTwo,
    "blend": true
  }
]

"repeat": 3,
"sequence": [
  {
    "durationMs": 2000,
    "color": "0000FF",
    "blend": true
  },
  {
    "durationMs": 2000,
    "color": "FF0000",
    "blend": true
  }
]
Echo Button Animation (Crossfade)

Breathe

 
"repeat": cycles,
"sequence": [
  {
    "durationMs": 1,
    "color": "000000",
    "blend": true
  },
  {
    "durationMs": duration,
    "color": color,
    "blend": true
  },
  {
    "durationMs": 300,
    "color": color,
    "blend": true
  },
  {
    "durationMs": duration,
    "color": "000000",
    "blend": true
  }
]

"repeat": 10,
"sequence": [
  {
    "durationMs": 1,
    "color": "000000",
    "blend": true
  },
  {
    "durationMs": 2000,
    "color": "FFFFFF",
    "blend": true
  },
  {
    "durationMs": 300,
    "color": "FFFFFF",
    "blend": true
  },
  {
    "durationMs": 2000,
    "color": "000000",
    "blend": true
  }
]
Echo Button Animation (Breathe)

Blink

 
"repeat": cycles,
"sequence": [
  {
    "durationMs": 500,
    "color": color,
    "blend": false
  },
  {
    "durationMs": 500,
    "color": "000000",
    "blend": false
  }
]

"repeat": 5,
"sequence": [
  {
    "durationMs": 500,
    "color": "FFFFFF",
    "blend": false
  },
  {
    "durationMs": 500,
    "color": "000000",
    "blend": false
  }
]
Echo Button Animation (Blink)

Flip

 
"repeat": cycles,
"sequence": [
  {
    "durationMs": durationOne,
    "color": colorOne,
    "blend": false
  },
  {
    "durationMs": durationTwo,
    "color": colorTwo,
    "blend": false
  }
]

"repeat": 5,
"sequence": [
  {
    "durationMs": 500,
    "color": "0000FF",
    "blend": false
  },
  {
    "durationMs": 1000,
    "color": "FF0000",
    "blend": false
  }
]
Echo Button Animation (Flip)

Pulse

 
"repeat": cycles,
"sequence": [
  {
    "durationMs": 500,
    "color": colorOne,
    "blend": true
  },
  {
    "durationMs": 1000,
    "color": colorTwo,
    "blend": false
  }
]

"repeat": 3,
"sequence": [
  {
    "durationMs": 500,
    "color": "FFFFFF",
    "blend": true
  },
  {
    "durationMs": 1000,
    "color": "000000",
    "blend": false
  }
]
Echo Button Animation (Pulse)