The color property is used to set the color of fonts, backgrounds and other components.
Colors are specified by either:
  • Standard color name: "red"
  • HEX value: "#ff0000"
  • RGB value: "rgb(255,0,0)"

Background Color

To adjust the background color of elements, utilize “backgroundColor”
"backgroundColor": "black", // the color of an elements background

Font Color

To adjust the color of text and other elements, utilize “color”
"metadata": { // metadata properties box = MPB
"backgroundColor": "black",
"fontSize": "12px",
"color": "white",
"margin": "0.2rem",


To harness unique color designs/transitions, you can use gradients. Like the greenish-blue transition on the embed, they can get adjusted with the “background” variable.
They can also get incorporated wherever a color variable is present
how linear gradients work: linear-gradient(direction, color-stop1, color-stop2, ...)
"background": "linear-gradient(170deg, #bceb00 15.57%, #00eaea 84.88%)",

Code Presets

copy + paste within the brackets (...)


  • Any standard color of the rainbow will reflect
  • red, blue, green, purple, yellow, orange,
  • You may also use additional colors by appending the color with either light or dark
  • dark red light red etc.
  • darkred or lightyellow

Gradient Directions

  • 180deg, #bceb00 15.57%, #00eaea 84.88% = vertical
  • 360deg #bceb00 15.57%, #00eaea 84.88% = flipped vertical
  • to right, #bceb00 15.57%, #00eaea 84.88% = right facing
  • to left, #bceb00 15.57%, #00eaea 84.88% = left facing
  • to right, rgba(255,0,0,0), rgba(255,0,0,1) = gradient with transparency
Important: High contrast is critical for people who have imperfect vision. Some tools have the ability to measure and monitor contrast!