Colors

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", 

Gradients

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 (...)

Colors

• 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!