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!

Last updated